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

Posted

技术标签:

【中文标题】HTML5:在带有控件的视频上放置画布【英文标题】:HTML5: Placing a canvas on a video with controls 【发布时间】: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 将视频放在画布下。 画布高度 = 整个视频的高度 - 视频控件的高度。

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

【讨论】:

以上是关于HTML5:在带有控件的视频上放置画布的主要内容,如果未能解决你的问题,请参考以下文章

在子控件后面放置一个装饰层

在 svg/vml 或画布形状周围放置阴影

如何在 html5 中制作透明画布?

HTML5 Javascript:将文本保存到画布上?

直播 HTML5 视频绘制到画布不工作

html5:在画布内显示视频