HTML5：在帶有控件的視頻上放置畫布

Question

我想繪製HTML5視頻上的東西。爲此，我試圖在HTML5視頻元素上放置一個畫布。

但是，當我將畫布放在視頻元素上時，視頻控件無法正常工作時出現問題。由於畫布獲取所有鼠標懸停和點擊事件。有沒有辦法將事件委託給視頻控件或在其他地方顯示控件？

任何幫助/想法都會很棒。

Answer 1

你應該做的就是實現自己的控件（或使用現有的設置，如videojs）
你可以閱讀我的回答這個問題：Html5 video overlay architecture

Answer 2

您可以捕獲畫布中的點擊事件並計算它們的位置。基於此，您可以近似確定哪些控件有針對性，並使視頻改變您的自我。
我的意思是這樣的：

canvas.onclick = function(e){ 
    if(isOverPauseBtn(e)) 
     video.pause(); 
    //.. and so on 
}