Below code is not working, How can disable HTML5 video tag

document.getElementById("vidEle").disabled=true;

If I use

document.getElementById("vidEle").controls=false;

Still I am able to play using right click.

Below code is not working, How can disable HTML5 video tag

document.getElementById("vidEle").disabled=true;

If I use

document.getElementById("vidEle").controls=false;

Still I am able to play using right click.

• javascript
• html
• html5-video

Share Improve this question Follow edited Mar 25, 2013 at 12:21 Exception asked Mar 25, 2013 at 12:16 ExceptionException 8,3892424 gold badges8888 silver badges141141 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

It would be nice if we knew the browser you are using, but here are some workarounds:

You can set a new block element on top of it with the same size as the video player with a translucent background using css.

Or you could set the style of your element to display none:

document.getElementById("vidEle").style.display="none";

And lastly you can also unload the content of the vidEle element. One last thing, make sure the video is not playing if you choose to use the "display:none" method.

You can remove the video source so the video won't be able to play :)

Another way to do it is to disable the context menu like this:

<video oncontextmenu="return false;" controls>
 <source src="somedir/somevideo.mp4" type="video/mp4"/>
</video>

function turnOffCamera() {
      const videoTracks = currentStream.getVideoTracks();
      videoTracks.forEach((track) => {
        isVideoOpen = !isVideoOpen;
        track.enabled = isVideoOpen; // Disable the video track
        toggleTheCameraButtonText();
      });
    }

function turnOffAudio() {
  const audioTracks = currentStream.getAudioTracks();
  audioTracks.forEach((track) => {
    isAudio = !isAudio;
    track.enabled = isAudio; //Disable the audio track
    toggleTheAudioButtonText();
  });
}

track.enabled worked for me