YoutubeをHTML5で埋め込むタグを生成するbookmarklet

以下は、Youtubeの動画をHTML5のvideo要素を使って埋め込むためのコードを生成するbookmarkletである。これは、http://www.youtube.com/watch?v=で始まるURL上で使うことを想定している。マイチャンネル上で使うことは想定していない。

javascript:(function(){ var url = document.URL ; var id = url.slice( url.search("v=") + 2 ) ; id = id.slice(0, id.search(/(&)|($)/) ) ; var str = '<div><iframe class="youtube-player" type="text/html" width="640" height="505" src="http://www.youtube.com/embed/' + id + '" frameborder="0"></iframe><br /><a href="http://www.youtube.com/watch?v=' + id + '">' + document.title + '</a></div>' ; prompt("", str ) ; })() ;

これは、まだ実験段階のYoutubeの埋め込みコードを使っている。詳しくは、YouTube API Blog: A New Way To Embed YouTube Videosを参照。また、YouTubeにHTML5のvideo要素を使わせるためには、この設定ページで、HTML5を有効にしなければならない。

Webの正しい進化のためには、Flashを撲滅すべきである。当然だ。しかし、私はいまだにFlash Playerを有効にしている。これはよろしくない。たしかに、Flashというコンテンツをみるためには、Flash Playerが必要だ。しかし、真に見る価値のあるFlashというのは、実はそれほど多くない。ゆえに、通常はFlash Playerは無効にすべきであるという結論に至った。

さて、現在のWebで、どうしてもFlashが必要なコンテンツとはなにか。動画である。数ある動画サイトでも、最も有名なサービスはYouTubeである。YouTubeには、話題の動画が数多く上げられている。単なる娯楽であれば、見ないという選択もできるが、そうはいかない。最新の技術や製品の説明が、動画を使って行われていることも、しばしばある。

そもそも、最新の研究結果によれば、インターネットはぬこによって構成されているのである。

YouTube - The Internet Is Made Of Cats

しかし、既存の埋め込みのYoutube動画は、いずれもflashを直接参照している。これでは動画を見ることができない。HTML5で埋め込む方法は、実験段階とはいえ、公式に公開されている。そこで、このBookmarkletをつくることにした。

YouTubeを埋め込む者は、せめて、YouTubeの該当URLへの、直接のリンクを貼るべきである。Flash Playerを使っていない人間は、たとえ動画がWebMでエンコードされていて、ブラウザがHTML5のvideo要素でWebM再生をサポートしていたとしても、YouTubeを再生できなくなってしまう。また、リンクがないので、ソースを読まない限り、該当ページに飛ぶこともできない。また、その際、マイチャンネルにリンクをはってはいけない。なぜならば、マイチャンネル上では、Flashが強制されてしまうからだ。

追記：2011/01/26、バグ修正。