全屏的 HTML5 横幅视频大小

【问题标题】：HTML5 Banner Video sizing for fullscreen全屏的 HTML5 横幅视频大小
【发布时间】：2014-06-02 17:26:20
【问题描述】：

我有一个关于以下方面的问题：

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

问题：是否可以让视频容器保持在 300x250 像素，而分配的源文件尺寸要大得多，这样在桌面设备上查看时会很清晰？有没有办法通过检测方法在移动设备上观看时提供较小的视频？

谢谢！

【问题讨论】：

标签： html video fullscreen banner videoquality

【解决方案1】：

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

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

<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>

【讨论】：