0

I know that I can to pass controls="false" to not show controls, text-boxes and any other stuff from videojs, but that only hide that elements. I want to know how to remove completely all the elements added by videoJS from DOM.

Pavel Angel Mendoza Villafane
  • 417
  • 4
  • 21

1 Answers1

0

Vidoe JS has the following HTML for the control box so

<div class="vjs-control-bar" dir="ltr"></div>

As per your question I take it its the controls you want to delete.So to delete it 

 let controlbar =  document.querySelector(".vjs-control-bar");
controlbar.parentNode.removeChild(controlbar);

This should remove the control bar from your video. You can do the same for the context menu on the video etc

Then you would also have to change

<video id="preview-player_html5_api" preload="auto" crossorigin="anonymous" class="vjs-tech" playsinline="playsinline" tabindex="-1" role="application" poster="//vjs.zencdn.net/v/oceans.png" src="//vjs.zencdn.net/v/oceans.mp4" loop=""></video>

and removecontrols tag from the html tag

JonoJames
  • 1,117
  • 8
  • 22
  • that looks like a hack.. is it not a different way using videojs itself? – Pavel Angel Mendoza Villafane Jan 07 '20 at 23:12
  • Just try take out the controls parameter from the – JonoJames Jan 07 '20 at 23:13
  • How I explained in the post, set controls to False only hide them but they are in the DOM yet then that is not the solution. To be more clear, main problem is that when I change the video source to start to play another video, detached DOM elements appear, that is, videojs does not remove references for them apparently and garbage collector does not remove them for that. Then I want to remove elements included by videoJS (divs, buttons, text boxes) that I don't need (not only hide) to reduce detached elements at least – Pavel Angel Mendoza Villafane Jan 08 '20 at 15:24