Geek Answers Handbook

Play the full HTML5 video and then loop it

I try to play an 8.6-second video once completely, and then endlessly loop a small portion of the video to maintain the illusion of an endless video. So far I have studied the URI of media files , and ended video. Setting the currentTime attribute in the completed event handler works, but it makes the video blink.

I am currently using the timeupdate event listener to change the time when a video draws to a close [shown below]

elem.addEventListener('timeupdate', function () { if (elem.currentTime >= 8.5) { elem.currentTime = 5; elem.play(); } }, false);

Jsfiddle here

This also works, but the video pauses until it restarts after 5 seconds. Is there a smoother way to play a video once and then cycle through its segment?

+6
source share
5 answers

Try the following: rewind it as soon as it ends:

 vidElem.addEventListener("ended", function () { vidElem.currentTime = 2.5; vidElem.play(); }, false);

Updated script: http://jsfiddle.net/Lt4n7/1/

+2
source

Your code is OK, there is a problem with your MP4 file! Try using a much smaller video like this one ( http://www.w3schools.com/tags/movie.mp4 ) to confirm that the problem is not in your code.

So, how can you achieve the same result, but with large video files? You will need two video files:

  • video1 is the main video
  • video2 is a loop video

Remember: in HTML5 video there is no problem playing and merging large video files, so we will use this method to play the video.

In the example below, we will play the first video, and when it ends, we will execute a function to hide video1 and then show / play video2. (Video 2 is already set to loop)

Remember to load jQuery into your head, otherwise it will not work.

 <video id="video1" width="1080" height="568" poster="movie.png" autoplay onended="run()"> <source src="movie.webm" type="video/webm"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <object data="movie.mp4" width="1080" height="568"> <embed width="1080" height="568" src="movie.swf"> </object> Optional test to be displayed if the browser doesn't support the video tag (HTML 5) </video> <video id="video2" width="1080" height="568" poster="loop.png" loop> <source src="loop.webm" type="video/webm"> <source src="loop.ogg" type="video/ogg"> <source src="loop.mp4" type="video/mp4"> <object data="loop.mp4" width="1080" height="568"> <embed width="1080" height="568" src="loop.swf"> </object> Optional test to be displayed if the browser doesn't support the video tag (HTML 5) </video> <script> $( "#video2" ).hide(); function run(){ $( "#video1" ).hide(); $( "#video2" ).show(); document.getElementById("video2").play(); }; </script>
+2
source

I just had to deal with the same problem and notice the same problems with flicker. Here is my solution:

  • Get 2 videos (or sets of videos) - one for a section without a loop, another for a looped section
  • Creation of 2 video elements.
  • set the loop element to 'display: none'

Then just write down the completed event and the swap display status (the example uses jquery, but you can also easily use 'style.display = "none / block"':

 VideoPlayer1 = document.getElementById('video1'); VideoPlayer2 = document.getElementById('video2'); VideoPlayer1.addEventListener('ended', videoLooper, false); function videoLooper() { VideoPlayer2.play(); $(VideoPlayer2).show(); $(VideoPlayer1).hide(); }
0
source

You cannot solve this problem in javascript. This delay that you see depends on video compression and hardware.

To start playback at a time that is not 0, the video decoder must go back and find the key frame , and then create the current frame, reading everything between the last key frame and the selected time.

I am not a specialist in video compression, but maybe there is a way to select these key frames and place them exactly where you need them. I don’t think it will be easy and smooth.

If you are looking for a simpler solution, use @ Random's , but two <video> tags are used for this limitation.

0
source 

 var iterations = 1; var flag = false; document.getElementById('iteration').innerText = iterations; var myVideo = document.getElementById('video-background'); myVideo.addEventListener('ended', function() { alert('end'); if (iterations < 2) { this.currentTime = 0; this.play(); iterations++; document.getElementById('iteration').innerText = i terations; } else { flag = t rue; this.play(); } }, false); myVideo.addEventListener('timeupdate', function() { if (flag == t rue) { console.log(this.currentTime); if (this.currentTime > 5.5) { console.log(this.currentTime); this.pause(); } } }, false); 
 <div>Iteration: <span id="iteration"></span></div> <video id="video-background" autoplay="" muted="" controls> <source src="https://res.cloudinary.com/video/upload/ac_none,q_60/bgvid.mp4" type="video/mp4"> </video> <div>Iteration: <span id="iteration"></span></div>

// Please note that the loop attribute must not be present in the video element so that the "finished" event works in ie and firefox

0
source

More articles:


All Articles