视频海报图像不起作用

Posted 2023-05-07

【中文标题】视频海报图像不起作用

【英文标题】：Video poster image not working

【发布时间】：2015-04-11 01:24:42

【问题描述】：

使用本视频背景js：http://fiddle.jshell.net/mgmilcher/8R7Xx/

但是，如果浏览器不播放视频（即移动），则海报图像不会显示，只会显示一个空的黑框。如果我从海报中删除隐藏类并在此处注释掉 css：

.no-video .video-container video,
.touch .video-container video 
  /*display: none;*/

它会显示在视频框下方，然后跳转以填充该区域，就像您滚动时一样。谁能指出我正确的方向以使海报图像正常工作，使其默认显示为移动设备和不受支持的浏览器上的视频？

【问题讨论】：

jsfiddle 上的代码太多了。你能把它减少到解释你的问题所需的最低限度吗？

另外，不清楚你为什么不只是使用视频元素的海报属性。

问题是移动设备只是在视频应该出现的地方显示一个黑框。我想真正的问题是移动设备的后备图像

原来是使用 .hidden visibility: hidden 而不是 display: none;

【参考方案1】：

原来它与使用 .hidden visibility: hidden 而不是 display: none 的引导程序发生冲突；