サンプルコードは参考のために記事の最後にあります。
長々と話が逸れて申し訳ありませんが、できるだけ関連性のある情報を残さずにやり遂げようとしています。
これはちょっと隅っこで自分を描いたような気がします。うまく機能しているように見える表示非表示トグル機能があります。メニュー項目をクリックすると表示および非表示になる DIV の小さな軍隊があります。これはビデオギャラリーです。ボタンは JQuery スクリプト スライダー内にあり、html リスト内にあります。CSS は Div ID で使用されます
機能と非表示はすべてうまく機能します。div が表示されたときに適切なビデオの再生を開始したい場合は、このページをロードするときに preload="none" を削除すると、32 個のビデオすべてがバッファリングされているように見え、ページのロード時間が長くなります。プリロードをなしに設定すると、誰かが適切なボタンをクリックして表示した後、ビデオを再生する準備が整いました。私と私のクライアントは、ウィンドウが表示されたら映画の再生が始まることを期待しています。実際のところ、ウィンドウが表示され、ビデオに「読み込み中」と表示されたら、再生を押すだけでスムーズに再生が開始されます。したがって、自動再生を使用せずに、ボタンを押して適切な div を非表示にしないときにビデオを再生する方法はありますか?
ところで、Video for Everyone をベースとして使用していますが、2 つ以上のビデオに対する解決策を提供していないようです。
ビデオ形式が間違っているのかもしれませんが、quicktime pro から .m4v 拡張子で保存された h264 ビデオを使用しています。フォーマットが自動再生できるかどうかも調べようとしていますが、OGV が自動再生できないことはわかっているので、あまり期待していません。また、フラッシュ フォールバックを追加します。
私はただのアニメーターであり、このようなことについて何も知らないので、私のコードを親切にしてください. また、ビューアによって show hide 関数が切り詰められているようです。それはそこにあり、本当にうまく機能します。
<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>