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的用户有所帮助，因为在wifi中带宽可能会不断变化），但是您可以轻松地将其编码为两种不同的质量。

通常，玩家可以自动选择合适的质量，但是如果需要，您可以自己管理。

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

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

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