阵列中最后一个视频结束后的停止循环

对由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语句中，我设置的电流等于最后一项。它有一个让最后一个视频播放直到完成的技巧，只有在这之后停止循环并执行其他操作。但是，这是很笨拙：

这是我的工作代码：

<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(); 
    });

来源

2015-10-26 Jaap Klevering

什么是“一切”，你必须给使用的详细信息，至少有点代码 –

我更新了我原来的问题。 –

您可以使用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); 
}

来源

2015-10-26 14:34:21

这停在最后一个视频的开始。我需要最后一段视频播放到最后，然后做一些事情。 –

我看到你会在你的问题中添加更多信息。我编辑了我的答案，在最后一个视频结束时运行一个函数。 –

这可以按需要工作！非常感谢。我无法自己弄清楚。 –

<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>

它应该是类似的东西检查与当前视频索引的视频采集长度。

来源

2015-10-26 14:16:21

阵列中最后一个视频结束后的停止循环

回答

相关问题