CODEWITHSUNDEEP
jquery
Jaap Klevering
Jaap Klevering

Reputation: 13

Stop loop after the last video in the array has finished

In reaction to this code written by 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>

How to break out of the loop after the last video in the array has finished playing? I tried everything.

The only way I could make this work was like this: I added an empty item to the end of the array. Than in an if-statement I set current equal to this last item. It does the trick of letting the last video play till it's finished and only after that stop the loop and do something else. But this is very clumsy:

This is my working code:

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

Upvotes: 1

Views: 654

Answers (2)

David Hammond
David Hammond

Reputation: 3306

You can use the javascript shift function to get the first video and remove it from the array:

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

Upvotes: 0

Георги Илиев
Георги Илиев

Reputation: 31

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

Its should be something like that checking the video collection length with the current video index.

Upvotes: 1

Related Questions