Search code examples
javascriptfrontendvideo.js

How do I move the videojs control bar out of the video area or duplicate a videojs control bar?

I used a canvas element to pixelate a video by covering it on the video. But the canvas element will cover the control bar. So is there a way to move the control bar out of the video area or hide the original one and duplicate a new videojs control bar?

The pixelate canvas cover on the video

control bar in the video area](https://i.sstatic.net/ZykMJ.png)

By the way, is this the best practice to pixelate a video in front end?

the canvas element I used to cover the whole video

Solution

  • I would assign the property pointer-events: none to the canvas so the merge will be seamless.

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

    This way, your canvas will be just a filter, with no way of intercepting a click or anything else.

    For the other question. No forcibly best practice as it's a bit subjective, however, for more complex effects, it is a used technic.

    EDIT: There's an example here to move a custom control bar. https://github.com/videojs/video.js/issues/2857

    I did some quick tests. You can move the control bar with CSS

    .vjs-control-bar
{
  position: relative;
  top: 300px;
}