首页 文章

如何在不使用自动播放的情况下播放html5视频，因为它可以缓冲一切并减慢页面加载速度

提问于
浏览 次
0

Sample code is at the end of the post for reference.

很抱歉因为这么长时间的啰嗦，只是试图通过并留下没有可能的相关信息 .

这似乎是我在一个角落里画自己 . 我有一个show hide toggle功能似乎工作正常 . 我有一小部分DIV，当点击菜单项时，每个DIV都显示和隐藏 . 这是一个视频库 . 这些按钮位于JQuery脚本滑块中，位于html列表中 . CSS与Div ID一起使用

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

顺便说一句，我使用Video for Everyone作为基础，但似乎并没有提供超过几个视频的解决方案 .

也许我的视频格式是错误的，但我使用的是h264视频，在.m4v扩展名中保存了quicktime pro . 我也试图找出格式是否可以自动播放，但我知道OGV不能这样，所以我不会寄希望于此 . 另外，我将添加一个闪回后备 .

请注意我的代码，因为我只是一名动画师而且对这些东西一无所知 . 此外，看起来我的节目隐藏功能被 Spectator 截断了 . 它在那里工作正常，真的 .

<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>
html video html5 html5-video

2 回答

  • 0
    回复于
  • 0

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

    你可以做的就是为你的玩家创造一个"default"状态 . 在您想要开始缓冲视频文件之前，请不要物理创建 <video> 元素 . 例如，您可能会通过播放按钮（一些简单的图像和CSS）从视频中捕获屏幕截图 . 单击时，将使用带有 <video> 元素的JS替换图像 .

    希望这可以帮助！

    回复于

相关问题