ビデオギャラリー

複数の動画を、サムネイルクリックで切り替えるタイプのビデオギャラアリーである。  このサイトでは、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<=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; }

コメント

ビデオギャラリー — 2件のコメント

  1. とっても見事な名山の頂上映像ですね‼︎でも私のiPhoneでは、スムーズにパンしないのですがどうしてでしょう?容量不足ですかねー?

    • Wifi 環境でしたら何とか見れると思いますが、三動画とも1920pxのフルHDですので、スマホ対応を考えると、動画のサイズダウンを考慮する必要があると思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>