3

I am running the following code which changes the source of an html5 video at the end of each video, so that it constantly plays one video after another. After the first video finishes, it runs the second, then the third and eventually starts again from the beginning, resulting in an endless cycle. It also chooses a random starting point, but that is not important for my question.

In the code below you will only find two video sources but the final code would use around ten or so.

My problem is that there is a small pause between the end of a video and the beginning of the next one. I have made the background-color of the video tag red so that you will be able to see a red flash between the playback of each video.

I'm guessing that this could be solved by preloading all videos specified inside the javascript code. So what I would like to achieve is to preload only the next video in the list specified inside the javascript code when the current video is playing. So when video nr. 5 is playing, it should preload video nr. 6 etc..

Or is this not something that could be solved by effective buffering / preloading? I'm happy about any other suggestions as well..

var vidElement = document.getElementById('video');
    var vidSources = [
      "http://www.w3schools.com/html/mov_bbb.mp4",
      "http://www.w3schools.com/html/movie.mp4"
      ];
    var activeVideo = Math.floor((Math.random() * vidSources.length));
    vidElement.src = vidSources[activeVideo];
    vidElement.addEventListener('ended', function(e) {
      // update the active video index
      activeVideo = (++activeVideo) % vidSources.length;
      if(activeVideo === vidSources.length){
        activeVideo = 0;
      }

      // update the video source and play
      vidElement.src = vidSources[activeVideo];
      vidElement.play();
    });
video { background-color: red }
<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="video" autoplay muted playsinline></video>
<p>(each video is just ~ 10 seconds)</p>

2
  • Would you like to have preloaded an entire HTML5 video source or only a small part?
    – Bharata
    Sep 25, 2018 at 19:07
  • @Bharata Whatever helps to get rid of the red flash (small gap) in between the videos.. I was guessing that preloading each video prior to playback would solve this but I’m not 100% sure Sep 25, 2018 at 20:31

1 Answer 1

1

You can create video elements with preload attribute and add it to div containar like follows:

function initVideoElement(videoEl)
{
    videoEl.playsinline = true;
    videoEl.muted = false;
    videoEl.preload = 'auto'; //but do not set autoplay, because it deletes preload

    //loadedmetadata is wrong because if we use it then we get endless loop
    videoEl.onplaying = function(e)
    {
        if(++nextActiveVideo == 2)
            nextActiveVideo = 0;

        //replace the video elements against each other:
        if(this.inx == 0)
            nextVideoElement = videoElements[1];
        else
            nextVideoElement = videoElements[0];

        nextVideoElement.src = vidSources[nextActiveVideo];
        nextVideoElement.pause();
    };

    videoEl.onended = function(e)
    {
        this.style.display = 'none';
        nextVideoElement.style.display = 'block';
        nextVideoElement.play();
    };
}

var videoContainer = document.getElementById('videoContainer'),
    nextActiveVideo = 0,
    nextVideoElement,
    videoElements =
    [
        document.createElement('video'),
        document.createElement('video')
    ],
    vidSources =
    [
        "http://www.w3schools.com/html/mov_bbb.mp4",
        "http://www.w3schools.com/html/movie.mp4"
    ];

videoElements[0].inx = 0; //set index
videoElements[1].inx = 1;

initVideoElement(videoElements[0]);
initVideoElement(videoElements[1]);

videoElements[0].autoplay = true;
videoElements[0].src = vidSources[0];
videoContainer.appendChild(videoElements[0]);

videoElements[1].style.display = 'none';
videoContainer.appendChild(videoElements[1]);
video{background-color: red}
<div id="videoContainer"></div>

11
  • @JaschaGoltermann, did you not seen this snippet? Instead of autoplay I use play() and it works. Or what is the problem?
    – Bharata
    Sep 26, 2018 at 7:04
  • Yes, I did see it but I need a solution that works with autoplay.. Could you perhaps create a jsFiddle of this that uses autplay? I'm also looking into other solutions that create a canvas instead of a video tag similar to this: stackoverflow.com/a/34137680/1517585 Sep 26, 2018 at 7:27
  • @JaschaGoltermann, I do not understand why do yo need autoplay when it works with play()? Your next video starts automaticalľy. What do you need more? Or do you need that your first video starts automaticalľy? If yes you can write vidElement.setAttribute('autoplay','true'); direct after creating from vidElement. You can read in the docu the following: The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the video for playback.
    – Bharata
    Sep 26, 2018 at 7:49
  • Yes, I need that the first video starts automatically. I have inserted the code as you suggested and everything works fine, but the small gap inbetween the videos is visible just like with my own solution I posted in the question (see here: jsfiddle.net/zwnjbt1L) I have set the background-color of the video to red so that this gap is clearly visible. So this is basically what I had already achieved anyway when posting the question. What I wanted to achieve was to have both autoplay AND effective preloading so that the small gap would disappear... Sep 26, 2018 at 8:02
  • With the current solutions, preloading is not effectively used when using autoplay, because it can only start preloading as soon as the playback of the next video starts.. instead, it should already do that while the current video is still playing. Sep 26, 2018 at 8:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.