視頻背景/ Chrome瀏覽器僅在用戶點擊屏幕時才顯示視頻？

Question

我使用本網站http://kimcolemanprojects.com/index.html

其視頻背景插件在所有瀏覽器的偉大工程，只對鉻的視頻不顯示，直到屏幕上，這僅僅是一個白色的屏幕上的用戶點擊。

看起來像它綁定到一個點擊事件，但我不能確定在哪裏。我無法看到綁定到此頁面的事件。

感謝您的幫助。

安吉拉

Answer 1

確實是一個奇怪的。只有當我在後臺選項卡中打開您的網站時，它纔會發生。肯定沒有點擊處理程序。 （請參閱開發工具中的「事件偵聽器斷點」。）視頻元素確實存在並且已加載，即使它沒有顯示。所以我懷疑它是Chrome中的一個bug，或者是它處理某些緩慢加載頁面的怪癖。

似乎讓它出現的一件事是調整開發人員工具中的CSS。因此，嘗試在主體元素的末尾添加此到您的網頁：

<script> 
    $(document).ready(function() { 
    setTimeout(function() { 
     document.getElementsByTagName('video')[0].style.display = ''; 
    }, 500); 
    }); 
</script> 

這對我來說，當我在控制檯中運行它的工作原理，所以希望它會在劇本工作。

此外，有幾件簡單的事情可以使頁面加載速度更快並緩解這一特定問題，即使您無法完全消失。

1. 設置深色背景顏色。這樣，當視頻加載需要一些時間時，用戶將能夠立即看到白色文本。

2. 使視頻更小。大約21MB，這對背景來說太大了。它的編碼速度大約爲每秒3400kb，這甚至比網絡上的高清視頻還要多。嘗試在1000kb甚至更少。也許500kb。並且不要在視頻文件中包含音軌。

3. 將海報圖像保存爲jpg而不是png。它是140kb。你可以把它變得更小。

4. 將所有腳本（移動重定向除外）放在body標籤的底部。這樣，您至少可以在不需要加載腳本的情況下顯示文本和背景顏色。