Javascript 强制显示div并覆盖全屏显示的内容

Javascript 强制显示div并覆盖全屏显示的内容,javascript,jquery,html,css,google-chrome,Javascript,Jquery,Html,Css,Google Chrome,我有一个Chrome扩展,可以在页面中插入一个菜单,但是每当flash或html5视频播放器全屏播放时,视频播放器之外的任何东西都是看不见的 我可以让两个对象同时全屏显示(一个在另一个上),还是有其他方法可以做到这一点?由于现有的视频播放器种类繁多,我不想在不同网站的不同位置专门插入html。该解决方案应适用于所有视频播放器 编辑: 从那时起,很多网络已经转向使用html5而不是flash,所以这在几乎所有的网站上都是很有可能做到的 这是我最终编写和使用的代码。希望这将有助于某人: docume

我有一个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
        }
    }
});

这是不可能的。视频播放器全屏实现接管整个屏幕;您不再有可覆盖的浏览器窗口

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

编辑:进一步扩展

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

对于HTML5,从我的测试来看,这似乎也是不可能的。我在dev工具中编辑了HTML,尝试在video元素中插入一个div,但它不会呈现


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

不幸的是,@Collin Grady提到这是不可能的,因为当您播放全屏视频时,浏览器会很小心

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

中有一篇文章可以指导您如何修改youtube视频的维度

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


我希望这有助于

如果你能得到截图,我们就能了解出了什么问题。当你谈论div时,可能与属性z-index有关?div有什么
位置
显示
吗?style=“z-index:999998;背景色:rgb(153,102,0);位置:固定;”你可以全屏显示除视频元素之外的其他元素,这将允许你查找的内容。例如,使用mediabrowser3全屏视频播放器,我还可以将视频控件显示为悬停覆盖。但是,看起来你似乎试图在Youtube上覆盖某个内容,是的,这可能无法实现。如果你无法合作控制全屏是如何实现的,然后你会被给出的内容所困扰。示例:答案基本上是这样的,我想改进它,但我看不到链接,所以我在这里添加:视频标记内没有任何呈现的原因是因为你的浏览器知道如何呈现视频,它会获取其中的源标记。视频标记内的div视频标记仅在无法呈现视频标记并将div显示为备用的浏览器上工作。唯一的方法是检测HTML5或Flash视频源,将其剥离并创建自己的播放器,并且可能需要为每个要与之交互的服务创建特定的代码,因此它在7年后不会普及这个答案帮助我解决了我的全屏问题。谢谢!