0

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

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

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

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

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

4

1 回答 1

3

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

通常玩家可以自动选择正确的质量，但如果你愿意，你可以自己管理。

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

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

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

于 2018-10-05T20:30:22.273 回答