video-streaming - 嵌入多个非常大的视频文件

Question

对于一个网络应用程序，基本上是一个艺术项目，我想做一件事。

一组固定的8个 24 小时长的视频将同时观看。其中 7 个为缩略图大小，一个为几乎全屏。用户可以将全屏视频切换为另一个。24 小时后，它们循环播放。

每个视频都与一天中的时间同步，不能跳过，因此如果您在 10:09:08 访问网站，所有视频也应该在 10:09:08 开始。所以没有停顿或寻求。

由于视频文件的大小很大，我不确定哪种方式是处理这个项目的好方法。我认为，由于加载时间的原因，仅将它们放在<video>标签中不会带来良好的用户体验。

开关动作的快速反应是关键；立即切换或尽可能短的加载时间。7个小视频的质量可以降低，但大的应该尽可能好。此外，它应该是移动和桌面友好的。

1. 我需要什么样的服务- 谷歌云存储对于这些视频文件是否智能？

2. DASH.js的Adaptive Streaming似乎是适用于所有桌面的好解决方案，但它不适用于移动浏览器。有现成的解决方案吗？我是否应该为此使用服务（可以选择扔一点钱）？或者 youtube API，甚至普通的 youtube iframe 可以处理这样的事情吗？这感觉就像一个可怕的黑客攻击。

非常感谢您的任何意见！

标签： video-streaminghtml5-videomedia-playerdash.js

Answer 1

您应该使用 HLS 格式 - 浏览器只会按需加载您需要的实际文件。具体来说，它允许您将 m3u8 文件中的时间戳指定为时间戳，因此查找应该更容易。HLS 还将实际的视频片段分解成更小的块，您可以存储在 S3/云存储中。hls.js是适用于桌面 + 移动设备的外部库的一个选项，尽管能够在页面上组合视频而不是自动全屏可能取决于移动设备。我认为您应该为缩略图做的是创建 1 个将这些流平铺的视频，然后使用元素在屏幕上排列这些流。然后，您可以按需加载不同的大型视频流（也可以是 HLS - 如果您想花哨的话，甚至可以在同一个 m3u8 中使用不同的级别）。