[HTML]videoタグでmp4動画をサイトに埋め込む方法

HTML5のvideoタグを使ってmp4動画をサイトに埋め込む方法のご紹介です。

今回はvideoタグの基本的な使い方から、videoタグをサポートする主要ブラウザと、それらブラウザ向けの動画再生方法などを中心に紹介させていただきます。

video タグのサポートブラウザ

まず最初に、videoタグをサポートしている動画フォーマットは以下の通りです。

ブラウザ	H.264	WebM	Ogg
Internet Explorer 9	○
Firefox 4		○	○
Chrome 10		○	○
Safari 5	○
Opera 11		○	○

参考ページ
videoタグを使って動画を再生する

mp4動画を他の動画形式に変更

上記のように、mp4形式の動画だけでは主要ブラウザに対応することができないため、mp4動画を「Ogg」や「WebM」形式にあらかじめ変換しておく必要があります。

Macでの変換方法は、こちらのmp4動画をogg 形式に変換できる「Miro Video Converter」の使い方の記事も参考にしてみてください。

videoタグ

HTML5のvideoタグを使ってサイトに動画を埋め込む際に、以下の属性を利用することができます。

属性	値
src	動画ファイルのURL
width	動画の幅
height	動画の高さ
poster	動画のサムネイル画像
controls	再生、停止、ボリュームなどのコントローラーの表示設定
autoplay	自動再生
preload	自動読込（ページを読み込んだ時点で裏側で動画の読み込みの指定）。 preload=”none”の指定でプリロードなしです。

上記の属性を用いた上で、videoを使ったサンプルコードを書いてみます。

source タグ

mp4形式の動画がブラウザによって対応していないなどの理由で、再生可能な動画ファイルを複数指定する必要があるため、sourceタグでメディアファイル（動画、音声ファイル）のURL やMIME タイプなどを別途指定してあげます。

属性	値
src	メディアファイルのURL
type	MIME タイプ
media	メディアのタイプ

ogg、webm形式の動画をsourceタグで指定します。

動画が再生されない場合の対処法

videoタグとsourceタグを使っても動画が上手く再生されない（読み込まれない）場合は、以下の点を確認してみましょう。

video タグをサポートしていないブラウザで閲覧

そもそもvideoタグが対応していないブラウザでは動画を再生させることはできません。
ですので、以下のようなvideo タグが非対応なブラウザ向けのメッセージを合わせて書いておくと良いです。

.htaccessを追加

ご利用のサーバーの.htaccessに、以下のような「MIMEタイプを追加する記述」を書いてあげると動くようになる場合があります。

videoタグのsrc属性を外してみる

MacのFirefoxだと、videoタグのsrc属性にogv形式の動画ファイルを指定しないと再生されなかったり、逆にこれだと今度はWindowsのIE11で動画が再生されなくなったり…

挙動がいまいち安定しない場合は、videoタグのsrc属性を外してみる手も有りかと思います。

videoタグによる動画の埋め込み用サンプルコード

ここまでの流れをまとめると、↓このような感じでコードを書けば、videoタグによる動画の埋め込みが実現できるかと思います。

その他、別記事で「WindowsのIE8にvideoタグを対応させる方法」や「jQuery Colorboxのインラインで動画を再生する方法」も合わせて紹介させていただいておりますので、サイトやブログに合わせてカスタマイズしてみてください。

“https://webantena.net/javascriptjquery/ie8-html5media/

https://webantena.net/javascriptjquery/colorbox-inline-video-play/