1

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

4

3 回答 3

2

不确定您是否希望它仅在页面加载后播放，还是在视频本身完成缓冲后播放。

如果您希望它在页面加载时自动播放，您需要使用标签的“自动播放”属性。

例子

<video controls autoplay> </video>

有关如何在 CCS3 中制作一些看起来很酷的加载条的易于理解的信息，请参见此处。CSS-tricks 总是有一些有趣的东西。

于 2013-06-20T18:33:21.433 回答
1

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

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

如果你有一个名为 video 元素，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 示例页面...在我的测试服务器上保持几天

于 2013-06-20T21:51:06.777 回答
1

我有一个更干净的例子，也使用 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">
于 2013-11-21T04:18:26.100 回答