たまちゃんHTMLのおうち たまちゃんHTMLのおうち

ホームページ作成講座   STEP7 動画


メニュー

<video>タグを使って動画を入れる

■STEP7  動画

HTML5で対応の<video>タグを用いた動画の埋め込みについてです。

このページのみHTML5で書いているのですが、IEのブラウザでレイアウト崩れが発生していました。
DevAchieveを参照して修正しました。

★<video>タグを用いた動画の埋め込み

<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内に追加記入してください。

ソースコード(HTML)

<head>
<script type= "text/javascript" src= "http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>


サーバー側の設定により、画像が再生されない場合があります。
.htaccessファイルに以下のコードを追加すると解決する場合があります。

ソースコード(.htaccess)

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm


.htaccessファイルは、このファイル名のまま作成してアップデートすることができないので、 とりあえず「htaccess.txt」などのファイル名で作成して、これをアップデートしてから「.htaccess」に名前を変更してください。 HTMLクイックリファレンスを参照しました。

このページのトップ

★<video>タグを用いた動画が再生できない場合

自分もはまった問題と解決方法、およびデバッグ方法がこちらにあります。参照してください。

参照
■<video>タグでmp4の動画が再生されない(解決法)

▼STEP8へ

このページのトップ