Question

我有以下问题：

在我的新网页（http://test.kosuch.eu/en/stefanie/index.php）上，我非常希望在窗口大小发生变化时重新加载页面。我使用由Isotope统治的模板（参见isotope.metafizzy.co）并为resize事件提供以下函数。到目前为止一切正常！

$(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的浏览器实施差异 - 建议使用。

在resize事件与hmtl5视频全屏模式下重新加载页面

1 个答案: