在数组中的最后一个视频完成后停止循环答案

【问题标题】：Stop loop after the last video in the array has finished在数组中的最后一个视频完成后停止循环
【发布时间】：2015-10-27 02:20:50
【问题描述】：

针对Offbeatmammal on febr. 2 2014编写的这段代码。

<head>
....
<script>
    var videos = new Array("BigBuck.m4v","Video.mp4","BigBuck.m4v","Video2.mp4");
    var currentVideo = 0;

function nextVideo() {
    // get the element
    videoPlayer = document.getElementById("play-video")
    // remove the event listener, if there is one
    videoPlayer.removeEventListener('ended',nextVideo,false);

    // update the source with the currentVideo from the videos array
    videoPlayer.src = videos[currentVideo];
    // play the video
    videoPlayer.play()

    // increment the currentVideo, looping at the end of the array
    currentVideo = (currentVideo + 1) % videos.length

    // add an event listener so when the video ends it will call the nextVideo function again
    videoPlayer.addEventListener('ended', nextVideo,false);
}
</script>
</head>
<body> 
... 
<div class="video-player">
    <video  id="play-video" width="588" height="318" controls autobuffer muted>
    Your browser does not support the video tag.
    </video>    <!--end video container -->
</div>  

<script>
    // call the video player
    nextVideo()
</script>

如何在数组中的最后一个视频播放完后跳出循环？我什么都试过了。

我可以完成这项工作的唯一方法是：我在数组的末尾添加了一个空项。比在 if 语句中，我将 current 设置为等于最后一项。它的诀窍是让最后一个视频播放直到它完成，然后才停止循环并做其他事情。但这很笨拙：

这是我的工作代码：

<script type="text/javascript">
     var videos = ["video/1964","video/1964deVos",""];
     var current = 0;
     var videoPlayer = document.getElementById("videoplayer");
     var last = (current + 1) % videos.length-1;

     function vid() {
     if (videoPlayer.canPlayType('video/mp4')) {
     mimetype = '.mp4';
     }
     if (videoPlayer.canPlayType('video/webm')) {
     mimetype = '.webm';
     }
     videoPlayer.removeEventListener('ended',vid,false);
     videoPlayer.src = videos[current]+mimetype;
     videoPlayer.play();
     current = (current + 1) % videos.length;
     if (current==last){
     $("#media").hide();
     $('#select').delay(1000).fadeIn(1000);
     }
     videoPlayer.addEventListener('ended', vid,false);
     }

     $(document).ready(function(){
     vid();
     });

【问题讨论】：

什么是“一切”，你必须给使用更多信息，至少有点你的代码
我更新了我原来的问题。

标签： jquery

【解决方案1】：

<script>
    var videos = new Array("BigBuck.m4v","Video.mp4","BigBuck.m4v","Video2.mp4");
    var currentVideo = 0;

function nextVideo() {
    // get the element
    videoPlayer = document.getElementById("play-video")
    // remove the event listener, if there is one
    videoPlayer.removeEventListener('ended',nextVideo,false);

    // update the source with the currentVideo from the videos array
    videoPlayer.src = videos[currentVideo];
    // play the video
    videoPlayer.play()

    // increment the currentVideo, looping at the end of the array
    currentVideo = (currentVideo + 1) % videos.length
    if(currentVideo == videos.length){
        return;
    }
    // add an event listener so when the video ends it will call the nextVideo function again
    videoPlayer.addEventListener('ended', nextVideo,false);
}
</script>

它应该类似于使用当前视频索引检查视频集合长度。

【讨论】：

【解决方案2】：

您可以使用 javascript shift 函数获取第一个视频并将其从数组中删除：

// update the source with the currentVideo from the videos array
videoPlayer.src = videos.shift();
// play the video
videoPlayer.play()

// add an event listener so when the video ends it will call the nextVideo function again
if (videos.length > 0) {
    videoPlayer.addEventListener('ended', nextVideo, false);
} else {
    videoPlayer.addEventListener('ended', function(){
        $("#media").hide();
        $('#select').delay(1000).fadeIn(1000);
    }, false);
}

【讨论】：

这会在最后一个视频的开头停止。我需要最后一个视频播放到最后，然后再做一些事情。
我看到您在问题中添加了更多信息。我编辑了答案以在最后一个视频结束时运行一个函数。
这可以按需要工作！非常感谢。我只是无法自己弄清楚。