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

【问题标题】：HTML5: Placing a canvas on a video with controlsHTML5：在带有控件的视频上放置画布
【发布时间】：2011-11-22 14:28:55
【问题描述】：

我想在 HTML5 视频上画东西。为此，我试图在 HTML5 视频元素上放置一个画布。

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以捕获画布中的点击事件并计算它们的位置。在此基础上，您可以大致了解目标控件并让视频自行更改。
我的意思是这样的：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：