Blog

html5 video javascriptで動画のタイムにあわせてテロップを出す

2015.04.07Cat:Blog EC video

サイトに埋め込んだ動画にjavascriptを使ってテロップを出す方法です、そもそも「動画に元からテロップ入れておけばいいじゃないか」ってことになってしまいますが….。応用すればflashを使わずにvideoタグとjsで色々な事ができそうな気がします。

demo

方法としてはcurrentTimeプロパティを使って動画の現在尺に合わせた内容の文章を表示させています。

 

video + javascript 現在の再生位置を表示する

テロップの前にまず現在の再生位置(再生時間)を表示させてみます。

htmlは各ブラウザに対応した動画ファイルを挿入して、再生位置を表示するpタグを書いておきます。

「timeupdate:再生位置が変更された」というイベントで処理をさせる事で常に再生時間を取得してくれます。

video + javascript 尺に合わせてテロップを出す

if分で尺を限定する事で、画にあったテロップが出せます。

htmlでテロップが表示される場所も作ります。

この方法を応用すれば、動画中の商品をクリックすれば商品ページに飛ぶようなインタラクティブなサイトが作れると思います。

 

 

 

 

 

Author Profile

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

Archive

ページTOPへ