如何使用 JavaScript 禁用/启用 HTML5 视频标签

Question

下面的代码不起作用，如何禁用 HTML5 视频标签

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

如果我使用

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

我仍然可以使用右键单击来播放。

Answer 1

如果我们知道您正在使用的浏览器，那就太好了，但这里有一些解决方法：

您可以使用 css 在其上设置一个与视频播放器大小相同的新块元素，并具有半透明背景。

或者您可以将元素的样式设置为不显示：

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

最后您还可以卸载 vidEle 元素的内容。最后一件事，如果您选择使用“display:none”方法，请确保视频未播放。

Answer 2

您可以删除视频源，这样视频将无法播放:)

Answer 3

另一种方法是禁用上下文菜单，如下所示：

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

Answer 4

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 对我有用