强制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,从我的测试来看,它似乎也是不可能的.我去了这个示例页面,在开发工具中编辑了HTML,尝试在视频元素中插入一个div,但它不会渲染.

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