HTML5 视频（webm 和 MP4）显示空白屏幕且无法播放

Posted 2023-05-08

【中文标题】HTML5 视频（webm 和 MP4）显示空白屏幕且无法播放

【英文标题】：HTML5 Video (both webm and MP4) are showing a blank white screen and aren't playing

【发布时间】：2014-08-17 07:47:21

【问题描述】：

我已经用谷歌搜索了一个小时，但我要么不擅长，要么这不是一个常见的问题。

这是我的视频标签：

<video class="video-background" preload="none" loop="loop" autoplay="autoplay">
    <source src="/resource/video/ripples.webm" type="video/mp4">
    <source src="/resource/video/ripples.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

无论我按什么顺序放置它们，webm 和 mp4 都不会加载，它们只会显示一个空白屏幕。我也没有从服务器收到 404，所以视频应该从服务器上下来？

感谢任何意见

编辑：我们删除了 preload="none" 属性，现在视频的 第一帧 出现了，但由于某种原因它不会自动播放视频的其余部分（尽管有 @ 987654327@ 在元素上。

【问题讨论】：

标记似乎是正确的。如果我用 webm jsfiddle.net/35cRY 在 chrome 中测试它。我的问题是你的视频有问题。你是怎么转换的？我有很好的经验：online-convert.com

谢谢！我会试试那个网站。将更新成功/失败:)

无效 - 结果相同。

你能提供一个网址吗？

【参考方案1】：

添加muted 属性。 （Chrome。可能是一些反广告政策。）

（还要确保你没有将<video> 嵌套在<video> 中，这会产生类似的结果。但我赌的是第一个原因。）

【讨论】：

谢谢，遇到了同样的问题，添加静音对我有用。最奇怪的是，视频会在我们 CMS 的预览中播放，但不会在直播网站上播放。