javascript - 动态更改 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);

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