如何在不使用自动播放的情况下播放 html5 视频，因为它会缓冲所有内容并真正减慢页面加载速度

Question

示例代码位于帖子末尾以供参考。

抱歉这么长篇大论，只是想把可能的相关信息讲完。

这看起来就像是我把自己逼到了一个角落里。我有一个显示隐藏切换功能，似乎工作正常。我有一小群 DIV，当单击菜单项时，每个 DIV 都会显示和隐藏。这是一个视频库。这些按钮位于 JQuery 脚本滑块中，并且位于 html 列表中。 CSS 与 Div ID 一起使用

，并且隐藏所有功能都非常有效。这似乎是一个策略问题，因为如果我希望在显示 div 时开始播放适当的视频，我会在加载此页面时删除 preload="none"，所有 32 个视频显示在顶部正在缓冲，并且会缩短页面加载时间。当我将预加载设置为“无”时，视频会在那里准备在有人单击相应的按钮来显示后播放。我和我的客户希望在窗口显示后看到电影开始播放。事实上，一旦窗口出现并且视频显示“正在加载”，我所要做的就是点击播放，它就会开始顺利播放。那么，在不使用自动播放的情况下，有没有办法让视频在按下按钮取消隐藏相应的 div 时播放？

顺便说一句，我使用 Video forEveryone 作为基础，但它似乎没有为超过几个视频提供解决方案。

也许我的视频格式错误，但我使用的是从 Quicktime Pro 中以 .m4v 扩展名保存的 h264 视频。我也想知道该格式是否可以自动播放，但我知道 OGV 不能，所以我对此不抱太大希望。另外，我将添加一个闪回后备。

请善待我的代码，因为我只是一个动画师，对这些东西一无所知。 另外，我的显示隐藏功能似乎被观看者截断了。它确实在那里并且工作得很好。

<script>
<!-----Javascript----->

function hideAll(){
tag = document.getElementsByTagName("div");
 for(x=0;x<tag.length; x++){
 //alert(tag[x].getAttribute('id'));
 if(tag[x].getAttribute('id').indexOf("hide") != -1){
 //alert(tag[x].getAttribute('id'));
 tag[x].style.display = "none";
 }
 }
}

function show(id){
el = document.getElementById(id);
 if(el.style.display == "none"){
  hideAll();
  el.style.display = "block";
 }
 else {
  el.style.display = "none";
  document.getElementById('hide').style.display = "";
 }
}
</script>

<!-----The list of buttons inside of the div slider----->
  <li>
               <div id="MenuGroup">
    <div id="MoviePicL1">
     <span style="cursor:pointer" onClick="show('hide1')"><img src="images/Posters/Movie1image"></span>        </div>
      <div id="MoviePicL2">
     <span style="cursor:pointer" onClick="show('hide2')"><img src="images/Posters/Movie2image"></span>      </div>
      <div id="MoviePicL3">
     <span style="cursor:pointer" onClick="show('hide3')"><img src="images/Posters/Movie3image"></span>      </div>
   </div>
  </li>

他们正在切换的是这些：

<div id="hide2" style="display:none;">  
       <div id="VideoContainerDiv" class="mybox"> 
            <video id="Movie1_Reel" width="580" height="326" controls preload="none">
          <source src="Videos/movie1_Reel" type="video/ogg"></source>
             <source src="Videos/movie1_Reel" type="video/mp4"></source>
         </video>
       </div>
    </div>
</div> 

Answer 1

那么，您可以在视频对象显示时调用 play() 。

http:// www.whatwg.org/specs/web-apps/current-work/multipage/video.html#playing-the-media-resource

Answer 2

Webkit 中存在一个已知错误，即使未设置 autobuffer，也会导致视频自动缓冲。它目前已在 Safari nightlys 中修复（也可能在 Chrome 中修复，不太确定）。

您可以做的就是为您的玩家创建一个“默认”状态来消除这种情况。在您想要开始缓冲视频文件之前，请勿物理创建 元素。例如，您可能有一个带有播放按钮的视频屏幕截图（一些简单的图像和 CSS）。单击时，图像将使用 JS 替换为 元素。

希望这有帮助！