Question

我想在加载后才能自动播放HTML5视频。我还希望在加载时有一个进度条（GIF或CSS）。有什么帮助吗？

Answer 1

不确定是否要在页加载后或视频本身完成缓冲后才能播放。

如果您希望在页面加载时自动播放，则需要使用标记"autoplay" attribute.

示例

<video controls autoplay> </video>

有关如何在CCS3中制作一些看起来很酷的加载条的简单信息，请参阅here。 CSS技巧总是有一些有趣的东西。

Answer 2

更新2 嘿，所以这个答案是针对这种情况的特定解决方案（只有12秒。视频用于缓慢连接，希望能够顺利播放），但这应该可以满足您的需求：

 $(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个ussualy）..但不能保证。尽管如此，这是一个演示它的链接http://ec2-23-20-36-210.compute-1.amazonaws.com/video-js.html希望这会有所帮助！如果10秒的缓冲视频不够，您可以在if语句中将10更改为12

原始答案 我不确定你为什么要这样做...但是video.js确实可以实现

如果您有一个名为example_video_1的视频元素，您可以编写一个看起来像这样的javscript（如果您选择使用video.js，那么我再次建议设置很容易看到http://www.videojs.com/举个例子并开始实际设置它）

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"

$(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你可以在这里查看这个奇怪的行为video-js sample page ...在我的测试服务器上保持一两天

Answer 3

我有一个更清晰的例子，也使用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);
  });
});

和

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

加载后自动播放HTML5视频

3 个答案: