18

非表示のコントロールを含む埋め込まれた YouTube ビデオがあります。

<iframe id="ytplayer" type="text/html" width="400" height="225"
src="http://www.youtube.com/embed/dMH0bHeiRNg?rel=0&controls=0&showinfo=0
&loop=1&hd=1&modestbranding=1&enablejsapi=1&playerapiid=ytplayer"
frameborder="0" allowfullscreen></iframe>

YouTube Javascript API で制御できます。

var tag = document.createElement('script');

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

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
  events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
  }
});
}

のようなものはplayer.playVideo()完全に機能します。現在、Javascript 呼び出しを使用してフルスクリーン モードでビデオを再生する方法を探していますが、API にメソッドが見つかりませんでした。

それは（コントロールなしで）可能ですか？

4

6 に答える 6

8

私の場合、これは完璧に機能しました。このリンクで詳細を確認できます: CodePen のデモ

var player, iframe;
var $ = document.querySelector.bind(document);

// init player
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '200',
    width: '300',
    videoId: 'dQw4w9WgXcQ',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// when ready, wait for clicks
function onPlayerReady(event) {
  var player = event.target;
  iframe = $('#player');
  setupListener(); 
}

function setupListener (){
$('button').addEventListener('click', playFullscreen);
}

function playFullscreen (){
  player.playVideo();//won't work on mobile

  var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(iframe)();
  }
}
于 2016-03-21T11:02:31.637 に答える
5

html5 フルスクリーン API を使用できます。

node.requestFullScreen();
document.cancelFullScreen();
document.fullScreen; // bool

ただし、次の点に注意してください。

  • mozRequestFullScreen()これには通常、またはのようなベンダー固有のプレフィックスが必要ですwebkitRequestFullScreen
  • requestFullScreenユーザー イベント (onclick など) で呼び出す必要があります。
  • Firefox では、ユーザーが [許可] をクリックするまで全画面が黒くなります。
于 2014-01-01T12:39:11.653 に答える
1

プレーヤーの API リファレンスを見ると、 ( API だけで)iframeフルスクリーンに設定することはできないと思います。フルスクリーンが見つからなかったので、API 内に隠されているシークレット メソッドであるか、存在しません。 . ただし、おそらくご存じのとおり、プレーヤーのサイズを設定してから、ウィンドウをフルスクリーンにすることができます。iframectrl fplayer.setSize(width:Number, height:Number):Object

于 2014-01-01T16:47:40.340 に答える
0

Maybe have a look at this similar question. It looks as though this might work for you (using the javascript fullscreen api rather than the Youtube API):

Full Screen Option in Chromeless player using Javascript?

于 2013-02-27T14:50:35.383 に答える
-6

You can try setting the iframe dimension to the window dimension through javascript.

Something like this (using jQuery):

$('ytplayer').attr('width', $(window).width());
$('ytplayer').attr('height', $(window).height());

I hope this can help you.

于 2013-02-27T15:03:45.253 に答える