html5視頻交互對象

有誰知道html5視頻是否允許連接到時間軸的按鈕，菜單等對象？html5視頻交互對象

Youtube Flash播放器做到這一點：在特定時刻，在視頻上顯示一個對象（橫幅，鏈接，評論）以定義秒。

感謝

2012-01-25 Mike

HTML5視頻標籤播放視頻，但它也有很多功能，允許您在視頻頂部添加一層交互性。 Popcorn.js可以做到這一點，H5P還有一個交互式視頻庫，您可以在視頻時間線上添加額外的文本信息，圖像和測驗。 – Almonds

是的，沒有，這是可能的使用HTML5視頻對象但它來創建非常互動基於視頻的演示需要的不僅僅是視頻對象本身。您可以將視頻嵌套到畫布對象中，然後與實際的視頻圖像幀混合在一起，您可以在視頻對象本身之上疊加任何可視html元素，然後爲這些元素設置動畫，使用按鈕控制視頻播放，單擊事件等。甚至讓視頻對象用基於時間的偵聽器控制頁面的其餘部分。

Popcorn.js真的很好，很容易學習，可以讓你做所有你提到的。 http://popcornjs.org

http://popcornjs.org/demos

來源

2012-01-25 13:04:42 Alex

我猜畫布內的視頻是最完整的解決方案。 – Mike

是的，它是一個比dom更受控制的環境，它通常不那麼耗費資源，因爲瀏覽器呈現的dom元素略有不同，並且受到很多全局偵聽器和事件的影響。儘管通過dom可以更容易地實現。 – Alex

這不是HTML5視頻標準的一部分，但它很容易被一些腳本連接最多的progress事件手動實現。通過查看視頻對象的currentTime屬性，您可以決定何時顯示/隱藏其他元素。

例如表示成視頻上1和2秒之間的視頻頂部的元素：

<video id="v">...</div> 
<div id="overlay" style="position: relative; top: -80px;">HELLO</div> 

<script type="text/javascript"> 
    var overlay= document.getElementById('overlay'); 
    var video= document.getElementById('v'); 
    video.addEventListener('progress', function() { 
     var show= video.currentTime>=1 && video.currentTime<2; 
     overlay.style.visibility= show? 'visible' : 'hidden'; 
    }, false); 
</script>

來源

2012-01-25 10:49:46 bobince

此外，如果它只是靜態文本WebVTT（以及其中的一個多邊填充），則可以使用。 –

X2TV（www.x2.tv）具有拖放工作室，您可以在HTML5層內覆蓋圖標和其他內容。

來源

2012-10-17 21:17:16

如果您願意使用更通用的框架https://github.com/nise/vi-two可能會對您有所幫助。

來源

2015-10-19 08:27:32 user3072843

html5視頻交互對象

回答

相關問題