视频缓冲自定义页面中的背景视频

时间:2015-09-03 06:10:25

标签: html5 html5-video

我正在使用HTML5创建一个背景视频的页面。

我希望在缓冲70%之后播放视频。因此,一旦用户播放视频,视频就不应该被缓冲。

任何人都有解决方案吗?

以下是我的视频代码:

    <div class="container">
<video id="video" poster="data:image/gif,AAAA" width="64" height="64" autoplay loop muted="muted" volume="0">
  <source src="video/video1.mp4" type="video/mp4">
  <source src="video/video1.ogv" type="video/ogv">
  <source src="video/video1.webm" type="video/webm">
  Your browser does not support the video tag.
</video>
</div>

我也试过一些java脚本

<button onclick="myFunction()" id="myButtonId" type="button">Get first buffered range</button><br> 

<video id="myVideo" width="320" height="176" controls>
  <source src="video1.mp4" type="video/mp4">
  <source src="video1.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script>
var vid = document.getElementById("myVideo");

function myFunction() { 
  alert("Start: " + vid.buffered.start(0) + " End: "  + vid.buffered.end(0));
  document.getElementById("myButtonId").click();

if(vid.buffered.end(0)>40){

 vid.autoplay = true;
    vid.load();

}


} 
</script> 

提前致谢!!!!

0 个答案:

没有答案