Videoタグを使ってブラウザだけでmp4を再生する

一昔まえだと動画ファイルはflashプレイヤーとかで再生する必要があったのですが、最近のHTML5対応のブラウザであれば、プレイヤー不要で動画を再生することができるみたいです。

■Videoタグ

以下のように記述をします。

<video src="testfile.mp4" autoplay muted loop>
    <p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>

再生できる動画の種類は利用するブラウザに依存します。

■よく使うオプション

個人的によく使うオプションは以下のとおりです。他にもいろいろありますよ。

autoplay 読み込みが完了したら、自動再生を行う

muted 消音状態で起動する

loop 動画のループ再生

■AngularJSで動的に動画を読み込み

AngularJSと連携もできます。ng-srcでファイルのパスを指定すると自動的に動画ファイルが読込されることを確認しています。

以下のように記述をすると、{{filePath}}にはいっているパスの動画を読み込みしてくれることを確認しています。

<video ng-src="{{filePath}}" autoplay muted loop>
    <p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>

いろいろありますねー。最近は便利になりましたねー。