video：動画自体をクリックで再生・停止させる
先週に引き続き、ECサイトで使えそうなvideoタグの利用です。
コントローラーを表示させるとページ全体のデザインに影響がでてしまうので、動画自体をクリックする事で再生・停止するという事をやってみました。前回同様、素材はＮＨＫのアーカイブからダウンロードしてきたので動画ファイルは画質が低いです。
動画を挿入するhtmlが以下になります。
|
1 2 3 4 | <video autoplay loop id="video"> <source src="video/niku.mp4" type="video/mp4"> <source src="niku.webm" type="video/webm"> </video> |
今回は ページに遷移した時点で再生されるようにautoplayして、さらにloopさせます。idにはvideoとつけておきます。
jsで動画を再生・停止
動画を再生・停止させるためのjsを書きます。
|
1 2 3 4 5 6 | function video_play() { video.play(); } function video_pause() { video.pause(); } |
#videoを再生・停止させるjsはこれだけです。かなりシンプルですね。
今回は動画を直接クリックして再生・停止させるのでvideoタグにonclickを追加します。
|
1 2 3 4 | video autoplay loop id="video" onclick="video_pause()"> <source src="video/niku.mp4" type="video/mp4"> <source src="niku.webm" type="video/webm"> </video> |
autoplayで既に動いているのでonckickの停止させます。
jsで動画を停止した時に商品説明を表示
ECサイトで動画を使う事を目的としているので少しでもインタラクティブにしたいなと・・・、そこで今回は動画が停止した際に商品説明が表示するようにしようと思います。こちらのhtmlを追加します。
|
1 2 3 4 5 6 7 8 | <div id="balloon1" onClick="video_play()"> <p>神戸牛 (産地：兵庫県南部)</p> <p>細やかな霜降りにとろけるような独特の味わい</p> <p>コース:お一人様 5,500円から</p> </div> <div id="balloon2" onClick="video_play()"> <p>予約する</p> |
商品説明#balloon1と#balloon2はCSSで消しておきます。
|
1 2 3 4 5 6 7 8 9 | #balloon1, #balloon2{ position:absolute; height:0; overflow:hidden; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -moz-transition:all 0.5s ease; } |
クリックした際に商品説明#balloon1と#balloon2のサイズを変えるjsと動画を再生・停止させるjsが以下です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | function changeProp(objId,x,theProp,theValue) { //v9.0 var obj = null; with (document){ if (getElementById) obj = getElementById(objId); } if (obj){ if (theValue == true || theValue == false) eval("obj.style."+theProp+"="+theValue); else eval("obj.style."+theProp+"='"+theValue+"'"); } } function balloon1(){ changeProp('balloon1','','height','150px','DIV'); } function balloon2(){ changeProp('balloon2','','height','50px','DIV'); } function shut_balloon1(){ changeProp('balloon1','','height','0px','DIV'); } function shut_balloon2(){ changeProp('balloon2','','height','0px','DIV'); } function video_play() { video.play(); setTimeout("shut_balloon1()",200); setTimeout("shut_balloon2()",400); } function video_pause() { video.pause(); setTimeout("balloon1()",200); setTimeout("balloon2()",400); } |
cssの内容を変更するjsを書いて、video.play()とvideo.pause()に入れてしまいます、2枚のテロップ（商品説明）を時間差で出すためにsetTimeoutで開始をずらします。
Author Profile
スターフィールド編集部
SHARE
