ビデオギャラリー

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

コメント

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

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

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

  2. コメント失礼いたします。動画ファイルが4つ以上の場合は、どのような記述をすればよろしいでしょうか。

    • こんにちは。
      HTMLに記述で、<input , <video , <label 記述を数だけ増やしてください。その数だけ、#r の数も増えることになります。
      CSSにおいても、増えた数だけ該当する記述を追加してください。
      あとは、サムネイルの表示を幅を調節するなどして、うまく表示できるように工夫してください。
      以上ご検討ください。

  3. 回答ありがとうございます。
    映像は問題ないのですが、音声のみ先に再生した映像の音声が残り、次に再生した映像の音声と重なってしまいます。cssの記述に問題あると思っています。
    サンプルで4本目を想定した場合をご教示いただけませんでしょうか。

    • うっかりしました。javasvriptにも変更が必要です。
      for(var i=1; i&lt;=3; i++) { を、
      for(var i=1; i&lt;=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; } に変更する。

  4. 迅速にかつ丁寧な解説をいただきありがとうございました。
    無事動作しました。
    感謝申し上げます。
    これからも頑張ってください!

コメントを残す

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