It seems like you have two options here. The first one is to simply remove and replace the controls attribute as you need. This would be the simplest solution, as
element.setAttribute('controls', '')
will simply put the controls back when you need them. The other option is to not use the browser controls at all, define your own custom controls, and hide or show them as you wish.