如果设备方向更改为横向，则将youtube视频嵌入全屏模式

Question

我正在开发一个AngularJS应用程序，我正在使用YT API嵌入一个YouTube视频。

如果用户将设备旋转到横向模式而没有运气，我想全屏播放视频：（

我的侦听器示例代码：

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";     

window.addEventListener(orientationEvent, function() {
    alert("Event captured!!");
    var el = document.getElementById('youtube_player');

    if (el.requestFullscreen) {
        el.requestFullscreen();
    } else if (el.mozRequestFullscreen) {
        el.mozRequestFullscreen();
    } else if (el.webkitRequestFullscreen) {
        el.webkitRequestFullScreen();
    }
 }, false);

有人知道对用于捕获此类事件的事件有任何限制吗？

相同的代码，但是附加到按钮的监听器（使用touchstart事件）完成了工作！

谢谢你！

Answer 1

你的假设是正确的。进入全屏模式的请求必须是用户启动的。单击按钮被视为用户启动，但不更改设备的方向。如果为“fullscreenerror”（以及供应商前缀变体）添加事件监听器，您将看到对requestFullscreen（）的调用正在触发全屏错误。

此外，从IE11开始，Internet Explorer现在支持Fullscreen API。使用Fullscreen API时，也应该添加对msRequestFullscreen的调用。有关详细信息，请参阅MSDN文档：

http://msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx

披露：我参与了Microsoft实施Fullscreen API的团队。