在调整大小事件与 hmtl5 视频全屏模式下重新加载页面答案

【问题标题】：Reload page at resize event versus hmtl5 video full screen mode在调整大小事件与 hmtl5 视频全屏模式下重新加载页面
【发布时间】：2014-07-12 11:23:25
【问题描述】：

我有以下问题：

在我的新网页 (http://test.kosuch.eu/en/stefanie/index.php) 上，我通常希望在更改窗口大小时重新加载页面。我使用由 Isotope 统治的模板（请参阅 isotope.metafizzy.co），并为调整大小事件提供以下功能。到目前为止一切正常！

$(window).resize(function() {
        $container_home.isotope('reLayout')
}).trigger("resize");

现在我也在使用html5视频标签来发布视频，见http://test.kosuch.eu/en/stefanie/dancing/。但是，当点击视频的“全屏”按钮时，该事件被视为窗口大小调整，即页面重新加载，全屏立即再次关闭。这很合乎逻辑，我知道。

那么有人知道如何处理这个问题吗？

我有以下3个想法，我在网上搜索了答案，但没有找到任何答案： 1. 我可以只为包含视频的页面打开调整大小触发器吗？（不是最佳的，但目前就足够了。） 2. 切换到视频全屏模式可以关闭resize trigger吗？ 3. 是否有一个 html5 视频标签选项可以在没有调整大小事件或类似事件的情况下打开视频？

欢迎任何帮助和想法！

问候，斯蒂芬妮

【问题讨论】：

检查内部调整大小处理程序使用：developer.mozilla.org/fr/docs/Web/API/document.mozFullScreen
谢谢！我在调整大小触发器中添加了对全屏模式的检查。但是，全屏检查会检查 浏览器 是否处于全屏模式。事实上，如果我在浏览器中处于全屏模式，然后开始以全屏模式播放视频，它就可以工作。但一般用户不会在全屏模式下工作。所以这还不是我正在寻找的答案（但我可能会使用你的想法来解决问题，例如自己定制全屏按钮）。
事实上，我注意到当浏览器已经处于全屏模式时，视频的全屏模式总是有效的。从已经最大化的浏览器窗口更改为全屏模式不会被视为调整大小 - 所以我真的不明白在浏览器窗口刚刚最大化（不工作）时以全屏模式播放视频和播放视频之间的区别当浏览器本身处于全屏模式（工作）时，处于全屏模式。任何解释，甚至更好的解决方案，不涉及用户必须更改为浏览器的全屏模式？谢谢！
还有另一个信息：我一般使用 Mozilla Firefox 30.0 进行测试。使用 Internet Explorer，在全屏播放视频之前进入浏览器全屏的解决方法不起作用，即，即使在全屏模式下，在全屏打开视频时似乎也会触发调整大小事件:-(
我有同样的问题你找到解决办法了吗？（在我的情况下，视频来自 vimeo 和 youtube ...）

标签： jquery html video resize reload

【解决方案1】：

我最近使用 YouTube HTML5 播放器解决了同样的问题 - 全屏功能利用 HTML5 全屏 API 并会触发 window.resize 事件。

解决方案是检测全屏 API 激活，并暂时禁用 window.resize 回调。有点难看，但它可以在 Chrome 37、FF 32 和 IE11 中运行和测试。

var fullscreen = false;

if (screenfull.enabled) {
    document.addEventListener(screenfull.raw.fullscreenchange, function() {
        // switching to full screen
        if (screenfull.isFullscreen) {
            fullscreen = screenfull.isFullscreen;

        // leaving full screen
        } else {
            // short delay to let browser finish resizing the viewport
            window.setTimeout(function() {
                fullscreen = screenfull.isFullscreen;
            }, 1000);
        }
    });
}

var resizeCallback = function() {
    if (fullscreen) return;

    // ... complex layout logic
}

Screenfull.js 消除了全屏 API 的浏览器实现差异 - 推荐。

【讨论】：