Videoタグでのhtml5時代の動画配信とIE対応

2013年03月19日

html5を使用してWebページを制作することは特に難しいことではなくなってきていますよね。IEでもちゃんと表示されるし。

なので僕は案件でも自分のサイトでも基本的にhtml5で記述しています。

ただ、VideoとかAudioとかのマルチメディアタグは一時期「コーデックで色々問題が」とか「IEで…」とかの話が前面に出てた気がしてて僕はほとんど使ったことがありませんでした。

そんな中、Videoを使う必要があって調べてみたら意外といけることが分かったのでメモしておきますね。

Videoタグを記述

基本的な記述はこれだけです

<video src="movie.mp4"></video>

何となくご理解頂けるかと思いますが、 src 属性に動画ファイルを記述します。

サーバの設定が必要なケース

もし動画が見れない場合は、サーバの設定が出来てないケースがあるかも知れませんので、見れない場合は以下を .htaccess に追加しましょう。

.htaccess
AddType video/ogg .ogg .ogv
AddType video/mp4 .mp4
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv

観れないブラウザ向けの対応

video タグがサポートされていないブラウザ用に、video タグ内にメッセージを表示さる事が出来ます。

<video src="movie.mp4">
  <p>Webを「見る」ブラウザじゃなくwebを「楽しむ」ブラウザにしませんか?</p>
</video>

IEの対応

IE8くらいまでは video タグが正常に動作しないので、その場合は基本的には上記対応なんですが、どうしてもIEで見たい場合は以下のJSを記述して、FlashPlayerで対応してもらう事が可能です。

<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>

詳しくはこちらに。

[JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media | コリス

動画ファイルを複数使う場合

ブラウザの対応状況によっては動画ファイルのコーデックに制限がありますので、1ファイルだけで全ブラウザに対応することが出来ません。

参考:HTML5 & CSS3 Support, Web Design Tools & Support – FindMeByIP – CSS3 & HTML5 Browser Support

なので、ファイルを複数個用意し、適切なファイルをブラウザが読み込めるように、video タグの中に source タグを記述します。

<video>
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<video>

動画制御のインターフェイスを表示

動画なので、再生・停止・巻き戻し・ボリューム操作とかはユーザーが制御できるようにしたいですよね。そんな時は control 属性を記述します。

<video controls>
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<video>

自動で再生する

自動で再生させたい場合ってレアケースだと思うんですけどどうですかね。あぁ、でもサイトのBGM的に流したい場合もあるんですかね。まぁ用途は色々で、仕様としては作っておくのがスタンダードですよね。

そういう場合は autoplay 属性を記述して、ページの読み込みと同時に動画を再生させることができます。

<video control autoplay>
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<video>

動画をプリロードさせない

video タグで指定された場合、ページの読み込みと同時に動画ファイルの読み込みも開始します。サーバの負荷等を考え、再生ボタンが押されるまで動画の読み込みをしたくない場合は preload 属性を none に指定すればプリロードをしなくなります。

また、preload=”metadata” を指定すれば再生時間・動画サイズ等のメタデータのみ読み込みを行います。

<video control auto play preload="none">
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<video>

サイズの指定

IEで表示される代替動画用にサイズの指定をしておくとなお良いかもですね。CSSで指定していれば不要ですが、念のため。

<video control auto play preload="none" width="640" height="320">
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<video>

おわりに

動画を効果的に使えば文章では中々伝えにくいことが簡単に伝えることも出来るし、雰囲気を伝えたい場合も効果的ですよね。一昔前だと商品の説明動画が多かったですかね。

今はアプリの解説に動画が使われているケースが多く、アプリの操作というより、「このアプリをこう使うとこういう風に生活が変わる」といった感じのユーザー体験を動画で紹介しているコンテンツが増えたんじゃないかなぁという感じですね。

Webの制作スキルの一環として動画のクオリティも重要になってきていると感じる昨今、Webディレクターが動画制作に関わる事も多いんじゃないかと思います。

そんな自体にも対応できるよう、動画制作のスキルも身につけていきたいなぁと思う今日この頃です。

他にこんな事も書いてます

FBでコメント

コメント1つ

  1. はじめてVideoタグを使ったのでメモです Videoタグでのhtml5時代の動画配信とIE対応:STACKSTOCK http://t.co/HtGeRAipFm

トラックバック/ピンバックはありません。