不同分辨率的视频和视频预览图（海报）

Posted 2023-05-07

【中文标题】不同分辨率的视频和视频预览图（海报）

【英文标题】：Video and video preview image (poster) in different resolutions

【发布时间】：2019-12-04 19:54:19

【问题描述】：

我目前提供 4 种分辨率（@1x、@2x、@3x 和 @4x）的所有图像，以便在任何显示器上清晰显示图像。但现在我有一个问题，我在网站上也有一个视频，我想提供 4 种分辨率的视频及其预览图像（所谓的海报）。问题是如何做到这一点，因为视频标签没有自己的srcset，预览图像也没有。

我还没有找到实现这一点的内置方法，如果可能的话，我想避免使用基于 JS 的解决方案。

也许有人可以提供一个聪明的解决方案。

---

<video id="mockupVideo"   playsinline preload="auto"
       poster="images/test.jpg">
    <source src="videos/test.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

我有以下图片文件：

images/test.jpg images/[e-mail] images/[e-mail] images/[e-mail]

还有这些视频文件：

videos/test.mp4 videos/[e-mail]4 videos/[e-mail]4 videos/[e-mail]4

---

对于图片，我会使用以下代码：

<img srcset="images/test.jpg,
             images/[e-mail] 2x,
             images/[e-mail] 3x,
             images/[e-mail] 4x"
     src="images/test.jpg">

视频的实现方式与此类似。

【参考方案1】：

看起来您可以在source 元素上使用media，例如：https://css-tricks.com/video-source-by-screen-size/、Responsive html5 Video Resolution

【讨论】：

不过，这只能帮助视频本身，而不是海报。

@Sam94，当我用谷歌搜索你的主题时，我发现人们在使用与你的问题无关的海报时遇到了很多麻烦，所以（如果你想避免这些麻烦）我认为最好的事情是你可以做的就是使用一个自定义元素来模仿海报（***.com/questions/10826784）。如果您坚持使用海报，那么您可以尝试根本不定义海报，以便浏览器显示视频的第一帧。而且由于您无法将特定帧定义为预览，因此您必须将所需的预览设置为第一帧。最后一个听起来很疯狂

看起来，视频元素的媒体查询已被删除，因此这不再是一种工作方法。

@Sam94，哇，真的吗？我可以请我有这个吗？无论如何，写一个 JS fallback 会很容易

它甚至在您的 css-tricks 文章中说明了以下来源 (lists.w3.org/Archives/Public/public-whatwg-archive/2012May/…) 可追溯到 2012 年。与此同时，这似乎已经进入了浏览器。我机器上的 Safari 和 Chrome 至少不用担心，它们总是采用相同的（第一个）来源。