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

Question

我有以下问题:

在我的新网页 ( 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. 切换到视频全屏模式时可以关闭调整大小触发器吗？3. 是否有一个 html5 视频标签选项可以在没有调整大小事件或类似事件的情况下打开视频？

欢迎任何帮助和想法!

问候，孙燕姿

Answer 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 的浏览器实现差异 - 推荐。