无法在 Firefox 中静音 HTML5 视频标签

Posted 2023-05-07

【中文标题】无法在 Firefox 中静音 HTML5 视频标签

【英文标题】：Unable to Mute HTML5 Video Tag in Firefox

【发布时间】：2015-04-29 23:54:44

【问题描述】：

我想用 webrtc 进行视频通话。我有两个流，一个是本地流，第二个是远程流。

在 Chrome 中，我将视频标签静音，以免听到导致回声的声音。我的 html 标签是这样的；

<video style="position:absolute;right:5px;bottom:5px;display: inline;" class="localVideo" autoplay="autoplay" 
muted="true" 
src="mediastream:3ffffe01-da89-44d9-b9cf-454b11ec6a6a"  ></video>

在 Firefox 中 muted="true" 属性不起作用，所以我听到了自己的声音。我尝试在其他主题中以多种方式设置静音属性；

var video = document.querySelector("#movie");     
video.muted = true;

此代码 sn-p 与 jquery 的不同变体不起作用。

然后我决定在 video 标签中添加 controls 属性，以观察 Firefox 控制按钮是如何工作的。我已经看到 Firefox 控制器上的静音按钮也不起作用。

此问题出现在 Firefox 35 和 Firefox ESR 31.5 与 Windows 7 - 8.1 以及 macOS 与 Yosemite 中。我通过 webrtc 库 localStream 获取媒体流。

这是一个已知问题吗？如果是，有什么解决方法可以解决这个问题吗？

谢谢。

【问题讨论】：

你使用哪个库？或者，如果您自己编写代码，请分享一些有用的代码片段。很难说为什么它会失败，因为这个属性在 Chrome 和 FF 中都适用于我。也请分享操作系统和FF版本。

我添加了一些信息。谢谢！

您的视频没有 id="movie"。先给它一个ID。还尝试在控制台中执行以下代码： document.getElementById("movie").muted = true

添加代码 sn-p 以说明我尝试过的方式。我没有使用电影ID。感谢您的回复。

所以请尝试临时添加一个 id 并执行我在控制台中提供的代码。也许您的图书馆取消静音 FF 中的视频标签。

【参考方案1】：

我在 Firefox 中也遇到过这个问题，我发现的最简单的解决方案是使用 onloadedmetadata 事件，如下所示：

video 
  width: 200px;
  height: 200px;

<video
  src="https://scontent-lhr3-1.cdninstagram.com/t50.2886-16/12930587_1020784647992081_252978711_n.mp4"
  muted
  onloadedmetadata="this.muted = true"
  onmouseenter="play()"
  onmouseleave="pause()"
  playsinline>

【讨论】：

谢谢，我试图将动态设置为视频标签的流静音。

【参考方案2】：

注意：question 有更好的答案

我在FF45中也遇到过这个问题。解决方案是在代码和 DOM 中设置静音。

$("#browserCheck").get(0)
<video id="browserCheck" class="img-responsive" autoplay="" muted="true">
$("#browserCheck").get(0).muted
false
$("#browserCheck").get(0).muted = true
true
$("#browserCheck").get(0).muted
true

【参考方案3】：

我也遇到了使用 Firefox 静音视频的问题。在 Chrome 中没有问题。我通过将音量设置为零来解决 Firefox 问题。相同的净效应？

var video = document.querySelector("#movie");     
video.volume = 0;