[HTML]video タグでmp4 動画をサイトに埋め込む方法
スポンサード
Mac での変換方法は、こちらの mp4 動画をogg 形式に変換できる「Miro Video Converter」の使い方 の記事も参考にしてみてください。
上記の属性を用いた上で、
ogg、webm 形式の動画を
ですので、以下のようなvideo タグが非対応なブラウザ向けのメッセージを合わせて書いておくと良いです。
挙動がいまいち安定しない場合は、video タグのsrc 属性を外してみる手も有りかと思います。
その他、別記事で Windows のIE8 にvideo タグを対応させる方法や、jQuery Colorbox のインラインで動画を再生する方法も合わせて紹介させていただいておりますので、サイトやブログに合わせてカスタマイズしてみてください。
スポンサード
HTML5 のvideo
タグを使ってmp4 動画をサイトに埋め込む方法のご紹介です。
今回はvideo タグの基本的な使い方から、video タグをサポートする主要ブラウザと、それらブラウザ向けの動画再生方法などを中心に紹介させていただきます。
目次
video タグのサポートブラウザ
まず最初に、video
タグをサポートしている動画フォーマットは以下の通りです。ブラウザ | H.264 | WebM | Ogg |
---|---|---|---|
Internet Explorer 9 | ○ | ||
Firefox 4 | ○ | ○ | |
Chrome 10 | ○ | ○ | |
Safari 5 | ○ | ||
Opera 11 | ○ | ○ |
参考ページ
videoタグを使って動画を再生する
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
を使ったサンプルコードを書いてみます。<video src="sample.mp4" width="640" height="360" poster="sample.jpg" controls autoplay preload></video>
source タグ
mp4 形式の動画がブラウザによって対応していないなどの理由で、再生可能な動画ファイルを複数指定する必要があるため、source
タグでメディアファイル(動画、音声ファイル)のURL やMIME タイプなどを別途指定してあげます。属性 | 値 |
---|---|
src | メディアファイルのURL |
type | MIME タイプ |
media | メディアのタイプ |
ogg、webm 形式の動画を
source
タグで指定します。<video src="sample.mp4" width="640" height="360" poster="sample.jpg"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogg" type="video/ogg"> <source src="sample.webm" type="video/webm"> </video>
動画が再生されない場合の対処法
video タグとsource タグを使っても動画が上手く再生されない(読み込まれない)場合は、以下の点を確認してみましょう。video タグをサポートしていないブラウザで閲覧
そもそもvideo
タグが対応していないブラウザでは動画を再生させることはできません。ですので、以下のようなvideo タグが非対応なブラウザ向けのメッセージを合わせて書いておくと良いです。
<video src="sample.mp4" width="640" height="360" poster="sample.jpg"></video> <p>ご利用のブラウザはvideo タグによる動画の再生に対応していません。</p> </video>
.htaccess を追加
ご利用のサーバーの.htaccess に、以下のような「MIME タイプを追加する記述」を書いてあげると動くようになる場合があります。AddType video/ogg .ogg .ogv AddType audio/ogg .ogg AddType application/ogg .ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
video タグのsrc 属性を外してみる
Mac のFirefox だと、video タグのsrc 属性にogv 形式の動画ファイルを指定しないと再生されなかったり、逆にこれだと今度はWindows のIE 11で動画が再生されなくなったり…と、挙動がいまいち安定しない場合は、video タグのsrc 属性を外してみる手も有りかと思います。
video タグによる動画の埋め込み用サンプルコード
ここまでの流れをまとめると、↓このような感じでコードを書けば、video
タグによる動画の埋め込みが実現できるかと思います。<video src="sample.mp4" width="640" height="360" poster="sample.jpg" controls preload> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <source src="sample.webm" type="video/webm"> <p>ご利用のブラウザはvideo タグによる動画の再生に対応していません。</p> </video>
その他、別記事で Windows のIE8 にvideo タグを対応させる方法や、jQuery Colorbox のインラインで動画を再生する方法も合わせて紹介させていただいておりますので、サイトやブログに合わせてカスタマイズしてみてください。
スポンサード
コメント