html5 video-tag：视频大小/带有人工制品的视频/改用 javascript 视频播放器？

Question

我正在尝试通过 html5 标签将视频嵌入到响应式网页中。我的问题是视频的宽度范围从 390 像素（小型移动设备）到 4096 像素（4K 显示器，全屏模式），视频标签似乎不支持多种分辨率的多个来源。我决定为所有屏幕尺寸使用高清分辨率（宽度 1960 像素），但这会导致 Firefox 边缘出现强烈的伪影，例如当视频嵌入到 4K 显示器的页面中时，即使宽度为 780 像素.

有什么想法吗？有没有 javascript-videoplayer 可以解决这个问题？

Answer 1

大多数 HTML5 视频播放器将支持自适应比特率流 (ABR) 流。

使用 ABR，您可以在服务器上创建视频的多个比特率版本，每个版本都分成块。他们的播放器根据多种因素决定从哪个分辨率下载下一个视频块，通常包括网络条件和设备显示大小和功能。

这里有更多关于 ABR 的信息：

此外，HTML5 视频播放器通常也提供适应不同宽度容器的方法。

以VideoJS为例，它提供了流体模式和填充模式。 Fluid 将保持视频大小以符合给定的宽高比，并填充扩展视频以填充容器。详情请看这里：

• https://docs.videojs.com/tutorial-layout.html

启用选项非常简单 - 例如，根据上面 link 中的示例，下面设置纵横比为 1:1 的流体模式和响应控件：

var player = videojs('vid2');

//Set fluid mode
player.fluid(true);

//Set aspect ratio - 1:1 is square in this example
player.aspectRatio('1:1');

//Set UI to be responsive
player.responsive(true);

以上 link 包括有关使视频控件也具有响应性的说明，这样它们看起来就不会与显示尺寸不成比例。

播放器自动调整大小和播放器为当前尺寸和网络选择最佳分辨率的组合应该可以让您在不同尺寸的显示器上获得最佳质量，当然，前提是您有分辨率可用。