Blog

video:動画自体をクリックで再生・停止させる

2015.03.31Cat:Blog EC video デザイナー

先週に引き続き、ECサイトで使えそうなvideoタグの利用です。

コントローラーを表示させるとページ全体のデザインに影響がでてしまうので、動画自体をクリックする事で再生・停止するという事をやってみました。前回同様、素材はNHKのアーカイブからダウンロードしてきたので動画ファイルは画質が低いです。

demo

動画を挿入するhtmlが以下になります。

今回は ページに遷移した時点で再生されるようにautoplayして、さらにloopさせます。idにはvideoとつけておきます。

 jsで動画を再生・停止

動画を再生・停止させるためのjsを書きます。

#videoを再生・停止させるjsはこれだけです。かなりシンプルですね。

 

今回は動画を直接クリックして再生・停止させるのでvideoタグにonclickを追加します。

autoplayで既に動いているのでonckickの停止させます。

 

 jsで動画を停止した時に商品説明を表示

ECサイトで動画を使う事を目的としているので少しでもインタラクティブにしたいなと・・・、そこで今回は動画が停止した際に商品説明が表示するようにしようと思います。こちらのhtmlを追加します。

商品説明#balloon1と#balloon2はCSSで消しておきます。

クリックした際に商品説明#balloon1と#balloon2のサイズを変えるjsと動画を再生・停止させるjsが以下です。

cssの内容を変更するjsを書いて、video.play()とvideo.pause()に入れてしまいます、2枚のテロップ(商品説明)を時間差で出すためにsetTimeoutで開始をずらします。

 

 

 

 

 

 

 

 

 

Author Profile

  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