webページに動画を挿入
これまで、webページ上で動画を再生するには、flashプレイヤーなどを埋め込む必要がありました。しかし、HTML5では動画再生をサポートしているので、動画の挿入が非常に簡単になりました。
このページでは、HTML5で新たに追加された要素「video」を使った動画の埋め込みを紹介します。
新要素「video」で動画を挿入
最も基本的な形式で書くと以下のようになります。
index.html
<video src="sample.mp4" controls></video>
| <video src="○○"> | 動画ファイルを挿入する ○○には動画ファイルのアドレスを入力 controlsは、再生ボタンやシークバーをつけるためのもの |
|---|
以下のように、タグの間に入力した内容は、HTML5非対応で動画を挿入できなかった場合に表示されます。
index.html
<video src="sample.mp4" controls> <p>お使いのブラウザはHTML5非対応なため、動画を表示できません。</p> </video>
ブラウザによって再生できない動画の形式がある
HTML5にさえ対応しているブラウザであれば、動画の挿入は可能ですが、実際に再生しようと思ってもできない場合があります。
できるだけ多くのブラウザで再生するには、複数の形式の動画ファイルを用意して、以下のように候補を設定しましょう。
index.html
<video controls> <source src="sample.mp4" type="video/mp4"> <source src="sample.webm" type="video/webm"> <p>お使いのブラウザはHTML5非対応なため、動画を表示できません。</p> </video>