HTML5 video, waiting for video end, waiting for video ready

后端未结

关注

 1  788

傲寒

Hello as you can see from my sample code i am trying to play an array of videos back to back.

What i attempt to do is create a for loop which cycles for the length of t

相关标签:

1条回答

终归单人心

2021-01-28 13:08

While not replicating all your logic, this video will take the array of videos (defined in the first script block) and step through them using the ended event to advance to the next array item.

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

0 讨论(0)