YouTube動画をHTML5で再生する方法（スロー・倍速が可能）
すでにご存知の方も多いと思いますが、YouTube動画をHTML5で再生する方法を紹介します。HTML5版はFlashと同等の再生が行えるだけでなく、スロー・倍速再生ができるようになります。
１．HTML5で再生できるようにする
細かい説明は後回しにして、HTML5で再生するための設定は「YouTube HTML5 動画プレーヤー」のページにアクセスします。アカウントを持っていなくても問題ありません。
ページ下にある「HTML5 試用版を有効にする」をクリックします。
「HTML5 試用版が有効になっています。」になれば設定完了です。これでYouTubeの動画がHTML5で再生されます。リンクをもう一度クリックすれば無効にできるので気軽に試せます。
以下、Flash版とHTML5版の違いおよびブラウザ対応状況等を示します。自分のWindowsマシンで確認した内容なので、違っていたらすいません。
２．スロー再生・倍速再生
冒頭に書いたとおり、HTML5版は再生速度を変更でき、2倍速～1/4倍速の5段階の切り替えが可能です。ただしブラウザによって対応状況が異なり、再生速度の変更はChrome/IE9/Safariでのみ動作します。
３．マウスカーソル
細かいところでは、Flash版では動画部分にカーソルをポイントしてもカーソルの形状は変わりませんが、HTML5版では形状が変わるので、「動画上でクリックできることが分かる」という点でFlash版よりユーザビリティに優れています。
Flash版のカーソル
HTML5版のカーソル
動画上でクリックすれば再生／一時停止の切り替えが行えます（Flash版からの機能ですが）。
４．フルスクリーン
Flash版でお馴染みのフルスクリーン機能は、HTML5版ではブラウザがフルスクリーンオプションに対応していれば、画面全体に表示されます。全画面表示可能なのはChromeだけのようです。F11で元のサイズに戻ります。
フルスクリーン機能対応していない他のブラウザでフルスクリーンにした場合、ブラウザの幅いっぱいに表示されます。この場合はEscキーで元のサイズに戻ります。
５．右クリックメニュー
動画上を右クリックしたときの、それぞれのメニューを掲載しておきます。HTML5版には「新しいウィンドウで開く」がないようです。
Flash版
HTML5版
６．ブラウザ別対応状況
「YouTube HTML5 動画プレーヤー」の説明では「HTML5の動画タグと、h.264動画コーデックまたはWebM形式（とVP8コーデック）をサポートしているブラウザで使用できます」ということらしいですが、試したところ、主要ブラウザであれば一部の機能を除いてHTML5での再生が可能のようです。
ページ下に対応状況が一発で分かるアイコンが表示されるようになっており、以下はWindowsで各ブラウザの表示を確認したものです。Google Chromeであればすべての機能が動作します。
Firefox8/Opera11
Safari5/IE9
Google Chrome
また、IE6/IE7/IE8についてはGoogle Chrome Frameをインストールすれば対応するようです（動作未確認）。
Windowsで確認した、各ブラウザのHTML5の対応機能は表のとおりです。
| ブラウザ | HTML5再生 | スロー・倍速 | フルスクリーン |
|---|---|---|---|
| Google Chrome15 | ○ | ○ | ○ |
| Firefox8 | ○ | × | × |
| IE9 | ○ | ○ | × |
| Opera11 | ○ | × | × |
| Safari5 | ○ | ○ | × |
７．その他
「YouTube HTML5動画プレーヤー」のページに「WebM形式対応の動画を見つけるには、詳細検索オプションを使用するか、検索URLに&webm=1を追加します」とあります。
すべてWebM形式対応になっていたら記載情報が古いのかもしれませんが、参考までに「詳細検索オプションを使用」は、YouTubeの検索ボックスで検索したあとに表示される「フィルタ」→「WebM」をクリックすることを指していると思われます。
YouTubeの動画を途中から再生させる方法
ときどきブログ記事などで「YouTubeのこの動画のXX秒から見てください」みたいな文章をみかけることがありますが、その秒数まで移動するのは結構面倒です。
ということで動画を途中から再生させる方法を紹介します。
１．動画を途中から再生できるリンクを表示する
まずはサンプルです。クリックすれば動画の途中から再生が開始します。
動画を途中から再生できるリンクを表示するには、閲覧しているYouTube動画の下にある「共有」をクリックして表示された「この動画へのリンク」からリンクを取得します。
http://youtu.be/WVIdfNOfUO836秒の部分から開始したい場合は、このURLの末尾に「#t=36s」を加えます。
http://youtu.be/WVIdfNOfUO8#t=36s1分05秒から開始したい場合は、URLの末尾に「#t=1m05s」を加えます。
http://youtu.be/WVIdfNOfUO8#t=1m05sあとは、このURLをa要素のhref属性に設定して自分のブログなどに貼り付ければOKです。１項の冒頭に掲載したサンプルのコードも念のため掲載しておきます。
<a href="http://youtu.be/WVIdfNOfUO8#t=36s">本田圭佑の無回転フリーキックのスローモーション</a>これは公式サイトで「ディープリンク」と呼ばれている機能で、YouTubeのコメント欄でも使えます。
ちなみに、特定の時間のリンクは再生中の動画を右クリックして、「現時点の動画のURLをコピー」を選択しても取得できます。一時停止中でも取得できます。
２．ブログなどに表示する動画を途中から再生できるようにする
自分のブログなどに貼り付けたYouTubeの動画を途中から再生できるようにするには、次のいずれかで可能です。サンプルはあとで掲載します。
閲覧しているYouTube動画の下にある「共有」→「埋め込みコード」をクリックして表示されたコードを取得します。
あとは１項と同様、コードに含まれるURLの末尾に「#t=36s」などを加えてブログに貼り付ければOKです。
<iframe width="420" height="315" src="http://www.youtube.com/embed/WVIdfNOfUO8#t=36s" frameborder="0" allowfullscreen></iframe>iframe要素以外に、次のobject要素で表示させることもできます（以前はobject要素を取得できましたが、2011年11月現在ではiframeでしか取得できないようです）。
<object style="height: 344px; width: 420px">
<param name="movie" value="https://www.youtube.com/v/WVIdfNOfUO8?version=3&feature=player_embedded&start=10">
<embed src="https://www.youtube.com/v/WVIdfNOfUO8?version=3&feature=player_embedded&start=36" type="application/x-shockwave-flash" width="420" height="342" />
</object>embed要素のsrc属性のURLを次のように変更します。
https://www.youtube.com/v/WVIdfNOfUO8?version=3&feature=player_embedded&start=36赤色が可変部分で、「WVIdfNOfUO8」の部分は１項で取得したURLの末尾の文字列を設定し、「start=」の後方に開始秒数を設定します（分は秒に変換）。以下は実際のサンプルです。
object要素で途中から再生を開始するサンプル
URLに含まれる「version=3」をはずすと、動画の再生開始時間が「0:00」になり、再生を開始した時点で指定した時間までスキップされます（追記：閲覧環境によってそうならない場合があるようです）。
「version=3」をはずしたサンプル
が、再生開始時間は最初から表示されている方が親切でしょう。
３．コード出力ツール
object要素を手で書くのは面倒なのでツールを用意しました。
Linkには１項の手順で取得した「この動画へのリンク」をそのまま貼り付け、開始したい分・秒を設定すれば適切なobject要素（またはiframe要素）を取得できます。
Youtube の貼り付け用 HTML を valid にするスクリプト
Youtube の貼り付け用 HTML を valid にするスクリプトです。
１．使い方
YouTube のページ右にある「埋込み」のテキストフィールドの内容（object要素）をコピー。
コピーした内容を、このページの上側のテキストエリアにペーストして、すぐ下にある「Valid XHTML」をクリックします。
下側のテキストエリアに変換したマークアップが表示されます。テキストエリアを一度クリックすれば表示されている内容が全選択されるので、コピーして、ブログなどに貼り付けてお使いください。「Clear」をクリックすれば、上下のテキストエリアの内容を消去します。
２．機能
このスクリプトでは以下の変換を行なっています。
- object 要素に data 属性を追加し、属性値に embed 要素の src 属性値を記述
- object 要素に type 属性を追加し、属性値に embed 要素の type 属性値（application/x-shockwave-flash）を記述
- param 要素の終了タグを削除し、開始タグを空要素タグ（末尾に " /" を付与）に変更
- embed 要素を削除
- URLに含まれる & を実体参照
なお、object 要素は、要素の内容に適当な説明を書くように求められていますが、元のマークアップに説明に該当する内容がないため、変換後、適宜設定してください。
ちなみに、スクリプトを作成した経緯は、以前、Youtube の貼り付け用 HTML を valid にする件について、変換スクリプトのページ「YouTube -> Valid」を紹介していましたが、随分前にデッドリンクになっていたので自作した次第です。ブックマークレットや GreeseMonkey スクリプトなども既出であると思いますが、とりあえず。
YouTube 日本語版リリース
YouTube の日本語版が登場しました。
YouTubeは日本語に対応した「YouTube日本語版」を公開した。ユーザーインターフェイスが日本語化されているほか、日本から投稿された動画が「おすすめ動画」としてピックアップされている。URLは「http://jp.youtube.com/」。
本家のアカウントIDはそのまま使えるようです。日本語化されたのでネットに不慣れな方も結構使いやすくなったのではないでしょうか。
ちょっと前に流行った「折り紙・ターバン野口の折り方」がトップにありますね。
YouTube の Embed タグを一発で XHTML valid にする「YouTube -> Valid」
以前、「YouTube の Embed タグを XHTML valid にする」のエントリーで、「YouTube で提供されている Embed タグを修正することで XHTML valid になります」といった内容を書きましたが、タグを毎回手で書き直すのは結構面倒です。
ということで、YouTube の Embed を一発で valid なタグに書き直してくれるサービスを本エントリーで紹介致します（作成者の方からトラックバックを頂きました）。シンプルな画面で結構気に入ってます。
使い方は、YouTube で見たい動画のページのURL（Embed タグではない）を「YouTube → Valid」の入力フィールドに設定。あとは「Generate!」をクリックすれば valid なタグが下に表示されますので、タグをマウスコピーし、サイトに貼り付ければ完了。
試しにやってみた結果を以下に載せておきます。
YouTube の Embed
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/a11blNPha4g"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/a11blNPha4g" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>YouTube → Valid （XHTML1.0）
<object data="http://www.youtube.com/v/a11blNPha4g" type="application/x-shockwave-flash" width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/a11blNPha4g" />
<param name="wmode" value="transparent" />
<a href="http://www.youtube.com/watch?v=a11blNPha4g">http://www.youtube.com/watch?v=a11blNPha4g</a>
</object>その他、GreaseMonkey スクリプトもありました。
YouTube の Embed タグを XHTML valid にする
YouTube で公開されている、ブログ等へ貼り付ける Embed タグには embed 要素が含まれています。この embed 要素は XHTML では定義されていないため、このタグを貼り付けると XHTML valid なページになりません。
2009.08.13 変換ツール作りました。下記のリンクからどうぞ。
Youtube の貼り付け用 HTML を valid にするスクリプト
ということで、下記のサイトを参考にタグを修正してみました。
cyano：FlashをXHTMLで表示させるには（embedタグを使わずに表示させるには）
変更前（赤色を削除）
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/gMHQ2a9VTyo"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/gMHQ2a9VTyo" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>変更後（青色を追加）
<object data="http://www.youtube.com/v/gMHQ2a9VTyo" type="application/x-shockwave-flash" width="425" height="350"><param name="movie" value="http://www.youtube.com/v/gMHQ2a9VTyo" /><param name="wmode" value="transparent" /></object>変更点は下記の通りです。
object要素にdata属性を追加し、属性値にembed要素のsrc属性値を記述object要素にtype属性を追加し、属性値にembed要素のtype属性値（application/x-shockwave-flash）を記述param要素の終了タグを削除し、開始タグを空要素タグ（末尾に " /" を付与）に変更
と、調べきったところでネットを検索したら既出でありました。
- YouTube の Embed タグを Valid にするにはどう改変すればいいですか？
- Bernie Zimmermann：Embedding YouTube Videos as Valid XHTML 1.0
ともあれ、これで XHTML valid になります。data 属性値にはファイル名が設定されているサンプルはよくみかけますが、仕様上、URI を設定するのは適正なようです。*1
書き換えが面倒な方は、下記の「YouTubeの動画埋め込みタグをValidにするツール」をご利用ください。
2007.03.14 追記
YouTube -> Valid を追記しました。
*1：XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) 等
日本一の本屋・Amazon の巨大倉庫
はてなブックマークをご覧の方はすでにご存知と思われますが、Amazon の倉庫を公開しているTV放送の YouTube 動画がありました。
規模はもちろんのこと、「ロボットより人間の方が効率が良い」という手作業によるピックアップ、そしてジャンルがごちゃ混ぜに置かれた書籍の在庫管理方法が興味深いです。簡単ながら Amazon からの注文方法も紹介されています。
それより、倉庫の場所が家から比較的近い場所だったことに驚いてます。まさに「すぐそーこ」。
