Play full HTML5 video and then loop a section of it

Question

I\'m trying to play an 8.6 second video once completely, and then loop a small section of the video infinitely, to keep the illusion of a never-ending video. So far I\'ve looked

Answer 1

I just had to deal with the same problem and noticed the same issues with flickering. Here was my solution:

• Get 2 videos (or sets of videos) - one for the non-looped section, the other for the looped section
• Create 2 video elements
• set the looping element to 'display:none'

Then just capture the ended event and swap display status (example uses jquery but you could use 'style.display="none/block"' just as easily:

VideoPlayer1 = document.getElementById('video1');
VideoPlayer2 = document.getElementById('video2');
VideoPlayer1.addEventListener('ended', videoLooper, false);

function videoLooper()
{
    VideoPlayer2.play();
    $(VideoPlayer2).show();
    $(VideoPlayer1).hide();
}