Play multiple videos

Question

I'd like to display an image until a background video has fully loaded and then play it. When videos has come to the end, I'd like to display another picture that, again, is displayed until the 2nd video is loaded.

Any idea how I can achieve that?

<video autoplay="autoplay" id="video">
  <source src="1.mp4"></source>
</video>

#video
{
position: absolute; right: 0; bottom: 0;
min-width: 100%; min-height: 600px;
width: auto; height: auto; z-index: -100;
background: url(1.jpg) no-repeat;
}

score 1 · Answer 1 · edited May 23 '17 at 10:33

I would do something like this:

<video autoplay="autoplay" id="video">
  <source src="1.mp4"></source>
</video>

#video
{
    position: absolute; right: 0; bottom: 0;
    min-width: 100%; min-height: 600px;
    width: auto; height: auto; z-index: -100;
    background: url(1.jpg) no-repeat;
}

Javascript:

// Your video object
var video = document.getElementsById('video');

video.onreadystatechange = function(e){
    // Ready state 4 means that the video has loaded
    if (video.readyState === 4) {
        // It is loaded
        // Remove the loading image:
        $('#video').css('background', '');
    }
};


video.onended = function(e) {
    // The video has ended
    // Add the next loading image:
    $('#video').css('background', 'url(your_next_image) no-repeat');
    // Change the video:
    $('#video source').attr('src', '...your next video...');
};

And you can probably make your way from there. :)

(Sources: This answer to check if your video has loaded, and this answer to know when the video ends.)

score 0 · Answer 2 · answered Nov 18 '14 at 02:08

html:

<video id="video" controls autoplay></video>

JavaScript:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/*url video*/', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status === 200) {
    var myBlob = this.response;
    var vid = (window.webkitURL ? webkitURL : URL).createObjectURL(myBlob);
    var video = document.getElementById("video");
    video.src = vid;
       /*here you can do what ever you want*/
   }
  }
xhr.send();

disadvantage: the origin of the video has to have control-access-allow-origin: '*'

Play multiple videos

2 Answers2