即时更改 HTML 视频流 source/quality
Changing HTML video stream source/quality on the fly
背景：
我正在从事一个视频项目，其中包含 50 多个短视频（10 分钟，720p），我想在线展示这些视频。我当前的架构是将 16 个视频标签放置在一个 4x4 网格中，然后使用 JavaScript 随机设置它们的加载源，然后单击缩放视频以覆盖整个屏幕，直到再次单击。
问题：
720p webm 中的每个视频大约为 80mb。有 16 个视频，总共 1.3GB，或每分钟 130MB，或每秒 2MB。这是一个荒谬的数据量，我想，也许我错了。每个视频都这么大（80mb）是为了支持缩放全屏功能。
我的解决方案：
每个视频有两种分辨率，网格布局使用低分辨率，点击缩放使用高分辨率。
我的问题：如何让它顺利？我可以在后台点击低分辨率视频的位置预加载高分辨率视频吗？并在 CSS 转换中进行转换？或者有更好的方法吗？
第二个问题：如何在线托管这个？我可以把视频放在 vimeo 上吗？现在我正在使用 wordpress.com 托管。
实现类似目标的正常方法是使用自适应比特率格式对视频进行编码。两种主要格式是 HLS 或 MPEG-DASH。大多数在线编码平台都可以提供这些作为输出。通常你会编码 5-6 种不同的质量（这对使用 wifi 的用户有帮助，带宽可能会不断变化）但你可以轻松地将它编码为两种不同的质量。
通常情况下，玩家可以 select 自动设置正确的质量，但如果需要，您可以自行管理。
如果你打算使用HLS，你可以使用hls.js and its Quality Switch API. For MPEG-DASH, a good player to use would be Shaka Player然后这样设置：
player.configure({enableAdaption: false});
player.selectVideoTrack(trackId);
如果你想专门切换到全屏，只需要监听播放器上的全屏事件即可。
背景： 我正在从事一个视频项目，其中包含 50 多个短视频（10 分钟，720p），我想在线展示这些视频。我当前的架构是将 16 个视频标签放置在一个 4x4 网格中，然后使用 JavaScript 随机设置它们的加载源，然后单击缩放视频以覆盖整个屏幕，直到再次单击。
问题： 720p webm 中的每个视频大约为 80mb。有 16 个视频，总共 1.3GB，或每分钟 130MB，或每秒 2MB。这是一个荒谬的数据量，我想，也许我错了。每个视频都这么大（80mb）是为了支持缩放全屏功能。
我的解决方案： 每个视频有两种分辨率，网格布局使用低分辨率，点击缩放使用高分辨率。
我的问题：如何让它顺利？我可以在后台点击低分辨率视频的位置预加载高分辨率视频吗？并在 CSS 转换中进行转换？或者有更好的方法吗？
第二个问题：如何在线托管这个？我可以把视频放在 vimeo 上吗？现在我正在使用 wordpress.com 托管。
实现类似目标的正常方法是使用自适应比特率格式对视频进行编码。两种主要格式是 HLS 或 MPEG-DASH。大多数在线编码平台都可以提供这些作为输出。通常你会编码 5-6 种不同的质量（这对使用 wifi 的用户有帮助，带宽可能会不断变化）但你可以轻松地将它编码为两种不同的质量。
通常情况下，玩家可以 select 自动设置正确的质量，但如果需要，您可以自行管理。
如果你打算使用HLS，你可以使用hls.js and its Quality Switch API. For MPEG-DASH, a good player to use would be Shaka Player然后这样设置：
player.configure({enableAdaption: false});
player.selectVideoTrack(trackId);
如果你想专门切换到全屏，只需要监听播放器上的全屏事件即可。