如果设备方向更改为横向，则将嵌入的 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 现在支持全屏 API。当您使用 Fullscreen API 时，您还应该添加对 msRequestFullscreen 的调用。有关详细信息，请参阅 MSDN 文档：

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

披露：我所在的团队负责 Microsoft 实施全屏 API。