显示在视频元素顶部的动态叠加层

Question

我只是网络开发的初学者，但我的情况是：我有一个 <video> 元素 在我的页面上，该页面正在通过 WebRTC 流式传输视频。我想显示本地位图（光标） 在任意位置，覆盖在该元素之上。

我使用 this sample 作为这个实验的基础。因此，页面右侧的视频正在接收流。我想在该元素上显示本地光标。

我看过几个覆盖示例，但还没有看到动态更新覆盖的方法。

如有任何建议或提示，我们将不胜感激。

编辑：光标将是通过 WebRTC 数据通道从远程系统发送的位图，代表远程用户光标，我想在本地浏览器上本地显示它。

Answer 1

3/31/21 根据评论更新：

这个 SO 答案提供了一种方法的工作演示 creating virtual mousepad in jquery with click and hover events

请注意单击该示例以查看实际效果。

这里的区别是不需要鼠标垫。相反，如前所述，可以输入动态位置数据。请注意，它使用的是 jQuery，尽管使用 vanilla js 也可以实现同样的效果。

---

“我想在该元素上显示本地光标。”你能详细说明一下你的意思吗？
您是要显示使用脚本动态更新的人造鼠标指针图标吗？
用例可以帮助其他人了解您正在尝试做什么以更好地提供帮助。例如，如果它用于查看计算机屏幕的远程视频并通过带外数据通道模拟鼠标光标，则对象指向鼠标指针的透明图像并具有“位置”属性 设置为“绝对”并动态更新“顶部”和“左侧”位置应该可以解决问题。如果这是正确的想法，或者如果您有其他想法可以提供想法，我们很乐意发表更多评论。