HTML5で対応の<video>タグを用いた動画の埋め込みについてです。
このページのみHTML5で書いているのですが、IEのブラウザでレイアウト崩れが発生していました。
⇒DevAchieveを参照して修正しました。
<video>タグを用いた動画は、ユーザーが動画のプラグインをインストールすることなく再生が可能で、HTMLも簡潔に
記入することができます。また、いろいろな属性が用意されていて再生方法もアレンジできます。
<video>タグの記述の基本は、これです。
ソースコード(HTML)
<video
src="sample.mp4"></video>
結果的には、これです。
ソースコード(HTML)
<video controls="true"
poster="img/hiyodori20120701.jpg"
width="320">
<source src="video/hiyodori20120701.mp4">
<source src="video/hiyodori20120701.ogv">
<source src="video/hiyodori20120701.webm">
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>
基本形から変わっているコードを説明します。
1. <source>タグ
<source>タグを使用することにより再生可能なソースの候補を複数並べることができます。
異なるフォーマットの再生ソースを用意することで多くの環境に対応できます。
ここでは、mp4、ogv、webmの三種類の動画ファイルを用意しています。
注
現在、PC用の各ブラウザは、mp4に対応しております。mp4だけを用意すれば主要ブラウザで動画の再生が可能です。
参照:ときどきWeb
形式 | 対応ブラウザ |
---|---|
mp4 | IE Google Chrome Safari Firefox Opera |
ogv | Google Chrome Firefox Opera |
webm | Google Chrome Firefox Opera |
2. controls属性
再生・一時停止・再生位置の移動・ボリュームなどのコントロールをもつインターフェースを表示させます。
3. poster属性
ユーザ環境などが原因で動画が再生できない場合に、代替となる画像を表示させます。
4. メッセージ
ユーザ環境などが原因で動画が再生できない場合に、文言を表示させます。
ここの例では、「動画を再生するには、videoタグをサポートしたブラウザが必要です。」を表示させます。
<video>タグはHTML5のタグなので、古いブラウザでは対応できません。
しかし、以下のスクリプトを読み込むだけで主要ブラウザで再生することが可能となります。IE6〜8でも大丈夫です。
たった1行のスクリプト読み込みコードを追加するだけです。head内に追加記入してください。
<head>
<script type= "text/javascript"
src= "http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
サーバー側の設定により、画像が再生されない場合があります。
.htaccessファイルに以下のコードを追加すると解決する場合があります。
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
自分もはまった問題と解決方法、およびデバッグ方法がこちらにあります。参照してください。
参照