カテゴリー

キーワード

 
> HTML5のvideo要素を紹介 IE8...

HTML5のvideo要素を紹介 IE8にも対応させました【HTML5実践編】


2015 年 2 月 26 日 投稿    view: 37723
タグ:
このエントリーをはてなブックマークに追加

video要素(IE8対応)

こんにちは、WEBマーケティング部の杉尾です。


今回と次回でvideoタグについてお話しさせていただきます。 よろしくお願いします。


videoタグとは

videoタグHTML5から新しく追加された、動画メディアを再生するためのタグ要素です。
これにより、閲覧者の環境にプラグインがインストールされているかどうかを気にすることなく、Webサイトに動画を設置できるようになります。


IE8への対応を含めたコードを載せていますので、下記をご覧ください。

説明不要でコードだけ欲しい方はこちらへ。 ファイル形式は MPEG-4です。


videoタグ実装前段階

まず、Web制作者ご用達のcaniuse.comを見に行きます。(下図)


主要ブラウザ(IE,Firefox,Chrome,Safari,Opera)の最新バージョンは既にvideoタグをサポートしています。 それに、iOS safariとAndroid Browser、Chrome for Androidも同様にサポート済みです。


主要ブラウザのvideoタグ対応表


で、次に画像形式です。


【WebM】 主要ブラウザのWebM形式動画ファイルの対応表
【Ogg】

主要ブラウザのOgg形式動画ファイルの対応表
【MPEG-4】
主要ブラウザのMPEG-4形式動画ファイルの対応表


ここまで見ていただくとおわかりになります通り、主要ブラウザはほぼMPEG-4を再生できます。


以前はMPEG-4とWebMを両方並べて、複数ブラウザに対応させていましたが、今はその必要はなさそうです。
というわけで、MPEG-4だけ書いておけばいいという結論になります。


(もしかしたら更新していないブラウザで見られてるかも、と心配な方はWebMの方も書いておくといいと思います)


IE8対応

あとは、IE8対策だけですね。

僕は個人的に余計なJavascriptライブラリを読み込むのが嫌なのですが(画面が重くなりそうなので)、今回ばかりは仕方ありません。


html5media.jsを読み込むことにします。 ダウンロードしてサーバーにアップするやり方もありだと思いますが、


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

をheadタグ内に埋め込むことでも、IE8に対応してくれます。 (IE6やIE7にも対応します)



【3月5日 追記】

embed要素を使えばライブラリなしでコードが書けます。下記に追記しました。

 

ソースコードはこちら

できあがったコードがこちらです。


<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
    <script src="//api.html5media.info/1.1.8/html5media.min.js"></script>
<![endif]-->
</head>
<body>
    <article>
        <video src="sample.mp4" type="video/mp4" controls width="240" height="180">
            <p>video要素がサポートされていないブラウザでご覧になっています。</p>
        </video>
    </article>
</body>
</html>

【WebM追記バージョンはコチラ】

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
    <script src="//api.html5media.info/1.1.8/html5media.min.js"></script>
<![endif]-->
</head>
<body>
    <article>
        <video controls width="240" height="180">
            <source src="sample.mp4" type="video/mp4">
            <source src="sample.webm" type="video/webm">
            <p>video要素がサポートされていないブラウザでご覧になっています。</p>
        </video>
    </article>
</body>
</html>

2/27 コードを追記、修正しました。

デモはこちら 


複数の動画ファイルを並べる場合は、source要素を指定し、src内にそれぞれのファイル名を書いてください。 その場合、記述された順番に読み込まれ、再生できないときは次の形式のファイルへ移ります。 videoタグ内のcontrols属性は動画を再生させるコントローラーを表示させるのに必要です。(下図、赤枠で囲んだ部分)


動画埋め込みのキャプチャ画像


万が一、サポートされていないブラウザで見ている場合は、pタグに囲まれた文字が出てきます。 Windows版safariだとブラウザの状態が最新バージョンでない可能性があります。


【3月5日 追記】

ライブラリを読み込まずとも、embed要素を使えば古いブラウザにも対応できました。


<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
    <article>
        <video controls width="240" height="180">
            <source src="sample.mp4" type="video/mp4">
            <source src="sample.webm" type="video/webm">
            <embed src="sample.mp4" width="240" height="180" type="video/mp4" autoplay="false" controller="true" pluginspage="http://www.apple.com/jp/quicktime/download/">
        </video>
    </article>
</body>
</html>

一つだけ注意点

サーバーによっては動画ファイルを認識できずに、再生されないというケースがあるようです。
そんなときは、.htaccessファイルに次の記述を付け加えてください。


AddType video/mp4 .mp4
AddType audio/webm .webm


一応、WebM形式ファイルのものも書いています。


今回埋め込んだ動画ですが、こちらのものを使わせていただきました。

フリー素材館 http://www.namaewallpaper.com/movie/index.html


で、WMV形式のファイルをMPEG-4に変換するのに、XMedia Recodeというフリーソフトを使いました。

XMedia Recodeはこちらからダウンロードできます。 http://www.forest.impress.co.jp/library/software/xmediarecode/


まとめ

videoタグが使えれば、容易に動画を埋め込むことができますね。


ちなみに僕は以前、html5shiv.jsを使って、videoタグをIE8に認識させようとしました。 当然できるわけもなく、IE8ではvideoタグを使えないのかと落胆したことがあります。


そのときは、html5shiv.jsの意味を知りませんでした。(笑)


※html5shiv.jsとHTML5の話はこちら⇒ 2015年 コーディングはHTML5で。IE8以下の対策も忘れずに


次回はvideo要素の属性について、それからYouTube動画をWebページに埋め込む方法をお話しさせていただきます。


【3/2 追記】video要素の属性紹介記事を書きました。
video要素の属性を紹介します。【HTML5 実践編】


【3/5 追記】YouTube動画の埋め込み記事を書きました。
YouTube動画を埋め込む方法とカスタムオプションを13コ紹介します


最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事