防止YouTube嵌入式播放器从全屏



由于YouTube API没有通过编程触发全屏的方法(显然是有充分的理由,与传统的Flash支持有关,如这里所述),我只能通过使用HTML5元素。

设置播放器IFrame全屏。

不幸的是,如果用户在YouTube播放器中触发全屏,那么播放器本身就会全屏而不是IFrame,并且不会产生任何事件来表示它已经这样做了。当应用程序的其余部分不知道东西是什么并且不再全屏时,这会破坏我的UI并导致其他同步问题。一个部分解决方案是使用无色播放器,然后渲染我自己的播放器控件,这样用户就不能点击YouTube全屏按钮-但是,事实证明,双击YouTube视频也会导致它进入全屏模式,再次没有办法向应用程序的其余部分发出信号,它已经这样做了。

那么,是否有一致的方法来防止嵌入式YouTube播放器在任何情况下全屏,而不影响其他功能?

到目前为止,我最好的解决方案是在iframe上设置指针事件:none。然而,这并不是很完美,因为它也使得在YouTube视频上显示的广告横幅无法被删除。理想的解决方案是阻止"双击全屏"响应,而不会搞乱其他任何事情。(例如,点击播放就可以,因为YouTube播放器会发出播放事件,让我保持应用程序的其余部分同步。)

使用iframe标签嵌入时,可以使用参数fs = "0"禁用全屏按钮。见http://codepen.io/anon/pen/zvOqKJ

这里发生了一些奇怪的事情。我无法阻止全屏时,我传递了"fs: 0"与playerVars按照本页

https://developers.google.com/youtube/player_parameters?playerVersion=HTML5

(即使其他球员的表现有所不同)

天知道哪里出了问题,但我用:

var ourYT = document.getElementById('player');
ourYT.allowFullscreen = false;

使用这个;

iframe {pointer-events: none;}

你可以在YouTube播放器上禁用点击事件(播放,暂停,全屏);

相关内容

  • 没有找到相关文章

最新更新