強制div顯示並覆蓋全屏

我有一個Chrome擴展插件，可以在頁面中插入一個菜單，但是無論何時任何flash或html5視頻播放器全屏顯示，視頻播放器以外的任何內容都是不可見的。強制div顯示並覆蓋全屏

我可以在同一時間（一個在另一個）全屏顯示兩個對象，還是有另一種方式來做到這一點？由於現有視頻播放器種類繁多，我寧願不必將html專門插入不同網站的不同位置。該解決方案應該適用於所有視頻播放器。

編輯：

從那時起，很多網站已經轉移到使用HTML5而不要使用閃光燈，所以這已經成爲一個很可能的事幾乎所有的網站。

這是我最終編寫和使用的代碼。希望這可以幫助某人：

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

來源

2014-05-07 Marc Guiselin

如果你能得到它們，截圖會很有幫助，這樣我們就可以瞭解到底發生了什麼。 – Fizzix

正如你在談論divs，可能與屬性z-index有關？ – agusgambina

div有什麼'position'和'display'？ – Fizzix

這不太可能。視頻播放器全屏實施佔據整個屏幕;你不再有瀏覽器窗口覆蓋。

這與在瀏覽器中進行全屏顯示不同，您仍然可以使用普通瀏覽器窗口進行操作。

編輯：進一步擴大;使用Flash的任何視頻播放器都是絕對不可能的，因爲您沒有任何HTML元素可以疊加在一起;全屏幕由閃光燈本身處理，您無法做任何事情。

使用HTML5，從我的測試看來，這似乎也是不可能的。我去this sample page，在開發工具中編輯HTML，嘗試在視頻元素中插入div，但不會呈現。

如果您控制了頁面，可能會全屏顯示容器div而不是視頻本身，然後實現您想要的內容，但由於無法控制相關頁面，因此可能會贏得' （除非你想嘗試替換頁面中的ID/etc，但即使這樣也不能保證成功;如果頁面JS已經具有相關元素的句柄，替換ID將不會更新這些）

來源

2014-05-07 01:58:26

很多答案是這樣的，想改善它，但我看不到鏈接，所以我在這裏添加：沒有任何呈現的原因視頻標籤內部是因爲您的瀏覽器知道如何渲染視頻並獲取內部的源標籤。視頻標籤中的div僅適用於無法呈現視頻標籤並將div顯示爲後備的瀏覽器。要做到這一點，唯一的方法是檢測HTML5或Flash視頻源，將其剝離並創建自己的播放器，並且可能需要爲每個要與之交互的服務創建特定的代碼，因此它不會是通用的 – MacK

不幸的是，@Collin Grady提到這是不可能的，因爲瀏覽器在播放全屏視頻時需要小心。

你仍然可以模擬全屏壽！您可以修改視頻的大小以適應屏幕的大小（或任何您需要的大小）。通過這樣做，您仍然可以控制自己的元素，並可以在視頻頂部顯示菜單。

在CSS Tricks有一篇文章可以指導您如何修改YouTube視頻的尺寸。文章的作者寫了一個jQuery插件，也叫FitVids.JS

通過模擬全屏，你可以顯示你想要的東西。

我希望這可以幫助

來源

2014-05-15 16:19:03

強制div顯示並覆蓋全屏

回答

相關問題