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

我添加了代码来做全屏（真正的全屏，而不是全窗口）到我对Youtube embed 的 Auto-Full Screen 的回答中。

YouTube 不会在其 API 中公开全屏，但您可以从 YouTube API 的 playerStateChange() 事件调用本机浏览器 requestFullScreen() 函数，或者像我一样制作自己的自定义播放按钮。

于 2013-11-29T16:31:31.600 回答
5

您可以使用 html5 全屏 api：

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

但请注意：

  • 这通常需要供应商特定的前缀，例如mozRequestFullScreen()或webkitRequestFullScreen
  • requestFullScreen必须在用户事件上调用（如 onclick）
  • 在Firefox中，全屏将是黑色的，直到用户单击“允许”
于 2014-01-01T12:39:11.653 回答
1

查看iframe播放器的 API 参考，我认为不可能将其设置为全屏（iframe仅使用 API）-ctrl f没有找到全屏，所以它要么是隐藏在 API 中的秘密方法，要么不存在. 但是，您可能知道，您可以设置播放器的大小player.setSize(width:Number, height:Number):Object，然后将窗口设为全屏。

于 2014-01-01T16:47:40.340 回答
0

也许看看这个类似的问题。看起来这可能对您有用（使用 javascript 全屏 api 而不是 Youtube API）：

使用 Javascript 的 Chromeless 播放器中的全屏选项？

于 2013-02-27T14:50:35.383 回答
-6

您可以尝试通过 javascript 将 iframe 尺寸设置为窗口尺寸。

像这样的东西（使用jQuery）：

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

我希望这可以帮助你。

于 2013-02-27T15:03:45.253 回答