HTML5如何隐藏video元素的控制栏、全屏按钮？

要隐藏 HTML5 video 元素的控制栏和全屏按钮，您可以使用以下几种方法：

1. 使用controlsList属性 (推荐):

这是最灵活和推荐的方法，因为它允许你精细地控制哪些控件显示或隐藏。 你可以使用nofullscreen来禁用全屏按钮，并使用nodownload来禁用下载按钮 (如果浏览器支持)。

<video controlsList="nodownload nofullscreen">
  <source src="your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

2. 直接移除controls属性:

最简单的方法是直接不包含controls属性。 这将完全隐藏控制栏，包括播放/暂停按钮、进度条、音量控制和全屏按钮。

<video>
  <source src="your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

3. 使用 JavaScript 动态控制:

你可以使用 JavaScript 来动态地显示或隐藏控制栏。 这对于需要根据用户交互或其他条件来控制控制栏的可见性的情况非常有用。

<video id="myVideo" controls>
  <source src="your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  const video = document.getElementById('myVideo');
  video.controls = false; // 隐藏控制栏

  //  根据需要，可以使用类似下面的代码来动态显示/隐藏控制栏
  //  例如，在视频上点击时显示控制栏：
  // video.addEventListener('click', () => {
  //   video.controls = !video.controls;
  // });
</script>

4. 使用 CSS 隐藏全屏按钮 (不太可靠):

虽然可以使用 CSS 来尝试隐藏全屏按钮，但这并不总是可靠的，因为不同浏览器实现方式不同。 而且这种方法通常会隐藏整个控制栏，而不是仅仅隐藏全屏按钮。 因此，不推荐使用这种方法。

总结:

• 对于简单地隐藏控制栏和全屏按钮，controlsList="nodownload nofullscreen" 是最佳选择。
• 对于需要动态控制的情况，使用 JavaScript 是最灵活的。
• 避免使用 CSS 来隐藏全屏按钮，因为它不可靠且难以维护。

请根据你的具体需求选择最合适的方法。 记住测试你的代码在不同浏览器上的兼容性。