HTML 5を利用した映像・音声の再生デモ

さて、珍しく技術系のネタです。

29日のTwitterで騒いでましたが、HTML 5が個人的に ヤ バ い です。
今までも存在は知っていたんですが、「Google I/O 2009」という技術者向けカンファレンスでのデモを見たら………久々に、あの憎たらしいHTMLタグと格闘したくなりましたw

HTMLというのは、私以下の世代なら学校の授業で触れたことがあると思いますが、簡単に言えばウェブページを表示するためのコンピューター言語です。まぁ知らない人はどこぞの宇宙語だと思ってください。
そのHTMLの仕様が来年9月、約11年ぶりに大きく変わります。それが、HTML 5と呼ばれるモノです。詳しくはWikipediaの該当項目現行のHTML 4との比較をご参照ください。

まぁ、そのスゴさをわかりやすく見るなら、コレを見るといいかも。


YouTube – Google I/O 2009 Keynote, pt. 1

コレ、全部ウェブブラウザで動いてるんですよ。特別なソフトじゃありません。あなたがこのブログを読んでいる、そのアプリケーションです
特別なプラグイン……どころか、いまや一般化したFlashさえもいりません。だから映画の公式サイトなどでよく見る「Loading…」も、これで見掛けなくなるかもしれません。

わかりましたか?
これが、HTML 5と愉快な仲間たちによる、ウェブでの新時代の表現です。

………とはいえ、主にいわゆる“大人の事情”というヤツで、そこまで急激にウェブが進化するというワケでもありませんが、技術的にはもう十分、ウェブで更にリッチな表現ができるようになっています。

映像・音声の再生が変わる!

そんな新しい表現を支える、数あるアップデートの中でも私が注目しているのは、<video>タグと<audio>タグ——つまり映像と音声に関する新要素です。

今までウェブページ上で動画や音声を再生するには、Windows Media PlayerなりQuickTime PlayerなりFlash Playerなり、とにかくなにかしら再生用のプラグインが必要でした。
もちろん、今時の最新ブラウザにはそんなもの標準で搭載されていますから、特にストレスなく動画や音声を試聴することができていると思います。

ですが、それって実はパソコン自体やネットワーク回線に、結構多大な負荷をかけているんです。
例えばニコニコ動画を使っていると、プレイヤーを読み込むのにも時間がかかり、動画を読み込むのにも時間がかかり(たまにエラーで弾かれ)、再生してもカクカクで、しかもすぐに止まる………なんて経験ありますよね?
もちろん、HTML 5でソースを書いたところで、動画自体は重いので、やっぱり読み込むのに少々時間はかかります。でも少なくとも、プレイヤーの読み込み時間は圧倒的に速くなりますし、1度再生した動画はキャッシュとして残っているようで、再度訪れた時は読み込み時間ほぼナシで再生可能です(実体験)。

また、ウェブページに動画を埋め込む時でも、あのリアル宇宙語みたいな謎なモノをいちいちコピペする必要はありません。まぁ今時あんなモノ貼付けなくても、ブログサービス側で用意してくれたりしますけどね。

※ 再生上の注意 ※

というワケで早速デモに移りたいワケですが、ここで1つ問題があります。……ここまで煽っといて申し訳ないんですが、

多分あなたが「今」お使いのブラウザでは、再生できません。

何故かと言うと、あなたがお使いのブラウザは、恐らく<video>タグと<audio>タグに対応していないからです。この2つはまだまだ規格を策定中というところで、実用段階ではありません。

「じゃぁ再生できないんじゃないか」って? …ならそもそもエントリー書きませんよ。
この2つのブラウザなら動作確認しているので、ちょっとダウンロードして使ってみてください。

ごらんの通り、まだ2つともFirefoxはBETA版、つまり開発中の暫定版です。でもほとんど問題なく使えますんで、ご安心ください。
「なんだこのソフトは。知らねーよこんなの。大丈夫なのかよ」とお思いの方は、多分Windows標準のInternet Explorerをご利用なのかと思いますが、アレ、ぶっちゃけクソなので早めに乗り換えた方がいいですよ? HTML 5への対応にも消極的ですし。

で、特にSafari 4 BETAはオススメです。現在もっとも多く普及している音声規格MP3や、それを改良した(と言っておけばいいハズ)MP4の再生に対応しています。つまり、現行のPodcast/Videocastのデータを、より簡単に気軽に再生できるようにしてくれます。
利用者が比較的多いFirefoxは、残念ながらMP3やMP4の再生に対応しておりません。OGGという、よりライセンスフリーな規格を採用しています。これはこれでいいんですが、Apple先生が猛反対している上に、あまりにシェアが低いんですよねー………。

ちなみに、他にOperaやGoogle Chromeといったブラウザが存在するんですが、Operaは動作確認していませんし、Google Chromeはホントに開発者向けにしか公開していませんのでオススメしません。

さてさて、HTML 5対応ブラウザの準備はできましたか?
じゃぁ、いっちょ再生してみましょうか。下の「Continued…」をクリック!

映像を見てみよう!

じゃ、早速見てみましょうか。
一応YouTubeの映像と比較して頂けると嬉しいです。………まぁ両方ともエンコードがヒドい、というツッコミは受け付けませんが。

YouTube(Flash Player)を利用した場合


これは問題なく再生できるはず。

<video>タグを利用した場合

申し訳ありませんが、Firefoxでは上記の理由で再生ができません。Safari 4 BETAをご利用ください。

お使いのブラウザでは再生できません。Safari 4をお使いください。


ご覧の通り、後者の方が若干画質がいいですよね。特に動きのある部分では。………まぁ実際、明らかにエンコードが悪いので「比較になってない」と言われればその通りなんですけど。

音声を聴いてみよう!

音声に違いはありません。ですが、プレイヤーが表示されるまでの時間を比べると…?

Flash Playerを利用した場合

[audio://storage.googleapis.com/2010.kairi.me/wp-content/uploads/me5-1.mp3]

<audio>タグを利用した場合

Safari向け

お使いのブラウザでは再生できません。Safari 4をお使いください。


Firefox向け

お使いのブラウザでは再生できません。Firefox 3.5を推奨します。


一応、Firefoxでも再生できるように2種類用意しましたが、どうでしょう? どっちのプレイヤーの方が、表示されるまでの時間が短かったですか?
当方のMac OSX 10.5.7のSafari 4 BETAでは圧倒的に後者の方が表示が速かったです。

最後に

もう1度言いますが、HTML 5の正式な勧告は来年9月です。もうちょっと先の話です。
ですが、来年の9月以降は、ウェブで、今まではできなかったような表現が一気に広がって行く可能性があります。そうなった時、

あなたは、ウェブで何を表現しますか? 何を発信しますか?

その手助けとなるモノを、私は存分に使い倒していくつもりです。

ちなみに、GoogleもYouTubeのHTML 5版デモページを公開しています。このブラウザで、ぜひ試してみてくださいね。

投稿者:

Kairi

Love video, music, drinking, and web.

“HTML 5を利用した映像・音声の再生デモ” への3件のフィードバック

コメントは受け付けていません。