如何将 videojs 控制栏移出视频区域或复制 videojs 控制栏？答案

【问题标题】：How do I move the videojs control bar out of the video area or duplicate a videojs control bar?如何将 videojs 控制栏移出视频区域或复制 videojs 控制栏？
【发布时间】：2023-01-08 22:40:37
【问题描述】：

我使用画布元素通过覆盖视频来像素化视频。但是画布元素会覆盖控制栏。那么有没有办法将控制栏移出视频区域或者隐藏原来的控制栏并复制一个新的videojs控制栏？

control bar in the video area](https://i.stack.imgur.com/ZykMJ.png)

顺便说一句，这是在前端对视频进行像素化的最佳做法吗？

【问题讨论】：

标签： javascript frontend video.js

【解决方案1】：

我会将属性 pointer-events: none 分配给画布，这样合并将是无缝的。

<canvas style="pointer-events:none">...

这样，您的画布将只是一个过滤器，无法拦截点击或其他任何内容。

对于另一个问题。没有强制性的最佳实践，因为它有点主观，但是，对于更复杂的效果，它是一种使用过的技术。

编辑：这里有一个移动自定义控制栏的例子。 https://github.com/videojs/video.js/issues/2857

【讨论】：

虽然我可以用style="pointer-events:none"通过画布点击按钮，但我仍然看不到按钮。
你能看到没有画布的按钮吗？
是的，也许我误解了按钮？我的意思是控制栏按钮。
您应该能够看到它们。这里有一个 videoJs 设置示例：stackoverflow.com/questions/45727017/… 在这里，放置控制栏：github.com/videojs/video.js/issues/2857 请注意，如果它没有帮助，您可以发布更多代码示例。但应该这样做。 --- 编辑：您还可以隐藏 videojs 控制栏并使用自定义按钮。
你可以看到上面的图片。我使用画布元素来覆盖视频。