我們有6臺攝像機,並從工作室的不同角落錄製了我的樂隊的一些曲目。 主要想法是創建一個交互式視頻,用戶可以使用此錄製的視頻更改視圖。所以,你想看鼓手玩他的相機,並從他的相機開始看,想要另一個?不是問題。但。如果我只是通過click()更改視頻並播放另一個視頻功能,它將始終顯示催眠加載光盤,並讓我等待幾秒鐘。我甚至無法找到我應該使用哪個框架(popcorn.js?)。當然,它將在html5視頻上工作。但是,由於相機的改變,我能否避免這種永久性等待?當然,我們可以預先加載所有6個視頻,但這將會持續下去。也許有人面臨同樣的問題? 我有一個例子向您展示http://sigur-ros.co.uk/kveikurlive360/ 但是,這傢伙是完全瘋 P.S:對不起,我的英語水平,它留下不理想。Multylayer或交互式視頻
0
A
回答
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
,當然,你需要實現自己的視頻控件進行暫停/播放,尋求和音量。祝你好運,請讓我們知道它是如何運作的。
相關問題
- 1. html5視頻交互對象
- 2. 最佳Flash音頻/視頻+交互式服務器?
- 3. 可以包含交互式目錄的視頻格式?
- 4. flv視頻播放後的Flash交互
- 5. 在iOS中使用手指手勢進行交互式視頻
- 6. 正在處理中的交互式視頻播放器
- 7. 對於YouTube視頻,如何自動顯示交互式抄本?
- 8. 如何在jwplayer中製作交互式視頻
- 9. 什麼編程語言被指示產生交互式視頻?
- 10. 交互式多角形(縮放+平底鍋)視頻播放器
- 11. coursor交互式360視頻/圖像背景html5 bootstrap
- 12. 如何使用HTML5在網頁上製作交互式視頻?
- 13. 如何在three.js中製作交互式視頻進度條?
- 14. FLASH上交互式視頻的設置是什麼?
- 15. 如何爲視頻創建交互式標題?
- 16. 爲YouTube視頻獲取交互式腳本
- 17. 放置在交互式pdf中的循環視頻文件
- 18. 使用PyQT/OpenCV交互式電影/視頻處理
- 19. 用於networkX交互式可視化的python庫軟件包或交互式工具
- 20. 交互式數據可視化 - Python
- 21. matplotlib - 交互式選擇點或位置?
- 22. 交互式圖例onclick或mouseover - D3js
- 23. 交互式php
- 24. 交互式ImageViews
- 25. 交互式Antlr
- 26. 交互式iframe
- 27. 交互式Python
- 28. 在iPhone上播放全屏視頻沒有任何用戶控制或交互?
- 29. 帶html5的互動視頻
- 30. iOS:交互式UIImageView
是的,我也想過這個想法。看起來這是唯一的解決方案。我會在幾天內嘗試它,並展示它的工作原理!謝謝你的幫助! –
這是怎麼回事? –