3

PHP ファイルに次のように YouTube プレーヤーを含めますが、プレーヤーにフルスクリーン ボタンが表示されません。Flash Player への切り替えは機能します (URL を /embed から /v に変更するか、または無効にすることによって&html5=1)。私は何を間違っていますか？

例はここにあります: http://jonnyrimkus.square7.ch/stuff/youtube_html5_fullscreen.php

<script>

var tag = document.createElement(\'script\');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName(\'script\')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


function onYouTubeIframeAPIReady() {
  player = new YT.Player(\'player\', {
    playerVars: {
      \'allowfullscreen\': \'true\',                
      \'allowscriptaccess\': \'always\'
    },
    events: {
      \'onReady\': onYouTubePlayerReady,
      \'onStateChange\': playerStateChange,
      \'onError\': playerStateError
    }
  });
}
</script>   
<iframe id="player" width="425" height="356" border="0" frameborder="0" src="http://www.youtube.com/embed/36XdO9Iv9ew?enablejsapi=1&playerapiid=lastfmplayer&autoplay=1&html5=1&fs=1&origin=http://jonnyrimkus.square7.ch"></iframe>
4

3 に答える 3

5

Youtube プレーヤーが属性iframeを持たない別のプレーヤー内にある場合、フルスクリーン ボタンも表示されません。allowfullscreen

Google のドキュメントに記載されている内容とは異なり( 2014年 11 月現在)、fsクエリ文字列の属性はフルスクリーンの表示に影響を与えないようです。可視性は、インスタンス化中に YouTube プレーヤーがデフォルトで設定するallowfullscreen属性の影響を受けるようです。iframeつまり、プレーヤーを別のプレーヤーに埋め込む場合は、iframeその iframe をallowfullscreen(またはそのすべてのバリアント webkitallowfullscreen mozallowfullscreen)に対してもマークする必要があります。

<iframe src='' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen>
       <!-- YT player-->
</iframe>
于 2014-11-25T18:12:12.403 に答える
2

iframe api を使用している方法では何も実行されません。api は のよう<div id="player"></div>に空の要素にバインドされます。id は関数の最初の引数new YT.Playerです。

iframe API を使用して YouTube ビデオを読み込むには、本文に次のものが必要です。

<div id="player"></div>

<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: 480,
        width: 640,
        videoId: "36XdO9Iv9ew",
    });
}
</script>

iframe API を使用する場合、フルスクリーンを有効にすることを明示的に指定する必要はありません。

API なしで iframe を使用することもできます。使用するときはフルスクリーンにする必要があります。

<iframe width="640" height="480" frameborder="0" id="player" allowfullscreen="1" title="YouTube video player" src="http://www.youtube.com/embed/36XdO9Iv9ew?enablejsapi=1"></iframe>

iframe タグを使用するだけで少し高速になりますが、iframe API の追加機能を使用する場合は選択の余地がありません。

例のあるページ (ソースも確認してください): http://qnet.co/yt

フルスクリーン機能を自分で実装することもできます (Youtube には必要ありませんが、それでもクールです)。

var goFullscreen = function(id) {
  var el = document.getElementById(id);
  if (el.requestFullScreen) {
    el.requestFullScreen();
  } else if (el.mozRequestFullScreen) {
    el.mozRequestFullScreen();
  } else if (el.webkitRequestFullScreen) {
    el.webkitRequestFullScreen();
  }
}

var leaveFullscreen = function() {
  if (document.cancelFullScreen) {
    document.cancelFullScreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

Youtubeプレーヤーをフルスクリーンにするには: goFullscreen('player')、フルスクリーンを終了するには:leaveFullscreen()

requestFullscreen と cancelFullscreen の異なるバージョンは、標準がまだ完全に完成していないため、異なるブラウザー用です。

Javascript フルスクリーンの詳細: http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ (比較的古いドキュメントですが、まだ有効です)

トピック外: このような文字列を php でエコーしても意味がありません。php タグの外側のファイルの本文に貼り付けるだけです。

于 2013-05-16T22:39:20.110 に答える