Question

我们有6台摄像机，并从录音室的不同角落录制了我乐队的一些曲目。主要想法是创建一个交互式视频，用户可以使用此录制的视频更改视图。所以，你想观看鼓手演奏他的相机，并从他的相机开始观看，想要另一个吗？不是问题。但。如果我只是通过click（）更改视频并播放另一个视频功能，它将始终显示催眠加载光盘并让我等待几秒钟。我甚至无法找到我应该使用哪个帧（popcorn.js？）。当然它可以在html5视频上运行。但是，由于相机的更换，我可以避免这种永久等待吗？当然我们可以预加载所有6个视频，但这将需要永远。也许有人面临同样的问题？我只有一个例子向您展示http://sigur-ros.co.uk/kveikurlive360/ 但这些家伙完全是疯了 P.S。：对不起我的英语，还有很多不足之处。

Answer 1

这是一个非常酷的主意。如果您使用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>

这将缩放您的视频并将其裁剪为以原始尺寸和宽高比显示您的第一台相机，但有一点分辨率损失但不是太糟糕。这仍然是一个非常庞大的文件，你可能需要尝试一些较小的尺寸来适应速度较慢的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

当然，您需要实现自己的视频控件，以暂停/播放，搜索和音量。祝你好运，请告诉我们它是如何运作的。

多层或交互式视频

1 个答案: