Javascript 如何将css媒体查询应用于视频海报？

多亏了，我在css中使用了

video[poster]{object-fit:fill}

，以避免html5视频中的海报图像失真。由于

poster

似乎可以设置样式，因此我还希望根据屏幕大小（移动或桌面）使用css为视频显示不同的海报。但是

video[poster]{background image:url（poster.jpg）

不会产生任何结果，大概

poster

不是背景。因此我尝试了如下调整：

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.getElementById("video").poster = "poster1.jpg";
  } else {
    document.getElementById("video").poster = "poster2.jpg";
  }
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction)

---

它也不起作用，但可能只是缺少了一些小东西（即使javascript验证失败），有人知道如何将媒体查询应用到poster属性吗？

删除

myFunction（x）

中的

x

API已经更改，现在您将在这里收到一个事件，而在以前的实现中，它实际上是MediaQueryList

只需保留对MediaQueryList的引用，就可以了

函数myFunction（evt）{
log（evt&&evt.toString（））；
if（x.matches）{//if媒体查询匹配
document.getElementById（“视频”）.poster=”https://lorempixel.com/200/400";
}否则{
document.getElementById（“视频”）.poster=”https://lorempixel.com/400/200";
}
}
var x=window.matchMedia（（最大宽度：500px））
myFunction（）//在运行时调用侦听器函数
x、 addListener（myFunction）

.as控制台包装{最大高度：20px！重要}

---

引用答案中的另一个解决方案-使用透明gif作为海报，然后媒体查询背景图像到视频-在IE-11中失败（没有海报出现）谢谢！一个问题…什么是。作为控制台包装{最大高度：20px！重要}？它不在其他地方的代码中，也不在我的videojs播放器css中。只是好奇。这是StackSnippet控制台的css，否则它会占用整个代码段。忽略它即可。