CODEWITHSUNDEEP
javascriptjqueryvideo
gr3g
gr3g

Reputation: 2914

Play multiple videos

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

Upvotes: 1

Views: 370

Answers (2)

squill25
squill25

Reputation: 1208

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

Upvotes: 1

ariel_556
ariel_556

Reputation: 378

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: '*'

Upvotes: 0

Related Questions