Howto HTML5ビデオタグでYouTubeビデオを再生する

Question

このコードはしばらくは動作しますが、リンクが変更されたと思われます。
動画はFirefox/Chrome/Operaの下で再生されました...動画タグをこの動画を永久に再生する方法を教えてください。

<video width="480" height="270" controls="controls" style="color:green;"> 
    <source src="youtubelink" type="video/mp4"> 
    <source src="youtubelink" type="video/ogg"> 
    <source src="youtubelink" type="video/webm"> 
Your browser does not support the video tag. 
</video> 

Answer 1

実際のビデオタグ内でYouTube動画を実際に再生するための信頼できる方法は実際にはありません。 YouTubeはそれをしたくないし、おそらくTOSに反するだろう。いずれにしても、YTがインフラストラクチャを調整している場合でも、人がビデオファイルに直接アクセスできなくなった場合でも、URLはおそらく定期的に変更される可能性があります。

ただし、ビデオタグを使用していた場合にできることをすべて実行できるようにするための手順はいくつかあります。まず、埋め込みに「html5 = 1」のヒントを追加すると、youtubeはFlashの代わりにhtml5のビデオを使用するように指示します（通常は準拠していますが、必ずしもそうではありません）。動画はiframe内にありますが、通常のCSSテクニック（不透明度、変形など）をすべてそのiframeに適用できます。

YouTube APIを使用している場合は、にhtml5: 1を追加してください。あなただけまっすぐのiframe埋め込みをやっている場合は、このようなクエリ文字列に追加します。あなたはさらに一歩に行きたい場合は、今すぐ http://www.youtube.com/embed/okqEVeNqBhc?html5=1

、Popcorn.jsは現在、YouTubeのAPIのための気の利いたwrapper objectを持っています（同じくVimeo用のものを持っている）YouTubeを作るのは、同じプロパティ、メソッド、イベントの大部分を持つHTMLVideoElementのように振る舞います。完璧ではありませんが、かなり良いです。

注：このファイルの公式ソースはmozilla/popcorn-jsレポですが、現在this oneにはバグ修正と機能が搭載されています。そのレポから最新バージョンのPopcorn.jsとwrappers/common/popcorn._MediaElementProto.jsを含める必要があります。 srcを設定するときは、YT URLに&html5=1を必ず追加してください。あなたが気づく

違いは次のとおりです。

• でもラッパーで、HTML5のビデオAPIがちょうどYTのAPIよりも少し良く実行されます。例えば、応答性が高く、バッファリングの報告が良好である。

• ポーズまたはマウスオーバー時に表示される右下隅にあるYouTubeアイコンを削除することはできません。

• YouTubeに広告が表示されないようにすることはできません。

• Audio APIやcanvas/webglのような実際のビデオ/オーディオコンテンツにアクセスすることはできません。しかし、クロス・オリジンの制限のために、とにかくそれをすることはできませんでした。