Question

我对以下问题有疑问：

我的任务是创建一个包含视频的HTML5横幅。视频容器的大小设置为300x250，并启用了控件。分配给它的源也是300x250，但是当桌面上的用户在桌面上全屏观看视频时，由于它延伸到用户屏幕，因此质量显然相当糟糕。

问题：是否可以让视频容器保持在300x250px，而分配的源文件是一个更大的尺寸，以便在桌面设备上查看时会很清晰？使用检测方法在移动设备上观看时，有没有办法提供较小的视频？

谢谢！

Answer 1

容器尺寸（width和height属性）和视频尺寸（videoWidth和videoHeight属性）可能不匹配。

您可以使用source属性将媒体查询应用于media元素：

<video width="300" height="250" controls>
  <source src="small.mp4" type="video/mp4" media="screen and (max-width: 480px)">
  <source src="big.mp4" type="video/mp4">
</video>

HTML5横幅视频大小调整全屏

1 个答案: