加载后自动播放HTML5视频 [英] Autoplay HTML5 video after it loads

问题描述

我只想在HTML5视频加载后自动播放.我还希望在加载时有一个进度条(GIF或CSS).有帮助吗?

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?

推荐答案

更新2 可以流畅播放)，尽管这样可以满足您的需求:

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

}

因此，在某些情况下，bufferedTimeRange可能不止一个时间(但是只有12秒的视频赔率仅是文档通常说的1秒)，..但不能保证.尽管如此，这里还是一个演示它的链接 http://ec2-23-20-36-210.compute-1.amazonaws.com/video-js.html 希望对您有所帮助！另外，如果10秒的缓冲视频不够用，您可以在if语句

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

原始答案 我不确定为什么要这么做...但是video.js确实使它成为可能

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

如果您有一个名为example_video_1的视频元素，则可以编写一个如下所示的javscript(不是，这是如果您选择使用video.js，我再次建议您进行设置，请参见

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

更新，看来上面列出的API调用目前已被Video.js破坏了(已报告错误)这是一个示例，用于告诉您视频的ID是否已缓冲到何时结束是"example_video_1"

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

注意:Video.js中似乎存在一种内部机制，该机制不允许在一定范围的视频播放之前(至少使用.)对整个视频流进行缓冲. mp4来源) @DONSA，您可以在此处视频-js示例页面 ...在我的测试服务器上持续了几天的麻烦

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

这篇关于加载后自动播放HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！