如果视频显示失败，如何显示占位符

Question

我尝试使用标签来预览视频的图片，但是如果视频格式不支持或者url没有找到，那是行不通的，那么我们可以使用占位符图片来代替吗？请告诉我一些有效的解决方案。

Thanks/Yang

Answer 1

如果您使用 javascript 控制它，如果是，请使用 "if else" 条件作为 2 个占位符（背景图像），一个将是默认的，这意味着没有预览，第二个将是视频占位符。

Answer 2

您可以等待视频进入就绪状态，例如：

var video = document.getElementById("videoId");

if ( video.readyState === 4 ) {
    // change the img tag z-index with a lower z-index than the video
}

这个 javascript 说当视频完全加载时，它会替换（实际上，它在顶部）覆盖它的图像。在 HTML 中，您放置了一个带有预览图像的 img 标签，直到视频加载完毕，并为 img 和 video 元素创建一个特定的 CSS。将位置设置为绝对或固定或相对位置，并为 img 应用 2 的 z-index，为视频元素应用 1，使图像重叠在视频标签的顶部。在 Javascript 中，当视频完全加载时，您可以更改 img 和视频元素的 CSS，方法是将它们的 z-index 从 2 更改为 1，从 1 更改为 2，或者通过设置 img 显示属性到none，随你喜欢。

希望对您有所帮助！

查看 mozilla 上的文档 https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

如果视频显示失败，如何显示占位符

How to show a placeholder if video display failed

html

video

placeholder