複数の動画を、サムネイルクリックで切り替えるタイプのビデオギャラアリーである。
このサイトでは、CSSのみでギャラリーやスライドショーを作成するという趣旨で取り組んでいるが、今回作成する動画の場合は、切り替えた時に再生をスタートさせたり、再生を停止させたりと言う動的な処理が必要になってくる。さすがに、CSSのみではこの処理が無理となってくるので、簡単なjavascriptを使ってこれを補完することにした。
サンプル(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本サンプル表示用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; }