0

我們有6臺攝像機,並從工作室的不同角落錄製了我的樂隊的一些曲目。 主要想法是創建一個交互式視頻,用戶可以使用此錄製的視頻更改視圖。所以,你想看鼓手玩他的相機,並從他的相機開始看,想要另一個?不是問題。但。如果我只是通過click()更改視頻並播放另一個視頻功能,它將始終顯示催眠加載光盤,並讓我等待幾秒鐘。我甚至無法找到我應該使用哪個框架(popcorn.js?)。當然,它將在html5視頻上工作。但是,由於相機的改變,我能否避免這種永久性等待?當然,我們可以預先加載所有6個視頻,但這將會持續下去。也許有人面臨同樣的問題? 我有一個例子向您展示http://sigur-ros.co.uk/kveikurlive360/ 但是,這傢伙是完全瘋 P.S:對不起,我的英語水平,它留下不理想。Multylayer或交互式視頻

回答

0

這是一個非常酷的想法。如果您使用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,這些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 

,當然,你需要實現自己的視頻控件進行暫停/播放,尋求和音量。祝你好運,請讓我們知道它是如何運作的。

+0

是的,我也想過這個想法。看起來這是唯一的解決方案。我會在幾天內嘗試它,並展示它的工作原理!謝謝你的幫助! –

+0

這是怎麼回事? –