videojs를 이용한 유튜브 영상 플레이리스트 반복재생

2021-10-19 by 편리

개발가능 여부를 확인하다 ‘재미있겠다’ 싶은 생각이 들어서 유튜브 영상 주소로 만든 플레이리스트 반복 재생 기능을 만들어 봤다. videojs 를 기본으로 사용하고 여기에 playlist, youtube 플러그인을 조합했다.

데모 : http://demo.chicpro.dev/videojs/

관련 코드는 아래와 같다. js, css 등의 파일은 github 에서 다운로드 할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>

<title>Video.js | HTML5 Video Player</title>
<link href="./js/videojs/video-js.min.css" rel="stylesheet">
<script src="./js/videojs/video.min.js"></script>
<script src="./js/videojs-playlist.min.js"></script>
<script src="./js/Youtube.min.js"></script>

</head>
<body>

<video id="player" class="video-js" controls autoplay muted preload="auto" width="854" height="480">
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
 </video>

<script>
var player = videojs("player");

player.playlist([
    {
        sources: [{
            src: 'https://www.youtube.com/watch?v=AZGcmvrTX9M',
            type: 'video/youtube'
        }]
    },
    {
        sources: [{
            src: 'https://www.youtube.com/watch?v=n4YXauObskA',
            type: 'video/youtube'
        }]
    },
    {
        sources: [{
            src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
            type: 'video/mp4'
        }],
        poster: 'http://media.w3.org/2010/05/sintel/poster.png'
    }
]);

// Play through the playlist automatically.
player.playlist.autoadvance(0);
player.playlist.repeat(true);
</script>

</body>

</html>

플레이리스트 자동 재생이 적용되어 있는데 Chrome 브라우저에서는 video 태그에 muted 속성이 없을 경우 자동 재생이 작동하지 않는다. <video id="player" class="video-js" controls autoplay muted preload="auto" width="854" height="480"> 이 내용을 몰라 한참 시간을 낭비했다.