chrome android html5 视频的黑屏

Question

问题： 视频放在我的站点：http://dege.cloud/（点击其中一张图片）当我在桌面或 firefox 移动设备上加载页面时，一切都很好。在 chrome 上为 android 加载同一页面时，视频是黑色的，没有控件，视频没有音频，所以我不知道它是否播放。

预期结果： 视频应该可以播放，hml5 视频标签不会在移动设备上自动启动，但这不是问题。

分析： 视频的内容类型正确，检查设备上的控制台未提供错误。我给了视频的 webm 和 mp4 版本（从 http://giphy.com/ 中截取）。

视频的代码是这样的：

<video autoplay muted loop class="img-responsive img-centered">
    <source src="img/portfolio/campominato-video.webm" type="video/webm" class="img-responsive img-centered">
    <source src="img/portfolio/campominato-video.mp4" type="video/mp4" class="img-responsive img-centered">
    <img src="img/portfolio/campominato-screen.png" class="img-responsive img-centered">
</video>

实际问题的 jsfiddle： https://jsfiddle.net/Dege/1es4516p/

Answer 1

据我所知，问题在于它会自动播放；而 chrome Android 53 会 autoplay muted videos，当前默认版本 (51) 不会。

无论如何，如果您将 controls 属性添加到视频元素并按下播放，视频会正确播放，这证实这不是编码问题。

（FWIW，jsfiddle 在用于加载视频的 http 方案中有 3 个斜线；这不是问题，但您可能仍想修复它）

chrome android html5 视频的黑屏

Black screen on chrome for android html5 video

html

video

android

google-chrome

html5-video