video中津川篤司HTML5では新しくvideoタグが追加されました。videoタグを利用することで、HTML文書内に手軽に動画ファイルを埋め込むことができます。今回はそんなvideoタグに対して様々な方法で再生、リソースを適用する方法について紹介します。基本的な再生方法は次のようなコードです。videoタグを取得してplayメソッドを実行するだけです。video.play();</script>ループ再生させる動画を繰り返し再生させるのもJavaScriptから操作できます。loop要素にtrueを指定するだけです。true);video1.play();同時に複数の動画を再生するこちらは実験です。videoタグで2つの動画を再生しようとするとどうなるでしょうか。この場合、後から再生したものが優先されます。こちらが再生されます</script>ダウンロードした動画を再生する(FileTransferを使った方法)動画リソースをあらかじめアプリ内に入れるのではなく、外部から取得する方法もあります。FileTransferプラグイン(Monacaで標準提供しています)を利用した方法を紹介します。メソッドを使って動画ファイルをダウンロードします。して、Cordovaアプリ用のURLスキームの中に保存します。{});しかし動画のダウンロードはバッファーに時間がかかることがあり、利用者にとってはストレスになります。ダウンロード処理はあらかじめバックグラウンドで行っておくと、スムーズに再生することができるようになります。ダウンロードした動画を再生する(Ajaxを使った方法)FileTransferはプラグインなので、もう少し使いやすいAjaxを使った実装は次のようになります。このように実装することであらかじめコンテンツがキャッシュされた状態で再生できますので、バッファーで悩むことがありません。POSTメソッドを使う場合はCORSに対応している必要があります。'file://');動画ではなくCanvasタグを使うさらに変わった方法としてvideoタグではなくCanvasタグを使って動画を描画する方法があります。この場合のメリットとして全画面表示ではなく、埋め込み再生が可能になります。Canvasタグ単独では音声は出ませんが、Audioタグを使うことでカバーできます。},false);}このように実装することで音声の位置(audio.currentTime)に合わせてvideoの内容を取得(video.currentTime)し、Canvas上に描画できます。注意点Android4.4以下の場合は、Crosswalkを有効にすることで再生可能です。日本語の動画ファイル名は、認識されません。videoタグだけでも動画を再生することはできますが、JavaScriptと組み合わせることでよりインタラクティブに操作できるようになります。今回紹介したテクニックを使って動画を楽しめるアプリを作成してみてください。今回のプロジェクトはhttps://github.com/goofmint/monaca_video_sampleにアップロードしてあります。実装時の参考にしてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。アプリ申請のスクリーンショ...国際化対応へ。(JavaScript基礎構文)iOS16から導入された「デベロッパモード」についてhtmx:JavaScriptなしでサーバーとの通信を実現する見やすい、メンテナンスしやすいJavaScriptのために。