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

Posted 2023-05-07

【中文标题】如何将 CSS 媒体查询应用于视频海报？

【英文标题】：How to apply css media queries to video poster?

【发布时间】：2019-07-04 21:26:12

【问题描述】：

感谢this answer，我在我的css 中使用video[poster]object-fit:fill 以避免html5 视频中的海报图像失真。由于poster 看起来很时尚，我还想使用 css 为视频显示不同的海报，具体取决于屏幕尺寸（移动设备或桌面）。但是video[poster]background-image:url(poster.jpg) 没有产生任何结果，想必poster 不是背景。于是我尝试适配some javascript found here，如下：

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)

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

【问题讨论】：

引用答案中的另一个解决方案 - 使用透明 gif 作为海报，然后媒体查询背景图像到视频 - 在 IE-11 中失败（没有海报出现）

【参考方案1】：

删除myFunction(x) 中的x。

API 已更改，现在它将成为您将在此处收到的事件，而在以前的实现中，它确实是 MediaQueryList。

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

function myFunction(evt) 
  console.log(evt && evt.toString());
  if (x.matches)  // If media query matches
    document.getElementById("video").poster = "https://lorempixel.com/200/400";
   else 
    document.getElementById("video").poster = "https://lorempixel.com/400/200";
  

var x = window.matchMedia("(max-width: 500px)")
myFunction() // Call listener function at run time
x.addListener(myFunction)

.as-console-wrappermax-height:20px!important

<video id="video" controls></video>

【讨论】：

谢谢！一个问题... .as-console-wrappermax-height:20px!important 是什么？它不在其他任何地方的代码中，也不在我的 videojs 播放器 css 中。只是好奇。

这是 StackSnippet 控制台的 CSS，否则它会占用整个 sn-p。直接忽略它。