Blog

videoタグの動画をcanvasを使って表示する

html5のvideoタグを使って動画をサイトに組み込む場合、スマホで動画を再生するとフルスクリーン表示になってしまいます。iosは基本的にフルスクリーン表示になるはずです。

動画上をクリックして表示されている物の情報を出すなどインタラクティブなサイトを作ろうとすると、このフルスクリーン表示が問題になってしまいます。

今回はこのフルスクリーン表示を何とか解消できないかと思い、videoタグの動画をcanvasに出力する方法を探ってみました。

videoタグの動画をcanvasに切り取る

demo1

まずはhtmlです。videoタグで動画を設置して、動画の出力先となるcanvasと動画を出力させるためのbuttonも作っておきます。

ここではsourceにもサイズを指定します。

続いてjsです。

canvasに画像や動画を描写するにはdrawImage()メソッドを使用します。

canvasに表示させるためのスクリプト自体はかなりシンプルですが、sourceのどの部分をもってくるかなどサイズの指定が実感複雑です。詳しくはこちらを参照してください。http://www.html5.jp/canvas/ref/method/drawImage.html

videoタグの動画をcanvas内にリアルタイムで表示させる

demo2

今度はcanvasの中で動画が再生されるようにします。

htmlはdemo1とほとんと変わらず、buttonタグ内だけ名前を変更してあります。

timeupdateイベントは現在の再生位置が変更された時に発生するので、動画が再生されている状態で常にcanvasに動画が出力されます。

しかし、実際再生してみるとカクカクしてしまい常に出力ができません。

タイマーを使ってフレームレートに合わせる

demo3

今度はタイマーを使って動画のフレームレートに合わせて処理を行うようにします。

今回使用している動画は1秒あたり30フレームなので、1000/30とします。動画によっては1秒あたり24、48,60フレだったりするので使用する動画に合わせてみて下さい。

 

最後にvideoタグを非表示にして、canvasだけにしたものがdemo4です。

demo4

 

Author Profile

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

Archive

ページTOPへ