用HTML5視頻及時移動覆蓋內容

Question

我有一個HTML5視頻，我在頂部放置了元素。

我想讓內容跟隨視頻中的某些對象。 什麼是我這樣做的最佳方式，所以我可以控制CSS頂部和左側屬性（這是我如何看到在視頻頂部移動的內容）。

我想確保內容位置始終與視頻時間保持同步。如果用戶重新啓動視頻或跳到某一點，如果內容知道他們的意圖是好的。

我已經看到了一些這樣的例子，他們使用JSON來控制內容位置以及在什麼時候顯示，隱藏和移動。 我不知道這是如何與視頻播放器和視頻時間掛鉤的。

我一直無法找到任何東西來幫助解釋JSON方法或其他方式。 是否有類似的東西或某人可以創建的示例的演示。

感謝

Answer 1

我可以推薦Popcorn.js與Popcorn Base Plugin，它們共同應該做的這一切結合起來。特別要看看這些examples。

爆米花基地插件是創建自己的爆米花插件的包裝，但它帶有一些已經建成的插件，並且它們都具有完整的關鍵幀動畫。我建議你從「樣式」插件開始，該插件將採用任何現有的DOM元素，並使用視頻及時對其CSS屬性進行動畫處理，包括「頂部」，「左側」等。

爆米花不直接爲所有動畫取一個JSON blob，但它應該足夠簡單，可以遍歷這樣一個對象並對Popcorn的方法進行適當的調用。這兩個項目都有很好的文檔記錄，並有很好的簡單例子

充分披露：我建立了爆米花基地插件，所以我可能有點偏見。