强制 div 显示并覆盖全屏中的任何内容

Question

我有一个 Chrome 扩展程序，可以在页面中插入一个菜单，但是每当任何 flash 或 html5 视频播放器全屏显示时，视频播放器之外的任何内容都是不可见的。

我可以同时全屏显示两个对象（一个在另一个上），还是有其他方法可以做到这一点？由于现有的视频播放器种类繁多，我宁愿不必将 html 专门插入不同网站的不同位置。该解决方案应该适用于所有视频播放器。

编辑：

从那时起，很多网络都开始使用 html5 而不是 flash，所以这已成为几乎所有网站都可以做的事情。

这是我最终编写和使用的代码。希望这会对某人有所帮助：

document.addEventListener("webkitfullscreenchange", function(){//Whenever an element becomes or stops being in full screen
    //first, grab the page's fullscreenElement
    var fse = document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement;

    if(fse){//if there is a fullscreened element
        fse.appendChild(menu);//append the menu inside the fullscreened element
    }else{//if nothing is in full screen
        if(window.self !== window.top){//if we are in an iframe
            menu.remove();//hide menu if we are in an iframe
        }else{//if we arn't in an iframe
            document.body.insertBefore(menu, document.body.firstChild);//show menu
        }
    }
});

Answer 1

这不太可能。视频播放器全屏实现接管整个屏幕；你没有可以覆盖的浏览器窗口了。

这与在浏览器中全屏显示不同，您仍然可以使用正常的浏览器窗口。

编辑：进一步扩展；

对于任何使用 Flash 的视频播放器，这是绝对不可能的，因为您没有机会覆盖任何 HTML 元素；全屏是由 flash 自己处理的，你不能用它做任何事情。

使用 HTML5，从我的测试来看，这似乎也是不可能的。我去了this sample page，在开发工具中编辑了HTML，尝试在视频元素中插入一个div，但它不会呈现。

如果您可以控制页面，则可以全屏显示容器 div 而不是视频本身，然后实现您想要的，但由于您无法控制有问题的页面，这可能不会完全可以帮助您（除非您想尝试在页面内替换 ID/etc，但即使这样也不能保证成功；如果页面 JS 已经在相关元素上有句柄，替换 ID 不会更新这些）

Answer 2

不幸的是，正如@Collin Grady 所说，这是不可能的，因为浏览器会在您播放全屏视频时进行处理。

您仍然可以模拟全屏！您可以修改视频的大小以适应屏幕的大小（或您需要的任何大小）。通过这样做，您仍然可以控制您的元素，并且可以在视频顶部显示您的菜单。

CSS Tricks 中有一篇文章可以指导您如何修改 youtube 视频的尺寸。文章作者也写了一个jQuery插件叫FitVids.JS

通过模拟全屏，您可以在顶部显示您想要的内容。

希望对你有帮助