Multylayer or interactive video

Question

We've got 6 cameras and recorded some tracks of my band from different corners of the studio. The main idea is to create an interactive video, where user could change the view with this recorded videos. So, u want to watch drummer playing turn his camera and start watch from his camera, want another? not a problem. But. If I will just change videos through the click() and play another video function it'll always show a hypnotic loading disc and make me wait some seconds. I can't even find which frame should i use too (popcorn.js?). Of course it will work on html5 video. But can i avoid this permanent waiting due to the change of cameras ? Certainly we can preload all the 6 videos, but this will take forever. Maybe someone face the same problem? I have just one example to show you http://sigur-ros.co.uk/kveikurlive360/ But this guys are totally insane P.S.: sorry for my English, it leaves much to be desired.

Answer 1

This is a really cool idea. If you use 6 different videos, I'm afraid there's no way to guarantee there won't be any delay when switching. Since you never know in advance when the user is going to click to switch, you need to have all 6 videos ready to go at any point, and they all have to be fully downloaded together. Even if you do, there may be a short but noticeable delay as the browser catches up on decoding the next video.

So what I suggest is combining all 6 points of view into a single video. You can crop the video by placing it inside a div with "overflow: hidden", and then shift the video around inside that box with CSS transforms. You may have to compromise on resolution, and there may still be some buffering up front, but no matter what, all 6 camera angles will stay perfectly in sync. And they'll all share a single audio track.

So, let's say you shoot all your videos at standard 720p. Scale each one down to 640x540 (yes, this will mess up your aspect ratio, but we'll fix that later). Combine all six videos into a 3x2 grid, which will get you a single 1920x1080 video. Then, throw it in some HTML that looks roughly like this:

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

That will scale your video back up and crop it to show your first camera back at original size and aspect ratio, with a little bit of resolution loss but not too bad. This is still a pretty huge file, and you may need to experiment with some smaller sizes to accommodate slower GPUs that might struggle to scale that big, especially on mobile.

Javascript might look something like this:

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

And, of course, you'll need to implement your own video controls for pause/play, seek and volume. Good luck, and please let us know how it works out.