Question

我尝试使用标签来预览视频图片，但如果找不到支持或网址的视频格式，它将无法使用，那么我们是否可以使用占位符图片来替换它？请告诉我一些有效的解决方案。

感谢/羊

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应用z-index为2，为视频元素应用1，使图像重叠在视频标记的顶部。在Javascript中，当视频完全加载时，您可以通过将其z-index从2更改为1和从1更改为2来更改img和视频元素的CSS，或者通过将img display属性设置为none，即可。你喜欢的。

希望这有帮助！

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

上的文档

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

2 个答案: