动态更改 HTML 视频流源/质量

Question

背景： 我正在制作一个包含 50 多个短视频（10 分钟，720p）的视频项目，我想在网上展示这些视频。我当前的架构是将 16 个视频标签放置在 4x4 网格中，然后使用 JavaScript 在加载时随机设置它们的源，然后单击缩放视频以覆盖全屏，直到再次单击。

问题： 720p webm 中的每个视频约为 80mb。有 16 个视频，总共 1.3GB，或每分钟 130MB，或每秒 2MB。这是一个荒谬的数据量，我想，也许我错了。每个视频都这么大（80mb）是为了支持缩放全屏功能。

我的解决方案想法： 每个视频有两种分辨率，低分辨率用于网格布局，较高分辨率用于点击缩放。

我的问题：如何使这一切顺利？我可以在背景点击低分辨率视频的位置预加载高分辨率视频吗？并在 CSS 转换中进行转换？或者有更好的方法吗？

第二个问题：如何在线托管？我可以把视频放在 vimeo 上吗？现在我正在使用 wordpress.com 托管。

Answer 1

实现此类目标的常规方法是使用自适应比特率格式对视频进行编码。两种主要格式是 HLS 或 MPEG-DASH。大多数在线编码平台都可以提供这些作为输出。通常你会编码 5-6 种不同的质量（这对使用 wifi 的用户很有帮助，因为带宽可能会不断变化），但你可以轻松地将其编码为两种不同的质量。

通常玩家可以自动选择正确的质量，但如果需要，您可以自行管理。

如果要使用 HLS，可以使用 hls.js 及其 Quality Switch API。对于 MPEG-DASH，一个好的播放器是Shaka Player，然后这样设置：

player.configure({enableAdaption: false});
player.selectVideoTrack(trackId);

如果您想专门切换到全屏，只需监听播放器上的全屏事件即可。