HTML5 : 배열의 동영상 태그에서 차례로 동영상을 재생하나요?

Question

저는 HTML5 비디오 태그로 몇 개의 비디오를 하나씩 재생하려고했습니다.

나는 비슷한 질문을 여러 차례 접했고 주어진 질문에 대한 답변을 기반으로 코드를 작성하려고했습니다.

그러나 나는 단지 첫 번째 비디오 배열에서 및 는 첫 번째 비디오 반복 계속 재생할 수 있습니다!

videoSource = ["vidoe1.mp4", "video3.mp4", "video44.mp4", "video55.mp4", "video9.mp4"] 

난과 같이 클릭 이벤트에 비디오를 시작하려고 :

videoSource = ["vidoe1.mp4", "video3.mp4", "video44.mp4", "video55.mp4", "video9.mp4"] 

$(document).on('click','.playBtn', function(e){ 

var videoCount = videoSource.length; 
var video_index  = 0; 
var video_player = null; 

function onload(){ 
      videosToPlay = document.getElementById("videosToPlay"); 
      video_player = document.getElementById("idle_video"); 
      video_player.setAttribute("src", videoSource[video_index]); 
      videosToPlay.play(); 
     } 

function onVideoEnded(){  
      if(video_index < videoSource.length - 1){ 
       video_index++; 
      } 
      else{ 
       video_index = 0; 
      } 
      video_player.setAttribute("src", videoSource[video_index]); 
      videosToPlay.play(); 
     } 


onload(); 

$("#videosToPlay").bind("ended", function() { 
    //alert('Video ended!'); 
    onVideoEnded(); 
}); 



}); 

나는이 같은 배열의 비디오를 저장

:

그래서,이 내 코드입니다

내 동영상 태그 :

<video id="videosToPlay" width="100%" preload="none" controls playsinline> 

<source id="idle_video" src="" type="video/mp4"> 

</video> 

누군가이 문제에 대한 조언을 구할 수 있습니까?

미리 감사드립니다.

Answer 1

이 작동합니다 :

videoSource = ["video1.mp4", "video3.mp4", "video44.mp4", "video55.mp4", "video9.mp4"]; 

$('.playBtn').click(function(e){ 

var videoCount = videoSource.length; 
var video_index  = 0; 

function onload(){ 
      videosToPlay = document.getElementById("videosToPlay"); 
      videosToPlay.addEventListener('ended',onVideoEnded,false); 
      videosToPlay.src=videoSource[video_index]; 
      videosToPlay.play(); 
     } 

function onVideoEnded(){  
      video_index++; 
      if (video_index > videoCount-1) video_index = 0; 
      videosToPlay.src=videoSource[video_index]; 
      videosToPlay.play(); 
     } 


onload(); 

}); 

는 또한 비디오 태그 소스 요소를 삭제합니다.

제대로 작동하는지 확인하고 답변 해주세요.