HTML5：在带有控件的视频上放置画布

Question

我想在HTML5视频上绘制内容。为此，我试图在HTML5视频元素上放置画布。

但是当我将画布放在视频元素上时视频控件不起作用时会出现问题。由于canvas获得了所有鼠标悬停和点击事件。有没有办法将事件委托给视频控件或在其他地方显示控件？

任何帮助/想法都会很棒。

Answer 1

您应该做的是实施您自己的控件（或使用现有的集合，例如videojs）
您可以阅读我对此问题的回答：Html5 video overlay architecture

Answer 2

您可以捕获画布中的点击事件并计算其位置。在此基础上，您可以估算出哪个控件被定位，并使视频改变您的自我 我的意思是这样的：

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

Answer 3

增加画布的z索引。 z-index=10 将视频放在画布下。 画布的高度=整个视频的高度-视频控件的高度。

您只能使用画布覆盖视频部分，如果将​​鼠标悬停在画布的底部，则会获得控件