HTML5 视频容器显示为黑色

【问题标题】：HTML5 Video Container Appears BlackHTML5 视频容器显示为黑色
【发布时间】：2015-04-17 02:28:16
【问题描述】：

我目前正在制作一个使用 .mp4 视频的静态网站。我正在使用 Middleman 并使用 Heroku 托管（免费计划）。在我的本地服务器上，一切运行良好，但在部署的 Heroku 版本中，视频显示为黑匣子。在 Safari 和 Firefox 中根本没有容器。我所有的其他资产似乎都加载得很好。视频大小为 5.9 mb。知道这里发生了什么吗？提前谢谢你！

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

【问题讨论】：

标签： html video heroku asset-pipeline middleman

【解决方案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>

【讨论】：