web-dev-qa-db-ja.com

HTML5 YouTube動画を強制する

Youtube API Blog に関して、彼らは彼らの新しいHTML5ビデオプレーヤーで実験しています。

どうやらhtml5でビデオを再生するには、iframe埋め込みコードを使用する必要があります：

<iframe class="youtube-player" type="text/html" width="640" height="385"
  src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>

ただし、クライアントが HTML5トライアル に参加していない場合、クライアントのブラウザーがHTML5ビデオ対応であっても、プレーヤーは自動的にFlashプレーヤーにフォールバックします。

ユーザーがまだHTML5トライアルに関与していない場合でも、ブラウザがサポートしている場合、HTML5ビデオの再生を強制する方法は？

それ以外の場合、フラッシュフォールバックを無効にする方法は？

編集：

Youtube Videoへのリンク を介してHTMLプレーヤーを強制することは可能ですが、埋め込みビデオにはこの種の機能が必要です。

html5videoyoutube
116
Kami

私は解決策を見つけました：

Iframeのsrc属性にhtml5=1を追加する必要があります。

<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>

ビデオは、使用可能な場合はHTML5として表示されるか、Flashプレーヤーにフォールバックされます。

178
Kami

YouTube動画がHTML5形式で再生されるかどうかは、ブラウザごとに https://www.youtube.com/html5 の設定に依存します。 ChromeはHTML5再生を自動的に優先しますが、最新のFirefoxおよびInternet Explorerでも、マシンにインストールされている場合はFlashを使用します。

現在、パラメータhtml5 = 1は何もしません（もう）。 （ https://developers.google.com/youtube/player_parameters にもリストされていないことに注意してください。）

20
Vacilando

Iframe埋め込みコードを使用してみましたが、HTML5プレーヤーが表示されましたが、何らかの理由でiframeがサイトを完全に破壊していました。

古いオブジェクトの埋め込みコードをいじってみたところ、完璧に機能します。したがって、iframeで問題が発生している場合、使用したコードは次のとおりです。

<object width="640" height="360">
<param name="movie" value="http://www.youtube.com/embed/VIDEO_ID?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed width="640" height="360" src="http://www.youtube.com/embed/VIDEO_ID?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

これが誰かに役立つことを願って

4
alejandro

Iframe埋め込みAPIを使用している場合は、次のようにplayerVars引数の1つとしてhtml5:1を指定できます。

player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: '<VIDEO ID>',
    playerVars: {
        html5: 1
    },
});

完全に動作します。

2
samson

インラインタグは、ドキュメントの別のsrcを現在のhtml要素に追加するために使用されます。

あなたの場合、youtubeのビデオで、リンクの外部のブラウザにhtmlタイプ（4または5）を指定する必要があります

リンクの最後に？html = 5を追加してください。

0
ashwinrishipj