HTML5視頻容器顯示爲黑色

Question

我目前正在製作一個使用.mp4視頻的靜態網站。我正在使用Middleman並使用Heroku（免費計劃）進行託管。在我的本地服務器上一切正常，但在部署的Heroku版本中，視頻顯示爲黑匣子。在Safari和Firefox中根本沒有容器。我所有的其他資產似乎都加載得很好。該視頻是5.9 MB。任何想法發生了什麼？先謝謝你！！

<video class="vid-home" src="/videos/home.mp4" autoplay loop muted></video> 

Answer 1

從理論上講，如果你不指定「海報」圖像的視頻開始播放前顯示，瀏覽器應該顯示視頻的第一幀：

• http://www.w3schools.com/tags/att_video_poster.asp

在實踐中，瀏覽器似乎不一致地實現了這一點，並且我看到了一些移動設備情況，其中某些視頻顯示第一幀，而其他視頻顯示黑箱，即使是相同的視頻類型。

爲了避免這個問題，您可以使用上面鏈接中提到的機制來指定自己的圖像 - 這應該在不同的瀏覽器上一致地工作。 HTML看起來像這樣：

<video class="vid-home" controls poster="yourImage.png" autoplay loop muted> 
    <source src="/videos/home.mp4" type="video/mp4"> 
    Your browser does not support the video tag or format. 
</video>