web-dev-qa-db-ja.com

HTML5ビデオタグを介してYouTubeビデオを再生する方法

このコードはしばらく動作しますが、リンクが変更され、翌日に見つからないのではないでしょうか？
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>
html5html5-video
20
blade19899

実際の動画タグ内でYouTube動画を実際に再生するための信頼できる方法はありません。 YouTubeはあなたがそうすることを望んでおらず、おそらく彼らのTOSに反しています。いずれにせよ、YTがインフラストラクチャを調整するか、人々がビデオファイルに直接アクセスするのを阻止するために道を外れるかにかかわらず、そのURLはおそらく定期的に変更されるでしょう。

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

YouTube APIを使用している場合、html5: 1をplayerVarsに追加します。まっすぐなiframe埋め込みを行う場合は、次のようにクエリ文字列に追加します。 http://www.youtube.com/embed/okqEVeNqBhc?html5=1

さらに一歩進めたい場合、Popcorn.jsには、YouTube（Vimeoにも1つある）ビデオをHTMLVideoElementのように動作させるYouTube API用の気の利いた wrapperオブジェクト があります。ほとんどのプロパティ、メソッド、イベントが同じです。完璧ではありませんが、かなり良いです。

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

気付く違いは次のとおりです。

  • ラッパーを使用しても、HTML5ビデオAPIのパフォーマンスはYT APIよりも少し優れています。たとえば、応答性が高く、バッファリングのレポートが向上します。

  • 一時停止またはマウスオーバーで表示される右下隅のYouTubeアイコンを取り除くことはできません。

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

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

25
brianchirls