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

Question

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

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

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

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

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

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

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

非常感谢您的任何意见！

Answer 1

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