Многослойное или интерактивное видео

Question

У нас есть 6 камер и записаны некоторые треки моей группы из разных уголков студии. Основная идея - создать интерактивное видео, в котором пользователь может изменить вид с помощью этих записанных видео. Итак, ты хочешь посмотреть, как играет барабанщик, поворачивает свою камеру и начинает смотреть с его камеры, хочет другого? не проблема. Но. Если я просто изменю видео с помощью кнопки() и воспроизведу другую функцию видео, она всегда будет показывать гипнотический загрузочный диск и заставит меня ждать несколько секунд. Я даже не могу найти, какую рамку я должен использовать (popcorn.js?). Конечно, он будет работать на видео html5. Но могу ли я избежать этого постоянного ожидания из-за смены камер? Конечно, мы можем предварительно загрузить все 6 видеороликов, но это будет продолжаться вечно. Может быть, кто-то сталкивается с той же проблемой? У меня есть только один пример, чтобы показать вам http://sigur-ros.co.uk/kveikurlive360/ Но эти ребята абсолютно сумасшедшие P.S .: Извините за мой английский, это оставляет желать лучшего.

Answer 1

Это действительно крутая идея. Если вы используете 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> 

Это будет масштабировать видео обратно и обрезать его, чтобы показать свою первую камеру обратно в исходный размер и пропорции, с немного потери разрешения но не так уж плохо. Это по-прежнему довольно большой файл, и вам, возможно, придется экспериментировать с меньшими размерами, чтобы разместить более медленные графические процессоры, которые могут помешать масштабированию, особенно на мобильных устройствах.

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 

И, конечно же, вам нужно реализовать свои собственные элементы управления видео для паузы/воспроизведения, поиск и объем. Удачи, и, пожалуйста, сообщите нам, как это работает.