HTML 에서 동영상 연속 재생하기 (playlist, shuffle, replay)

# HTML 에서 동영상 연속 재생하기 (playlist, shuffle, replay)

작성중인 글. 이것도 천천히 정리할듯;;;

여러 동영상을 한꺼번에 이어서 재생하거나 반복재생하고 싶어서 정리하는 중. 구현은 Recoeve.net (/user/kipid?cat=[Music/Break]--K-pop) 에 해놨으니 참조하시길. ## PH

• 2024-01-07 : start, end.

## TOC ## HTML <video> tag HTML5 로 오면서 <video> tag 도 생긴거 같긴한데... 이건 직접 서버를 운영하는 사람만 써먹을 수 있는듯? 동영상을 어딘가에 파일로 올려놔야 하니까;;; 파일 형태로 업로드하고 그냥 link 넣으면 될라나? 사용방법은 참조하시길. 그냥 대충 <video controls preload="metadata" src="http://koohara.megaplug.kr/1119 index.mp4#t=5,15" poster="https://t1.daumcdn.net/cfile/tistory/2204A74754DC69BA15"></video> 이런식으로 집어넣으면 됨. Media event 들 잡아서 어찌저찌 처리하면 연속재생 되도록 가능할듯? hash 에 #t=start,end 입력하면 시작 시간, 끝 시간 정할 수 있음. 그런데 끝나도 $("#video-1").on("ended") 가 trigger 안되는듯. 그래서 on("pause") 로 처리해야 함. ### 이어서 재생하기 이어서 재생하기는 아래와 같은 script 로 대충 구현 가능함. 첫번째 동영상이 끝나면 두번째 동영상이 재생되도록 해놨음. 스크롤도 되면서. (스마트폰에서는 데이터 요금 때문에 autoplay 가 막혀있는 경우가 많아서 제대로 동작하지 않는듯.)

Miracle 에서 올린 아래 영상이 짤려서 따로 업로드. 하라 제트코스터 러브 encoded.mp4 ```[.linenums.lang-html] <div class="p rC"><div class="rSC"> <video id="video-1" controls="" preload="metadata" poster="https://t1.daumcdn.net/cfile/tistory/2204A74754DC69BA15"> <source src="https://t1.daumcdn.net/cfile/tistory/276EED3A55445ACB31#t=5,15" type="video/mp4"> Browser does not support video tag. </video> </div></div> Current time : <span id="video-1-current-time"></span> seconds. ```/

Current time : seconds. 파일로 올려진 영상 재생되는지 테스트.

마무리 인사20240107_122954.webm

11.48MB

```[.linenums.lang-html] <div class="p rC"><div class="rSC"> <video id="video-2" controls="" preload="metadata" poster="http://i.imgur.com/Ak0oPIO.jpg" src="https://blog.kakaocdn.net/dn/lJyKG/btsC4tRWXLs/lKUAX8R8heDRtUCuye7F91/tfile.webm" type="video/webm"> Browser does not support video tag. </video> </div></div> ```/

## Youtube API Javascript 통해서 iframe 과도 data 를 주고받을 수 있는듯? Event 관련 data 만 가능한건가? 뭔가 안될거 같은데 돌아감. 신기하네;;; Iframe 에 어떻게 명령을 내릴 수 있는거지??? (window.postMessage 를 이용한다는거 같긴한데...) 아무튼 가장 기본적인 코드는 아래와 같음. 우선 YouTube API javascript 를 넣어주고, 여기서 제공하는 function 들을 적절히 사용해서 control 하면 됨. 자세한 설명은 에서... 너무 자세해서 골치아프긴 하지만;;;

바로 아래에 <div id="id-player"></div> 가 있음.

이렇게 버튼들을 만들면 위에 있는 동영상을 컨트롤 할 수 있음 =ㅇ=;;;
, ,
, , , , , 당연히 유투브 기본 UI 들 클릭해도 기본적으로 다 잘 동작하고. 아래는 player property 들 프린트 해 놓은것. 참조해서 써먹으면 될듯?

