我们有 6 台摄像机，并从工作室的不同角落录制了我乐队的一些曲目。 主要思想是创建一个交互式视频，用户可以使用此录制的视频更改视图。所以，你想看鼓手演奏转动他的相机并从他的相机开始观看，想要另一个吗？不是问题。但。如果我只是通过 click() 更改视频并播放另一个视频功能，它总是会显示一个催眠加载光盘并让我等待几秒钟。我什至找不到我应该使用哪个框架（popcorn.js？）。当然，它适用于 html5 视频。但是我可以避免由于更换相机而导致的这种永久等待吗？当然，我们可以预加载所有 6 个视频，但这需要很长时间。也许有人面临同样的问题？ 我只有一个例子给你看http://sigur-ros.co.uk/kveikurlive360/ 但这家伙完全疯了 P.S.：对不起我的英语，还有很多不足之处。
【问题讨论】：
标签： javascript html5-video interactive user-interaction popcornjs
这是一个非常酷的想法。如果你使用6个不同的视频，恐怕无法保证切换时不会有任何延迟。由于您永远无法提前知道用户何时会点击切换，因此您需要随时准备好所有 6 个视频，并且必须一起完全下载。即使您这样做了，当浏览器赶上解码下一个视频时，也可能会有短暂但明显的延迟。
所以我建议将所有 6 个观点合并到一个视频中。您可以通过将视频放置在带有“溢出：隐藏”的 div 中来裁剪视频，然后使用 CSS 转换在该框内移动视频。您可能不得不在分辨率上做出妥协，并且可能仍然有一些预先缓冲，但无论如何，所有 6 个摄像机角度都将保持完美同步。他们都将共享一个音轨。
假设您以标准 720p 拍摄所有视频。将每一个缩小到 640x540（是的，这会弄乱你的纵横比，但我们稍后会解决这个问题）。将所有六个视频组合成一个 3x2 网格，这将为您提供一个 1920x1080 视频。然后，将其放入一些大致如下所示的 HTML 中：
<div id="video" style="width: 1280px; height: 720px; overflow: hidden">
<video src="video.webm" style="width: 3840px; height: 1440px;"></video>
</div>
这将缩放您的视频备份并对其进行裁剪，以便以原始大小和纵横比显示您的第一台相机，分辨率会有所损失，但还不错。这仍然是一个相当大的文件，您可能需要尝试一些较小的大小以适应速度较慢的 GPU，这些 GPU 可能难以扩展这么大，尤其是在移动设备上。
Javascript 可能看起来像这样：
var video = document.getElementById('video');
function switchVideo(n) {
var x, y,
n = n % 6; //0 <= n <= 5
x = n % 3;
y = Math.floor(n / 3);
//todo: don't forget to copy for vendor prefixed versions of 'transform'
video.style.transform = 'translate(' + (-1280 * x) + 'px, ' + (-720 * y) + 'px)';
}
//todo: call switchVideo from the appropriate buttons
当然，您还需要为暂停/播放、搜索和音量实现自己的视频控件。祝你好运，请告诉我们结果如何。
【讨论】：