• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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

まず最初に、video タグをサポートしている動画フォーマットは以下の通りです。
ブラウザH.264WebMOgg
Internet Explorer 9
Firefox 4
Chrome 10
Safari 5
Opera 11


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

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

Mac での変換方法は、こちらの mp4 動画をogg 形式に変換できる「Miro Video Converter」の使い方 の記事も参考にしてみてください。
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
typeMIME タイプ
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 のインラインで動画を再生する方法も合わせて紹介させていただいておりますので、サイトやブログに合わせてカスタマイズしてみてください。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

  1. […] 1:MP4ファイルをアップロードする ビューレットビルダーでパブリッシュする場合は、MP4を選択し、Outputフォルダーごとサーバーに入れ、リンクをhtmlで指定します。サンプルはこちら outputフォルダを見るとmp4ファイルができています。音声付の1分ほどの動画ですが、15MBあります。 大量の動画配信を自社のサーバーで行うには容量も確保する必要がありますね。 ブログやホームページに埋め込むには Wordpresの場合は以下のタグを使います。 <video src=”sample.mp4″ width=”640″ height=”360″ poster=”sample.jpg” controls preload> 以下の通り出力されます。 動画をブログ貼り付け、HTML貼り付けするにはブラウザーによってコードが変わります。 こちらのサイトを参考にしてみてください video タグでmp4 動画をサイトに埋め込む方法 […]

コメントを残す