javascript - 尝试创建具有多个起点的 HTML5 视频序列

Question

我对javascript相当陌生。

我正在创建一个视频网站，最终用户可以点击他们喜欢的任何视频并开始观看。我希望在第一个选定的视频结束后自动播放一系列视频。因此，假设最终用户选择 videoSource[2]，数组从那里开始并在 videoSource[2] 结束时播放 videoSource[3]。

I have managed to create an array that triggers the sequence to play, when the first video - videoSource[0] - has ended, however, when another video is selected, the sequence does not play.

我已阅读有关该主题的所有帖子，似乎没有一个可以解决我的问题。

这是我的javascript代码：

<script type='text/javascript'>

let videoSource = new Array();
videoSource[0] = 'VID/Home.mp4';
videoSource[1] = 'VID/MLSS.mp4';
videoSource[2] = 'VID/Ana.mp4';
videoSource[3] = 'VID/FRIEND.mp4';
videoSource[4] = 'VID/LVAletterBox.mp4';

let i = 0; 
const videoCount = videoSource.length;
const element = document.getElementById("videoPlayer");
 
function videoPlay(videoNum) {
    element.setAttribute("src", videoSource[videoNum]);
    element.autoplay = true;
    element.load();
    element.play();
}
document.getElementById('videoPlayer').addEventListener('ended', myHandler, false);
 
videoPlay(0); 
 
function myHandler() {
    i++;
    if (i == videoCount) {
        i = 0;
        videoPlay(i);
    } else {
        videoPlay(i);
    }
}


</script>

这是我的 HTML 代码：

   <div class="modal fade" id="play-video-2">
    <div class="modal-dialog modal-dialog-centered"style="max-width: 80%;" role="document">
     <div class="modal-content">
   
         <div class="modal-body">
             <video id="videoPlayer" width="100%" muted autoplay controls preload="auto" data-setup='{"fluid": true}' >
                 <source src="VID/MLSS.mp4" Addtype="video/mp4">
                 <track kind="captions" src="subs/MLSS SUBS 2021.vtt" srclang="en" label="English">
                 <track kind="subtitles" src="subs/MLSS SUBS 2021-French.vtt" srclang="fr" label="French">
            </video>
         </div>
    
    </div>
     </div>
</div>

<div class="modal fade" id="play-video-3">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 80%;" role="document">
     <div class="modal-content">
   
         <div class="modal-body">
             <video  id="videoPlayer" width="100%" muted autoplay controls preload="auto" data-setup='{"fluid": true}'>
                 <source src="VID/Ana.mp4" type="video/mp4">
                 <track kind="captions" src="subs/Ana Subs.vtt" srclang="en" label="English">
                 <track kind="subtitles" src="subs/Ana Subs-FRENCH.vtt" srclang="fr" label="French">
            </video>
         </div>
    
    </div>
     </div>
</div>
<div class="modal fade" id="play-video-4">
  <div class="modal-dialog modal-dialog-centered" style="max-width: 80%;" role="document">
   <div class="modal-content">
 
       <div class="modal-body">
           <video  id="videoPlayer" width="100%" muted autoplay controls preload="auto" data-setup='{"fluid": true}'>
               <source src="VID/FRIEND.mp4" type="video/mp4">
               <track kind="captions" src="subs/FRIEND subs.vtt" srclang="en" label="English">
               <track kind="subtitles" src="subs/FRIEND subs-FRENCH.vtt" srclang="fr" label="French">
          </video>
       </div>
  
  </div>
   </div>

          </video>
       </div>
  
  </div>
   </div>

标签： javascripthtmlarraysvideo