video要素のスライダーをinput要素のtypeをrangeで表現

HTML5-WEST.jp読書会で勉強したvideo要素で、再生時間の進捗を示すスライダーを作れないか、ということで、input要素がいけるんじゃない?

という話でした。
フォーム関係のHTML5実装ってOperaしかほとんど実装してないんでない?って思ってたけど、Chrome, Safariでも表示された、おお〜。
スクリーンショット(2010-10-17 18.16.11).png
input要素のtypeをrangeに、min属性に0を指定しといて、デフォルトの場合だとツマミが真ん中なので、valueに0を入れておきます。
<input min=”0″ id=”range” type=”range” value=”0″>
これをJavaScriptでロード完了した時にmaxをvideoの長さ(duration)を入れておけばmaxが設定完了。
ここで気をつけないといけないのは、DOMが読み込み終わった段階だけではvideoの長さは取れないので、本来はvideoのロード完了を待ってから
range.max = video.duration;
しないとダメですね。ネットにあげてから気づいたけど、気づけよ、、、って感じですね。
JavaScriptには、videoをaddEventListener(“timeupdate”,・・・で監視しておけば、再生中に断続的にイベントが発生するのでこれをキャッチしつつ、input要素のvalueの値を入れ直すことで動いているように見えます。
このファイルは、videoのロード完了イベントが設定されてないので、秒数のところがNaNになる、当然ですが、このままあげておきます。
これを基に
  • DOMロード完了時にaddEventListenerでcanplayを待つ。(どうやらloadイベントはOperaが実装してないって言われてしまった。)
  • canplayイベント発生時にaddEventListenerでtimeupdateを設定する。
と直して、次回の読書会にて報告することにしよう。
今回の勉強で僕として分かった事。
ブラウザがvideo, audioのどのコーデックを実装しているかどうか。
調べる方法。
  • コーデックを調べてくれるソフトがある。http://page.freett.com/HarryTools/help/index.html(古いけどこんなもの)
  • ブラウザのソースをダウンロードして調べる。http://webkit.org/building/checkout.html(例えばwebkitの場合)

  • video.canPlayTypeで実行時にしらべるって方法。(@さん指摘。追加しました)
    (戻り値がmaybeやprobablyといった文字列、しかしmaybeなのに「サポートされているフォーマットである」という、何か不思議。)
そして、webkitがwebMを実装していた(訂正:Firefox 4 beta、Opera 10.6、Chrome 6以降でwebMを採用)って言われたんですが、ここはちゃんと調べないといけないな。
@さん、@さん情報ありがとうございます!

※ちなみにMiro Video Converter [http://www.mirovideoconverter.com/]を使って、動画をTheoraに変換すると、ogg拡張子のファイルが生成された。
これをhtmlで使ってみた。
<video src=”video/movietest.ogg” width=”640″ height=”360″ poster=”video/movietest.jpg”>
これ、Mac版のSafari5, Chrome8, Firefox4Beta全部で生成された。
びっくり。
Windows版のメジャーブラウザとIE9はどうなるだろう?
IE9BetaはH.264をサポートしているらしく、WebMのVP8コーデックは、コーデックそのものをインストールしないと見れないらしい。