陣列中最後一個視頻結束後的停止循環

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

陣列中最後一個視頻結束後的停止循環

回答

相關問題