示例代码在帖子末尾以供参考。
很抱歉这么啰嗦,只是想通过并且没有留下任何可能的相关信息。
这似乎是我把自己画在一个角落里。我有一个显示隐藏切换功能,似乎工作正常。我有一小群 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>