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

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

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

1 个答案: