Skip to content

CHICPRO

  • Life Log
  • Cycling Log
  • Photo Log
    • Portrait
    • Landscape
    • Flower
    • Etc
  • Coding Log
  • Information

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"> 이 내용을 몰라 한참 시간을 낭비했다.

Post navigation

Previous Post:

PHPMailer를 이용한 이메일 발송

Next Post:

애드센스 sellers.json 게시 알림 해결

Recent Posts

  • PHP 코드 중간에서 include_path 설정 변경하기
  • 아이폰 키보드 오타 줄이기
  • iPhone 음악 음질 향상 방법
  • Windows 11 업데이트 수동으로 설치하기
  • AWS CLI를 이용하여 S3 파일의 Content-Type 변경
  • 맥 Automator를 이용한 여러 개 App 동시실행
  • 인터넷 접속이 제한된 환경에서 brew 를 이용한 패키지 업데이트
  • Notepad++ NppFTP 플러그인 수동 설치
  • Gitlab CI 에서 Merge Request Approve 여부 체크
  • hidutil 을 이용한 맥키보드 한/영 변경키 변경

Recent Comments

  • 편리 on Notepad++ NppFTP 플러그인 수동 설치
  • paul-j on Notepad++ NppFTP 플러그인 수동 설치
  • YS on Windows 10 iCloud 사진 저장 폴더 변경
  • 편리 on Docker를 이용한 Centos7 + httpd + php 5.4 개발환경 구축
  • Stas on Docker를 이용한 Centos7 + httpd + php 5.4 개발환경 구축
  • 편리 on [PHP] HTTP와 PHP를 이용한 html5 video 스트리밍 구현
  • Kim on [PHP] HTTP와 PHP를 이용한 html5 video 스트리밍 구현
  • 편리 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 고맙습니다 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 편리 on PHPMailer를 이용한 이메일 발송

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
© 2023 CHICPRO | Built using WordPress and SuperbThemes