强制div显示并覆盖全屏中的任何内容 [英] Force a div to show up and overlay whatever is in fullscreen

问题描述

我有一个Chrome插件，可以在页面中插入一个菜单，但是当任何Flash或HTML5视频播放器全屏显示时，视频播放器外部的任何内容都将不可见。

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

编辑： 然后，很多网站转而使用html5而不是flash，所以这已经成为几乎所有网站上可能做的事情。

这是代码我结束了写作和使用。希望这可以帮助某人：

  document.addEventListener（webkitfullscreenchange，function（）{//当元素变为或停止全屏
 //首先抓取页面的全屏元素
 var fse = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement || 
 
 if（fse）{//如果有全屏元素
 fse.appendChild（menu）; //在全屏元素
中添加菜单else {//如果全屏中没有任何内容
 if（window.self！== window.top）{// if if in iframe 
 menu.remove（）; //如果我们在iframe中隐藏菜单
} else { // if if arn't in a iframe 
 document.body.insertBefore（menu，document.body.firstChild）; // show menu 
} 
} 
}）; 
  

解决方案

这不太可能。视频播放器全屏实施占据整个屏幕;您没有浏览器窗口可以覆盖。

这与浏览器中的全屏不同，您仍然可以使用普通的浏览器窗口进行浏览。

编辑：进一步扩展;

使用任何使用Flash的视频播放器，这绝对不可能，因为你没有任何HTML元素重叠的机会;全屏幕由Flash本身处理，并且你无法做任何事情。

使用HTML5，从我的测试中看起来似乎不可能。我去了此示例页面，在开发工具中编辑HTML以尝试插入视频元素中的div，但不会呈现。

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

I have a Chrome extension that inserts a menu into the page, but whenever any flash or html5 video player goes full screen, anything outside of the video player is invisible.

Could I have two objects in full screen at the same time (one over the other), or is there another way to do this? I would rather not have to insert the html specifically into different places on different websites, because of the large variety of existing video players. The solution should be universal for all video players.

EDIT:

Since then, a lot of the web has moved to using html5 instead of flash, so this has become a very possible thing to do on almost all websites.

Here was the code I ended up writing and using. Hopefully this will help someone:

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
        }
    }
});

解决方案

This is not likely to be possible. The video player fullscreen implementation takes over the entire screen; you do not have a browser window to overlay on anymore.

It's not the same as going fullscreen in your browser, where you still have the normal browser window to work with.

edit: to expand further;

With any video player using Flash, this is absolutely not possible, because you have no chance of any HTML elements to overlay onto; the fullscreen is handled by flash itself, and you can't do anything with that.

With HTML5, from my testing it also seems impossible. I went to this sample page, edited the HTML in the dev tools to try inserting a div inside the video element, but it won't render.

If you had control over the pages, it might be possible to fullscreen a container div instead of the video itself, and then achieve what you want, but since you can't control the pages in question, that likely won't help you at all (unless you wanted to try replacing IDs/etc in-page, but even that wouldn't guarantee success; if the page JS already had handles on the relevant elements, replacing IDs wouldn't update those)

这篇关于强制div显示并覆盖全屏中的任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！