用于 android html5 视频的 chrome 上的黑屏

Posted 2023-03-05

【中文标题】用于 android html5 视频的 chrome 上的黑屏

【英文标题】：Black screen on chrome for android html5 video

【发布时间】：2016-08-13 02:53:39

【问题描述】：

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

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

分析： 视频的 Content-Type 是正确的，并且检查设备上的控制台不会提供错误。 我给了视频的 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/

【参考方案1】：

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

在任何情况下，如果您将controls 属性添加到视频元素并按播放，则视频可以正确播放，这确认它不是编码问题。

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