html - 不同分辨率的视频和视频预览图像(海报)

Question

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

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

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

---

<video id="mockupVideo" width="100%" height="100%" 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/test@2x.jpg
• images/test@3x.jpg
• images/test@4x.jpg

还有这些视频文件:

• videos/test.mp4
• videos/test@2x.mp4
• videos/test@3x.mp4
• videos/test@4x.mp4

---

对于图像，我会使用以下代码:

<img srcset="images/test.jpg,
             images/test@2x.jpg 2x,
             images/test@3x.jpg 3x,
             images/test@4x.jpg 4x"
     src="images/test.jpg">

这将以与视频类似的方式实现。

Answer 1

看起来你可以在 source 元素上使用 media，像这样:https://css-tricks.com/video-source-by-screen-size/ , Responsive Html5 Video Resolution