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

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

데모 :

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

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

<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>


<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="" target="_blank">supports HTML5 video</a></p>

var player = videojs("player");

        sources: [{
            src: '',
            type: 'video/youtube'
        sources: [{
            src: '',
            type: 'video/youtube'
        sources: [{
            src: '',
            type: 'video/mp4'
        poster: ''

// Play through the playlist automatically.



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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.