Javascript 多层或交互式视频

我们有6台摄像机，从录音室的不同角落录下了我乐队的一些曲目。 其主要思想是创建一个交互式视频，用户可以使用此录制的视频更改视图。所以，你们想看鼓手演奏，转动他的相机，从他的相机开始观看，想要另一个吗？没问题。但是如果我只是通过click（）更改视频并播放另一个视频功能，它将始终显示一张催眠加载光盘，并让我等待几秒钟。我甚至找不到我应该使用哪一个框架（popcorn.js？）。当然，它将在html5视频上工作。但是我可以避免由于更换相机而造成的这种永久性等待吗？当然，我们可以预装所有的6个视频，但这将需要永远。也许有人也面临同样的问题？ 我只有一个例子给大家看 但这家伙完全疯了

---

旁白：对不起，我的英语还有很多不好的地方。

这真是个好主意。如果您使用6个不同的视频，恐怕无法保证切换时不会有任何延迟。因为你永远不会事先知道用户何时点击切换，所以你需要在任何时候准备好所有6个视频，并且它们必须一起完全下载。即使您这样做了，当浏览器赶上解码下一个视频时，可能会有短暂但明显的延迟

因此，我建议将所有6个观点合并到一个视频中。您可以通过将视频放在带有“overflow:hidden”的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>

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

这会将你的视频放大并裁剪，使你的第一台相机恢复到原来的大小和纵横比，虽然会有一点分辨率损失，但不会太糟糕。这仍然是一个相当大的文件，您可能需要尝试一些较小的大小，以适应可能难以扩展到如此大的速度较慢的GPU，尤其是在移动设备上

Javascript可能如下所示：

<div id="video" style="width: 1280px; height: 720px; overflow: hidden">
    <video src="video.webm" style="width: 3840px; height: 1440px;"></video>
</div>

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

var video=document.getElementById（'video'）；
功能切换视频（n）{
变量x，y，
n=n%6；//0是的，我也考虑过这个主意。看来这是解决这个问题的唯一好办法。过几天我会试试看，看看它是如何工作的！谢谢你的帮助！