0

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

很抱歉这么啰嗦，只是想通过并且没有留下任何可能的相关信息。

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

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

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

也许我的视频格式有误，但我使用的是从 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>
4

2 回答 2

0

好吧，您可以在显示视频对象时调用它的 play()。

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

于 2010-07-19T19:27:48.010 回答
0

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

你可以做的就是为你的播放器创建一个“默认”状态。<video>在您想要开始缓冲视频文件之前，不要物理创建元素。例如，您可能有一个带有播放按钮的视频屏幕截图（一些简单的图像和 css）。单击时，图像将使用 JS 替换为<video>元素。

希望这可以帮助！

于 2010-07-19T21:30:55.090 回答