Autoplay HTML5 video after it loads

Question

I want to autoplay an HTML5 video only after it loads. I would also like to have a progress bar (GIF or CSS) while it loads. Any help?

Answer 1

UPDATE 2 Hey so this answer is a specific work around for this scenario (only a 12sec. video for a slow connection wanting to be played back smoothly) nonetheless this should fill your needs:

 $(document).ready(function() {
   _V_("example_video_1").ready(function(){
      var myPlayer = this;
      myPlayer.on("progress", out_started);
  });
});

function out_started(){
  myPlayer =this;
  var myTextArea = document.getElementById('buffered');
  bufferedTimeRange=myPlayer.buffered();
  if ( (bufferedTimeRange.start(0)==0 ) && ( bufferedTimeRange.end(0) -  bufferedTimeRange.start(0) > 10 ) ){
       myPlayer.play();
  }

}

So some things, bufferedTimeRange can be more then one single rnge of time (but with only 12 sec. of video odds are only one as docs say only 1 ussualy ) .. but not guaranteed . None the less here's a link demoing it http://ec2-23-20-36-210.compute-1.amazonaws.com/video-js.html Hopeully this helps! also if 10 second of buffered video is not enough you can change the 10 to a 12 in the if statement

Original Answer I am not sure why you would want to do this ... but video.js does make it possible

if you have a video element called example_video_1 you can write a javscript that look's like this (not this is if you choose to use video.js which again I recomend set up is easy see http://www.videojs.com/ for an example and get started to actually set it up)

VideoJS("example_video_1").ready(function(){

    var myPlayer = this;

    var howMuchIsDownloaded = myPlayer.bufferedPercent();
    if(howMuchIsDownloaded == 1){
    myPlayer.play();  //start playing the video 
    }else{
    setTimeout(arguments.callee, 100);
    }
 });

Update it appears the API call layed out above is presently broken for Video.js (bug has been reported) Here is an example to tell when a video has finished being buffered if your video tag id is "example_video_1"

$(document).ready(function() {
   _V_("example_video_1").ready(function(){
    var myPlayer = this; 
    myPlayer.on("loadedalldata", Done_download);

  });
});

function Done_download(){
   myPlayer =this;
   var myTextArea = document.getElementById('buffered');
   alert("The video has  been fully buffered ");
    myPlayer.off("loadedalldata", Done_download);
 }

Note there seem's to be an internal mechanism in Video.js that will not allow an entire video stream to be buffered before playback has reached with a certain range of the video (at least with an .mp4 source) @DONSA you can check out this strange behavior here video-js sample page ... ill keep it up for a couple day's on my test server

Answer 2

Not sure whether or not you want it to play only after the page loads, or after the video itself has finished buffering.

If you want it to play automatically upon the page loading you would want to use the tag's "autoplay" attribute.

Example

<video controls autoplay> </video>

For easy to understand information on how to make some rather cool looking loading bars in CCS3, see here. CSS-tricks always has some interesting stuff.

Answer 3

I have a cleaner example, also using video.js:

function progress(){
  video = this;
  if (video.bufferedPercent() > .95 && video.paused()) {
    video.play();
  }
}

$(document).ready(function() {
   _V_("video").ready(function(){
      this.on("progress", progress);
  });
});

and

<video src="mcd.mp4" id="video">