概要 2014年末ではほとんどのウェブブラウザーがMP4形式の動画に対応しています。videoタグもシンプルになります。非対応のIE8はライブラリーの活用を。

●videoタグは複数ソースが設定できて便利

HTML5のvideoタグでは以下のように書くことで複数のファイルソースを指定することができます。

<video>
    <source src="example.mp4">
     <source src="example.webm">
    <img src="example.gif">
 </video>


上記の例だと、

  • 最初に「example.mp4」の再生をトライ
  • 「example.mp4」を再生できない場合、「example.webm」の再生のトライ
  • 「example.webm」を再生できない場合、「example.gif」を表示

となります。

簡単な書き方で、再生できない場合の複数のソースの指定(フォールバック)ができて便利ですね。


でも、複数のソースの指定そのものが面倒ではないですか?

ファイルも複数用意しなければなりませんし…。今回の例の場合、MP4形式の動画・WebM形式の動画・アニメーションGIFの3種類と、常に時間がないWeb制作者には大きな負担です。

●動画ファイル形式毎の対応ブラウザーを調べてみる

そこでMP4形式・WebM形式の動画がプラグインなしでどのブラウザーに対応しているのかを調べてみます。


まずはMP4形式。「Can I use」のサイトで見てみると以下の通り。

緑色は対応OK。黄緑色(黄色)は部分サポート、赤は未対応です。

見てみると、ほとんど緑色ですね。

20141216-ウェブブラウザーで動画再生-01

画像出典:Can I use... Support tables for HTML5, CSS3, etc


続いてWebM形式。結構赤色が多いですね。それもWebMってGoogle主導のハズなのになぜかAndroid標準ブラウザーは部分サポートです(意味不明)。

20141216-ウェブブラウザーで動画再生-02

画像出典:Can I use... Support tables for HTML5, CSS3, etc


主要なブラウザー分をまとめると以下のようになります。

  • MP4:Firefox 34より前のバージョンは部分サポートで、他の全てのブラウザーは対応
  • WebM:Internet Explorer・Safariなど標準ブラウザーは非対応

  • 表を見るとFirefox 34からMP4対応なのですね……ん? 今のバージョン、34だよね?

    20141216-ウェブブラウザーで動画再生-03

    試しに、MP4形式しかないソースがないvideoタグをFirefoxで開いたら、普通に動画再生できました!

    だったらMP4形式の動画ファイルだけ用意すればいいじゃないか!(歓喜)



    ●とはいっても…IE8などあるわけで…

    つまりシェアの大きさで言ったら、MP4形式の動画は再生できる割合が高いので、Internet Explorer 8あたりがなんとかなれば良さそうです。


    そんな時は「html5media」というJavaScriptのライブラリーを使いましょう。

    この「html5media」はロードするだけでvideoタグ非対応のブラウザーでもFlashプレイヤーに置き換えて対応してくれるというとても便利なライブラリーなのです。Flashプレイヤーは以前からMP4形式の動画にも対応していますし、ほとんど全てのブラウザーにFlashのプラグインはインストールされているので問題ないでしょう。


    使い方は簡単。

    headタグ内に

    <!--[if lt IE 9]>
         <script src="//api.html5media.info/1.1.8/html5media.min.js"></script>
     <![endif]-->

    と書くだけです。(他のブラウザーも対応させる場合は<!--[if lt IE 9]>と<![endif]-->を削除して下さい)


    これでほぼ対応は完璧ですね。



    ●まとめ

    • MP4形式の動画は、2014年末現在ほとんどのブラウザーが対応している
    • 対応していないブラウザー(IE8)には「html5media」をロード


    安心してvideoタグにMP4形式の動画だけを指定して下さい。

    それでは、よい動画ライフを。


    ●関連情報


    ●こんな記事も読まれています



    ブログ著者

    笹川純一・jdash2000

    名前:(Google+のプロフィール)

    ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

    お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

    ブログ著者について


    コメントをどうぞ


    サイト内検索