古籏一浩のJavaScriptラボ ― 第29回

HTML5 videoで作る“動くストリートビュー”

2010年03月24日 11時00分更新

文● 古籏一浩

HTML5で動画を再生する

　作成した動画をブラウザーに表示してみましょう。HTML5で動画を表示するには<video>タグを使ってvideo要素を記述します。video要素のsrc属性に表示したい動画のURLを指定します。img要素と同様に、動画の横幅をwidth、縦幅をheightで指定できます。


<video src="movie.ogv" width="1280" height="180"></video>


Firefox（左）とGoogle Chrome（中央）では動画が表示されるがSafari（右）では表示されません

　ただし、このままだとFirefoxとGoogle Chromeでは動画が表示されますが、Safariでは何も表示されません。先に説明したとおり、現時点ではFirefox／ChromeとSafariとで対応する動画形式が違うためです。そこでHTML5では、以下のようにvideo要素内にsource要素を複数書くことで複数の動画形式に対応する仕組みが用意されています。


<video>
    <source src="movie.mov" width="1280" height="180">
    <source src="movie.ogv" width="1280" height="180">
</video>

　この場合、HTML5に対応しているブラウザーでは、上から順番にsource要素で指定されている動画形式を調べていき、再生可能な動画が見つかった時点で動画を表示します（後に書かれたsource要素は無視し、処理をしません）。HTML5に対応していないブラウザーでは、<video>タグも<source>タグも解釈されないため動画は表示されません。

　HTML5非対応ブラウザーで何も表示しないのは不親切だという場合は、以下のように画像や文字を代替手段として記述できます。ちなみに文字や画像ではなく、Flashムービーも指定できます。


<video>
    <source src="movie.mov" width="1280" height="180">
    <source src="movie.ogv" width="1280" height="180">
    <p>
        <img src="title.jpg"><br>
        HTML 5 Videoに対応したブラウザでご覧下さい
    </p>
</video>


HTML 5 Videoに対応していないIEやOpera 10.10では動画の代わりに画像と文字が表示される

　ここまでをまとめたのがサンプル01です。なお、サンプル01は自動的に再生されません。ページの読み込みが終わった時点で自動的に動画の再生を開始したい場合は、<video autoplay>のようにautoplayを指定して記述してください。

●サンプル01[HTML]


<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Movie</title>
    </head>
    <body>
    <h1>360 Movie</h1>
    <video>
        <source src="movie.mov" width="1280" height="180">
        <source src="movie.ogv" width="1280" height="180">
        <p>
            <img src="title.jpg"><br>
            HTML 5 Videoに対応したブラウザでご覧下さい
        </p>
    </video>
</body>
</html>