如何在視頻播放時使頁面變暗？

我已經看到這樣做了幾次，整個頁面在播放視頻時會變黑或變黑。我想知道如何使用HTML CSS或Javascript來完成這項工作。如何在視頻播放時使頁面變暗？

這裏是我的意思的例子：http://allmyvideos.net/vc0uqldjebnz

來源

2013-02-14 Batman

數字下載也可 – Tucker 2013-02-14 07:13:12

@gdoron我不知道，如果包裹被傳遞到的蝙蝠洞 – Najzero 2013-02-14 07:15:06

蝙蝠俠喜歡一切在黑暗中...... – Deadlock 2013-02-14 07:16:29

創建一個疊加的div佔據了整個屏幕，是深色或黑色。將它設置爲以無顯示的方式開始。確保您的視頻具有更高的Z-index。然後，當視頻播放時，設置覆蓋div顯示，它應該使頁面變黑。

例如，設置這樣一個div：

<div id="overlay" style="display:none;position:fixed;width:100%;height:100%;top:0;left:0;opacity:0.6;">&nbsp;</div>

頁面加載後，你將不會看到覆蓋。然後，當在視頻播放，設置顯示器（使用jQuery例如）任何東西，但沒有一個會顯示覆蓋

$("#overlay").show();

來源

2013-02-14 07:17:48

.show是一種jQuery方法嗎？我的教授不會讓我們使用jQuery，但我想var overlay.style.display：block;應該正常工作嗎？ – Batman 2013-02-14 07:29:19

是的，.show是jQuery。你的代碼「var overlay.style ...」將不起作用。在「常規」Javascript中，執行以下操作：'document.getElementById（「overlay」）。style.display =「block」'這就行了。 – 2013-02-14 07:31:42

聽起來不錯，謝謝 – Batman 2013-02-14 07:35:05

如何在視頻播放時使頁面變暗？

回答

相關問題