### 이어서 재생하기 아래 첫번째 영상이 끝나면 바로 두번째 영상이 재생되도록 해놨음. (스마트폰에서는 데이터 요금 때문에 autoplay 가 막혀있는 경우가 많아서 제대로 동작하지 않는듯.) ```[.linenums] // 이어서 재생하기. y1=new YT.Player($('#youtube-1')[0] // id 대신 DOM element 를 넣어도 됨. , { videoId:'bHQqvYy5KYo' , playerVars:{theme:"light", color:"white", start:10, end:600} , events:{'onStateChange':function(e) { if (e.data===YT.PlayerState.ENDED) { $(window).scrollTop($("#youtube-2").offset().top); y2.playVideo(); } } } }); y2=new YT.Player('youtube-2', { videoId:'u1zgFlCw8Aw' , events:{} }); ```/

Current time : seconds.

### Loop Player Parameters 중 하나인 'loop' 을 이용하면 영상이 끝났을때 replay 가 가능하다는거 같은데, 제한적 지원만 하는듯. 아래 설명을 간단히 요약하면 playlist 가 있을때에만 loop 이 제대로 지원되는듯 함. 'playlist id' 에 'video id' 넣어서 해결하라고.

Note: This parameter 'loop' has limited support in the AS3 player and in IFrame embeds, which could load either the AS3 or HTML5 player. Currently, the loop parameter only works in the AS3 player when used in conjunction with the playlist parameter. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL: http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID

onStateChange 에다가 적절히 code 넣어서 구현할수도 있음. 어차피 loop 도 비슷하게 구현한 것일듯. 아래 영상을 무한루프 되도록 구현해놨음. ```[.linenums] // Loop new YT.Player('youtube-loop', { videoId:'Skhwqq-iGQM' , playerVars:{loop:1} // 동작 안함. , events:{'onStateChange':function(e) { if (e.data===YT.PlayerState.ENDED) { e.target.playVideo(); } } } }); ```/

### Loading a youtube video by a function. 동영상이 여러개일 경우 페이지가 로드될때 다 준비시켜놓기 보단, 사용자가 그 영상 위치로 왔을때 load 해주면 data 를 조금 아낄 수 있음. 이런 코드의 가장 기본이 되는 load function 은 다음과 같이 가능. ```[.linenums] // Loading a youtube video by a function. $("#load-youtube").on("click", function () { new YT.Player('load-youtube-target', { videoId:'bHQqvYy5KYo' }); }); ```/ Load youtube :

### Playlist 바로 YT.Player 를 생성하면서는 playlist 로 만들수가 없는듯? 아래와 같이 만들었음. ```[.linenums] playlist=new YT.Player('youtube-playlist', { events:{'onReady':function(e) { let p=e.target; p.cuePlaylist([ "Skhwqq-iGQM" // Zion.T (자이언티), Crush (크러쉬) - Just (그냥) , "R0W-voiYpQk" // K.will (케이윌), Mamamoo (마마무), Feat. Whee sung (휘성) - Peppermint Chocolate (썸남썸녀) , "ftCCmMeqXds" // 에디킴 (Eddy Kim) - 밀당의 고수 (Push & Pull) , "t0x98vf62_k" // 에디킴 (Eddy Kim) - My Love , "OPf0YbXqDm0" // Mark Ronson - Uptown Funk , "pB-5XG-DbAA" // Sam Smith - Stay With Me , "gEqlF5N8UMs" // Winner - 공허해 ]); p.setLoop(true); p.setShuffle(true); }} }); ```/

Shuffle : ## Daum tv 팟, Naver tvcast, Dailymotion, Vimeo Daum 이나 Naver 는 API 를 따로 지원하는게 없는듯도? 특히나 Naver 쪽은 URL 에 video id 가 명확하지 않아서 URL 만으로 iframe 을 쉽게 가져오기가 힘들게 되어 있음 ㅡ..ㅡ;;; (정확히 말하면 같은 동영상의 URL 쪽 video id 랑 iframe 쪽 video id 가 완전히 다름. 왜 이렇게 디자인 했을까 ㅡㅡ;;;) Dailymotion 이랑 Vimeo 는 지원하는거 같은데, 공부를 좀 해봐야 알듯. ## RRA

HTML <video> tag

1. MDN - <video>
2. w3schools - HTML <video> tag, and HTML5 video
   HTML Audio/Video DOM Reference; and HTML Event Attributes (Media Events)

YouTube

3. Google Developers - YouTube
   YouTube Player API Reference for iframe Embeds
   YouTube JavaScript Player API Reference
   
4. YouTube Embedded Players and Player Parameters
5. MDN - window.postMessage

Etc.

6. developer.dailymotion.com
7. developer.vimeo.com