サンプル（DEMO）
本サンプル表示用HTML
<input type="radio" id="r1" name="btn"> <input type="radio" id="r2" name="btn"> <input type="radio" id="r3" name="btn"> <div id="screen"> <video id="video1" src="wp-images/video/wasibadake.mp4" width="600px" height="338px" controls></video> <video id="video2" src="wp-images/video/jiigatake.mp4" width="600px" height="338px" controls></video> <video id="video3" src="wp-images/video/hiragatake.mp4" width="600px" height="338px" controls></video> </div> <label for="r1"><div class="thumbs" onclick="video_play(1)"><img src="wp-images/video/wasiba_thumb.jpg"><div class="title">鷲羽岳頂上</div></div></label> <label for="r2"><div class="thumbs" onclick="video_play(2)"><img src="wp-images/video/jii_thumb.jpg"><div class="title">爺が岳頂上</div></div></label> <label for="r3"><div class="thumbs" onclick="video_play(3)"><img src="wp-images/video/hira_thumb.jpg"><div class="title">平が岳頂上</div></div></label>
本サンプル表示用JAVASCRIPT
/* onclickで参照されたとき引数に該当するvideoを再生しそれ以外は停止する。ここでのvideo数は3 */
function video_play(n) {
for(var i=1; i<=3; i++) {
var video = document.getElementById("video"+i);
if(i==n) {
video.play();
} else {
video.pause();
}
}
}
本サンプル表示用CSS
/* 動画表示用枠、位置の設定 */
#screen { width:600px;height:338px;background:#000;position:relative;}
#screen video { position:absolute; top:0;left:0;display:none; }
/* サムネイル・タイトル文字の設定 */
.thumbs { float:left;margin-right:6px;margin-top:5px;position:relative;}
.thumbs:hover { cursor:pointer; }
.title {
position:absolute;top:35%;left:15%;
color:#fff;font-weight:bold;font-size:20px;
}
.thumbs:hover > .title { color:#F45F07; }
/* ラジオボタン（非表示） */
#r1,#r2,#r3 { display:none; }
/* サムネイルクリックで該当するvideoを表示し、それ以外を非表示にする */
#r1:checked ~ #screen #video1 { display:block;}
#r1:checked ~ #screen #video2,#r1:checked ~ #screen #video3 { display:none; }
#r2:checked ~ #screen #video2 { display:block;}
#r2:checked ~ #screen #video1,#r2:checked ~ #screen #video3 { display:none; }
#r3:checked ~ #screen #video3 { display:block;}
#r3:checked ~ #screen #video1,#r3:checked ~ #screen #video2 { display:none; }
とっても見事な名山の頂上映像ですね‼︎でも私のiPhoneでは、スムーズにパンしないのですがどうしてでしょう？容量不足ですかねー？
Wifi 環境でしたら何とか見れると思いますが、三動画とも1920pxのフルHDですので、スマホ対応を考えると、動画のサイズダウンを考慮する必要があると思います。
コメント失礼いたします。動画ファイルが４つ以上の場合は、どのような記述をすればよろしいでしょうか。
こんにちは。
HTMLに記述で、<input , <video , <label 記述を数だけ増やしてください。その数だけ、#r の数も増えることになります。
CSSにおいても、増えた数だけ該当する記述を追加してください。
あとは、サムネイルの表示を幅を調節するなどして、うまく表示できるように工夫してください。
以上ご検討ください。
回答ありがとうございます。
映像は問題ないのですが、音声のみ先に再生した映像の音声が残り、次に再生した映像の音声と重なってしまいます。cssの記述に問題あると思っています。
サンプルで4本目を想定した場合をご教示いただけませんでしょうか。
うっかりしました。javasvriptにも変更が必要です。
for(var i=1; i<=3; i++) { を、
for(var i=1; i<=4; i++) { に変更してください。
それと、#r1（その他の#rに共通）checkedのところも忘れないでください。
#r1:checked ~ #screen #video2,#r1:checked ~ #screen #video3 { display:none; } を、
#r1:checked ~ #screen #video2,#r1:checked ~ #screen #video3,#r1:checked ~ #screen #video4 { display:none; } に変更する。
迅速にかつ丁寧な解説をいただきありがとうございました。
無事動作しました。
感謝申し上げます。
これからも頑張ってください！
頑張りましたね。
これからも当サイトをご活用ください。