HTML5で動画再生、私がやったこと4つ

HTML5では「video」というタグを使って動画を再生することができるんですが、本日ふと思い立ちまして、HTML5でFlashっぽく動画が再生できるか実験してみました。

結果それっぽく再生できたので、私がやったこと4つをまとめたいと思います。

The Essential Guide to HTML5

1. 動画を作成しFLV形式で保存

まず最初に、HTML5のvideoタグで再生させるための動画を作成します。

今回はFlash動画っぽくなるかな?と思い、以前撮った「こんにゃくラーメン」のjpg画像を繋ぎあわせて動画を作成し、それをflv形式で保存しました。(私はflv形式を選択しましたが、他の形式でもOKです。後で別形式にコンバートするので。)

2. flv動画を3つの形式にコンバート

できた動画を、HTML5で再生できる形式に変換します。

html5のvideoタグで再生できる動画は、ブラウザによって形式が異なってます。なので、どのブラウザ(当然のことながらIEは除く)でも再生できるよう、先のflvファイルを「ogv」「mp4」「webm」の3形式にコンバート。

コンバートにあたってはMiro Video Converterというフリーソフトを利用。これ、ソフトを立ちあげて動画ファイルをドラッグアンドドロップし、変換する形式を選ぶだけで簡単にコンバートできちゃいます。シンプルイズベスト。

3. HTML5でコーディング

続いて、上記の動画を再生するためにHTML5でコーディング。videoタグ周りのソースはこんな感じです。

<video autoplay width="500">
<source src="movie.ogv" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<div><img alt="" src="photo.jpg" width="500" height="282" /></div>
</video>

videoタグ内に3つの動画形式をリンクしたsourceタグを記載、再生できないIEは写真を表示させるようにしてみました。

4. サーバーにアップ・確認

2でコンバートした3つの動画ファイルと、3で作ったHTML5ファイルをサーバーにアップして、動作を確認します。私が作ったサンプルがこれ。(Chromeでしか確認してませんが、多分Firefoxでも動くと思います Firefoxは動きません。なんか特別な設定が必要なんでしょうか…。)

どんな感じでしょうか?
作った動画がショボいのでなんとも言えないところはあろうかと思いますが、基となる動画がちゃんと作れれば、HTML5で簡単に再生することができます。

今回はFlashっぽい感じでテストしたので再生ボタンやループ処理はしてませんが、アトリビュートを追加すれば再生ボタンの表示もループ処理もできるようです。

もっと面倒なのかな?と思っていたんですが、動画ファイルのコンバートさえできればあとはラクラク。簡単に動画再生することができるHTML5って、ステキですね(´∀`) (あとはIEさえ対応してくれればねぇ…この腐れブラウザめっ。)