HTML5では新しくvideoタグが追加されました。videoタグを利用することで、HTML文書内に手軽に動画ファイルを埋め込むことができます。
今回はそんなvideoタグに対して様々な方法で再生、リソースを適用する方法について紹介します。

JavaScriptから再生する基本的な方法

一番基本的な再生方法は次のようなコードです。videoタグを取得してplayメソッドを実行するだけです。

ループ再生させる

動画を繰り返し再生させるのもJavaScriptから操作できます。loop要素にtrueを指定するだけです。

同時に複数の動画を再生する

こちらは実験です。videoタグで2つの動画を再生しようとするとどうなるでしょうか。この場合、後から再生したものが優先されます。

ダウンロードした動画を再生する(FileTransferを使った方法)

動画リソースをあらかじめアプリ内に入れるのではなく、外部から取得する方法もあります。

まずはFileTransferプラグイン(Monacaで標準提供しています)を利用した方法を紹介します。
fileTransfer.download メソッドを使って動画ファイルをダウンロードします。ダウンロード先は cdvfile として、Cordovaアプリ用のURLスキームの中に保存します。

しかし動画のダウンロードはバッファーに時間がかかることがあり、利用者にとってはストレスになります。ダウンロード処理はあらかじめバックグラウンドで行っておくと、スムーズに再生することができるようになります。

ダウンロードした動画を再生する(Ajaxを使った方法)

FileTransferはプラグインなので、もう少し使いやすいAjaxを使った実装は次のようになります。このように実装することであらかじめコンテンツがキャッシュされた状態で再生できますので、バッファーで悩むことがありません。

なお、POSTメソッドを使う場合はCORSに対応している必要があります。

動画ではなくCanvasタグを使う

さらに変わった方法としてvideoタグではなくCanvasタグを使って動画を描画する方法があります。この場合のメリットとして全画面表示ではなく、埋め込み再生が可能になります。Canvasタグ単独では音声は出ませんが、Audioタグを使うことでカバーできます。

このように実装することで音声の位置(audio.currentTime)に合わせてvideoの内容を取得(video.currentTime)し、Canvas上に描画できます。

注意点

  • Android4.4以下の場合は、Crosswalkを有効にすることで再生可能です。
  • 日本語の動画ファイル名は、認識されません。
  • Content-Security-Policyに media-src * cdvfile:;img-src * android-webview-video-poster:; が必要です。


videoタグだけでも動画を再生することはできますが、JavaScriptと組み合わせることでよりインタラクティブに操作できるようになります。ぜひ今回紹介したテクニックを使って動画を楽しめるアプリを作成してみてください。

今回のプロジェクトはhttps://github.com/goofmint/monaca_video_sampleにアップロードしてあります。実装時の参考にしてください。