HTML 视频禁用控件 - Html

HTML 视频控件可以让我们在网页中播放视频。但是有时候我们希望禁用一些控件，例如暂停、音量、全屏等。

方法1：使用 "controls" 属性

最简单的方法是使用 "controls" 属性来控制哪些控件应该显示或隐藏。

<video controls="controls" autoplay="autoplay">
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

在这里，我们可以使用 "controls" 属性为 “video” 元素启用了默认的视频控件，但是您也可以稍微修改一下，将 "controls" 属性的值设置为 “none”，这样就可以禁用默认的视频控件了。

<video controls="none" autoplay="autoplay">
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

方法2：自定义视频控件

如果您希望更精细的控制哪些控件可以被禁用，可以尝试自己创建自定义视频控件。

在这里，我们可以先使用常规 “video” 元素并为其添加一个 ID：

<video id="myVideo" width="320" height="240" autoplay>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

接下来，我们可以使用 JavaScript/CSS 来实现自定义的视频控件，例如下面的示例代码：

<style>
  /* 隐藏默认控件 */
  #myVideo::-webkit-media-controls {
    display:none !important;
  }
  
  /* 自定义控件 */
  #videoControls {
    position:relative;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    color: #f9f9f9;
    font-size: 14px;
    line-height: 1.6;
    z-index: 2147483647; /* 最高层级 */
    display: flex;
    justify-content: space-between;
  }

  #videoControls button {
    background: transparent;
    border: none;
    color: #f9f9f9;
    font-size: 14px;
    line-height: 1.6;
    padding: 5px 10px;
    cursor: pointer;
    transition: opacity 0.15s;
    opacity: 0.7;
  }

  #videoControls button:hover {
    opacity: 1;
  }
  
  /* 控制按钮样式 */
  #playPauseBtn {
    font-size: 20px;
    padding-right: 10px;
  }
  
  #fullScreenBtn {
    font-size: 16px;
    padding-left: 10px;
  }
  
</style>

<video id="myVideo" width="320" height="240" autoplay>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

<div id="videoControls">
  <button type="button" id="playPauseBtn">播放</button>
  <button type="button" id="fullScreenBtn">全屏</button>
</div>
  
<script>
  /* 获取视频控件 */
  var video = document.getElementById("myVideo");
  /* 获取自定义控件 */
  var controls = document.getElementById("videoControls");

  /* 播放/暂停控制 */
  var playPauseBtn = document.getElementById("playPauseBtn");
  playPauseBtn.addEventListener("click", function() {
    if (video.paused || video.ended) {
      video.play();
      playPauseBtn.innerHTML = "暂停";
    } else {
      video.pause();
      playPauseBtn.innerHTML = "播放";
    }
  });

  /* 全屏控制 */
  var fullScreenBtn = document.getElementById("fullScreenBtn");
  fullScreenBtn.addEventListener("click", function() {
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen();
    } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen();
    }
  });

  /* 播放/暂停事件监听 */
  video.addEventListener("play", function() {
    playPauseBtn.innerHTML = "暂停";
  });

  video.addEventListener("pause", function() {
    playPauseBtn.innerHTML = "播放";
  });

  /* 获取视频控件位置 */
  function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;
    while (element) {
      xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
      yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
      element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
  }

  /* 控件定位 */
  var videoPosition = getPosition(video);
  controls.style.top = videoPosition.y + (video.offsetHeight - controls.offsetHeight) + "px";
</script>

在这里，我们使用 CSS 将默认的视频控件隐藏，使用自己编写的 HTML 和 CSS 代码创建自定义的视频控件，并使用 JavaScript 为其添加交互能力。

以上就是两种禁用 HTML 视频控件的方法。可以根据具体的需求选择适合自己的方法。