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

背景： 我正在做一个视频项目，有50多个短视频（10分钟，720p），我想在线展示。我目前的架构是在4x4网格中放置16个视频标记，然后使用JavaScript随机设置它们的加载源，然后单击缩放视频以覆盖整个屏幕，直到再次单击

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

我的解决方案想法： 每个视频有两个分辨率，并使用低分辨率进行网格布局，使用较高分辨率进行单击缩放

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

---

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

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

通常情况下，玩家可以自动选择合适的质量，但如果你愿意，你可以自己管理

如果要使用HLS，可以使用和它的。对于MPEG-DASH，一个好的播放器应该是，然后将其设置为：

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

---

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

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

通常情况下，玩家可以自动选择合适的质量，但如果你愿意，你可以自己管理

如果要使用HLS，可以使用和它的。对于MPEG-DASH，一个好的播放器应该是，然后将其设置为：

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

---

如果您想特别在全屏模式下切换，只需收听播放器上的全屏活动。

谢谢您的回复。我的网络主机（surftown）不提供Node.js，所以我想hls.js是我最好的选择。下面的问题是，是否可以设置一个缓冲策略，使hls.js知道我有16个需要维护的低分辨率视频。我的web主机允许5个并发请求，因此我需要它们在所有视频中循环。@AndreasBurmester这些播放器都不需要服务器端的Node.js。他们都是客户。此外，他们实际上并没有打开连接，而是获取小的分段视频文件，所以并发请求限制不应该是一个问题。对，我感到困惑的是，Shaka的构建和测试环境依赖性很强。先决条件您可以在Linux、Windows或Mac上构建Shaka。要获取源代码并编译库，您需要：Git v1.9+Python v2.7 Java运行时环境v8+NodeJS v6+A本地web服务器，例如Apache注意：需要一个本地web服务器，因为浏览器对来自文件：///URL的应用程序进行了限制。您是否建议使用工具对不同的比特率/分辨率进行编码？现在我在Ubuntu上使用了Handbreak，并更改了每个文件的分辨率（720p、360p、180p）。然而，当我尝试使用Bento4从中生成dash时，只有一些有效，而另一些无效，因为<代码>错误：视频曲目未对齐（“文件2#1”与文件1#1不同）我猜Handbreak没有使文件足够相似？没关系。我发现Bento4自带的编码器解决了这个问题。对于可能在我之后出现的人，关键帧对齐是很重要的。Handbreak尝试智能地选择关键帧，但这不适用于破折号格式。谢谢您的回复。我的网络主机（surftown）不提供Node.js，所以我想hls.js是我最好的选择。下面的问题是，是否可以设置一个缓冲策略，使hls.js知道我有16个需要维护的低分辨率视频。我的web主机允许5个并发请求，因此我需要它们在所有视频中循环。@AndreasBurmester这些播放器都不需要服务器端的Node.js。他们都是客户。此外，他们实际上并没有打开连接，而是获取小的分段视频文件，所以并发请求限制不应该是一个问题。对，我感到困惑的是，Shaka的构建和测试环境依赖性很强。先决条件您可以在Linux、Windows或Mac上构建Shaka。要获取源代码并编译库，您需要：Git v1.9+Python v2.7 Java运行时环境v8+NodeJS v6+A本地web服务器，例如Apache注意：需要一个本地web服务器，因为浏览器对来自文件：///URL的应用程序进行了限制。您是否建议使用工具对不同的比特率/分辨率进行编码？现在我在Ubuntu上使用了Handbreak，并更改了每个文件的分辨率（720p、360p、180p）。然而，当我尝试使用Bento4从中生成dash时，只有一些有效，而另一些无效，因为<代码>错误：视频曲目不可用