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视频的尺寸。该文章的作者写了一个名为FitVids.JS

的jQuery插件

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

我希望这会有所帮助

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

2 个答案: