如何在 HTML 中静音视频？

17 Mar 2025 | 4 分钟阅读

<video> 标签

HTML 5 包含一个特殊的 <video> 标签，可以轻松地将媒体播放器嵌入到网页中，这有助于我们在网页文档中支持视频播放。除了视频，我们还可以播放音乐和音频。然而，对于音乐和音频，HTML 5 中也提供了更好的选择 <audio> 标签。

<video> 标签 包含多个属性，可用于执行多种操作。

例如

  • autoplay - 视频播放完后自动播放下一个
  • controls - 浏览器将提供视频控制
  • loop - 视频播放结束后自动重新开始播放
  • height - 调整高度
  • width - 调整宽度

在 HTML 中有两种不同的方法可以静音视频

步骤 1) 使用 HTML5 中视频标签内的 muted 属性

<video> 标签的 muted 属性

除了上面提到的属性，<video> 标签还包含一个布尔属性，称为 muted。这个属性指定了嵌入式媒体播放器必须将视频的音频输出静音。

语法：-

<video controls muted>

示例：-

显示 mute 属性用法的程序

输出

How to mute video in HTML?

在此程序中，我们使用了 HTML 5 的默认视频元素，并为其分配了视频的源代码，并使用了 muted 属性，这将在视频屏幕下方以及其他控制选项旁边添加一个小小的静音图标。我们可以轻松使用静音图标在静音和取消静音选项之间切换。

步骤 2) 使用视频 DOM 的 muted 属性

我们还可以使用 JavaScript 中存在的 muted 属性来执行相同的操作，而无需使用 HTML 5 中视频标签的内置 muted 属性。我们只需声明一个变量，使用 DOM 操作将该变量链接到视频的位置，然后将该变量链接到 muted 并分配 true 和 false 布尔值，其中 true 表示静音，false 表示取消静音。

语法：-

Video . muted = true

示例：-

使用 JavaScript 静音视频的程序

输出

How to mute video in HTML?

在此程序中，我们没有使用 mute 属性，而是创建了一个 JavaScript 函数来执行不同的操作，例如静音和取消静音。首先，我们使用了一个 video 元素 来在我们的网页中嵌入视频。我们创建了三个函数，mute、audio 和 status， 使用 JavaScript 的 onclick 属性来分配不同的属性。我们将 video mute = true 分配给 mute 函数，将 video mute = false 分配给 audio 函数。最后，在第三个按钮上有一个 alert 功能。

下一主题HTML 和 ASP 的区别





相关帖子