Html HTML5 视频静音但仍在播放

HTML5 Video muted but still playing

提问by Jan Haesen

Title pretty much says it all. I have a video which automatically starts playing when arriving on the page.

标题几乎说明了一切。我有一个视频，它在到达页面时自动开始播放。

In the HTML code I have put muted="muted". And here comes the weird part. When looking at the controls it clearly is muted, but the music is still playing and can be heard. Even when I looked at the HTML5 Video example on W3Schools it plays the music while muted.

在 HTML 代码中，我放置了 muted="muted"。奇怪的部分来了。查看控件时，它显然已静音，但音乐仍在播放并且可以听到。即使当我查看 W3Schools 上的 HTML5 视频示例时，它也会在静音时播放音乐。

Is there any way, trough jQuery for example to bypass this? I have a jQuery line in it which stick the muted to the video but that has no effect.

有什么办法，例如通过 jQuery 绕过这个？我有一个 jQuery 行，它将静音粘贴到视频上，但没有效果。

Here is the HTML code is use:

这是使用的 HTML 代码：

<video id="video" width="640px" height="350px" autoplay="autoplay" loop="loop" controls="controls" muted="muted">
            <source src="intouchables.f4v" type="video/mp4">
            Your browser does not support the video tag.
        </video>

Hope you can help me out. The jQuery line is as following:

希望你能帮帮我。jQuery 行如下：

$("video").prop('muted', true);

$("video").prop('静音', true);

Thanks in advance.

提前致谢。

回答by Vishnu

I'm not entirely sure as to why the mutedattribute is malfunctioning when defined within the videotag. However, this is what you can do :

我不完全确定为什么muted在video标签中定义属性时出现故障。但是，您可以这样做：

Firstly, remove the muted="muted"attribute from the video tag. Keep it simply as :

首先，muted="muted"从视频标签中删除该属性。保持简单：

<video id="video" width="640px" height="350px" autoplay="autoplay" loop="loop" controls="controls">
    <source src="intouchables.f4v" type="video/mp4">
    Your browser does not support the video tag.
</video>

Now, define a function that on loading of the page, mutes the video.

现在，定义一个在加载页面时使视频静音的函数。

window.onload = function () {
    var element = document.getElementById('video');
    element.muted = "muted";
}

I have verified this, and it works.

我已经验证了这一点，它有效。

回答by Simon_Weaver

There are no real new answers in my answer - just trying to bring this question up to date and hope to avoid people wasting a whole day with this like I just did.

我的答案中没有真正的新答案——只是想把这个问题更新一下，并希望避免人们像我刚才那样浪费一整天的时间。

As far as I can tell (especially since this question is so old) that mutedhas neverworked when the video is dynamically added to the page. And since muteddoesn't work then muted autoplaywon't work either.

据我所知（特别是因为这个问题太老了），当视频动态添加到页面时，muted它从来没有奏效。既然muted不起作用，那么muted autoplay也不会起作用。

I think what happens is that the browser makes certain decisions on page load, and for some super odd reason, a video later to the page added will NOT mute even if it has mutedproperty. This I believe is a bug in Chrome, not occurring for me in Safari - but it looks like we're stuck with it for now.

我认为发生的事情是浏览器对页面加载做出了某些决定，并且出于一些非常奇怪的原因，即使有muted属性，稍后添加到页面的视频也不会静音。我认为这是 Chrome 中的一个错误，在 Safari 中不会发生在我身上 - 但看起来我们现在被它困住了。

Google's blog entry on autoplay/muteis only a year old, and provides the following insight:

谷歌关于自动播放/静音的博客条目只有一年的历史，并提供了以下见解：

Chrome's autoplay policies are simple:

• Muted autoplay is always allowed.
• Autoplay with sound is allowed if:
  • User has interacted with the domain (click, tap, etc.).
  • On the desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
  • On mobile, the user has added the site to his or her home screen.
• Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

Chrome 的自动播放策略很简单：

• 始终允许静音自动播放。
• 在以下情况下允许自动播放声音：
  • 用户与域进行了交互（单击、点击等）。
  • 在桌面上，用户的媒体参与指数阈值已被超过，这意味着用户之前曾播放过有声视频。
  • 在移动设备上，用户已将站点添加到他或她的主屏幕。
• 顶级框架可以将自动播放权限委托给它们的 iframe 以允许自动播放声音。

There's just one major thing missing!

只缺少一件重要的事情！

• The 'muted' HTML attribute only takes effect when the video is present in the HTML at initial load. This also applies to 'autoplay muted' videos.

• '静音' HTML 属性仅在初始加载时视频出现在 HTML 中时生效。这也适用于“自动播放静音”视频。

So what is the impact of this:

那么这有什么影响：

• If a video with no sound is played programmatically it must be muted first. Therefore if a dynamic video is added to the page you must explicitly set video.muted = trueafter it is added to the DOM (or right before you play it).
• If you try to execute video.play()programmatically (eg. when someone scrolls down past a muted video and you want it to play) then the video must be muted first.

• 如果以编程方式播放没有声音的视频，则必须先将其静音。因此，如果将动态视频添加到页面中，您必须video.muted = true在将其添加到 DOM 之后（或在播放之前）明确设置。
• 如果您尝试以video.play()编程方式执行（例如，当有人向下滚动经过静音的视频并且您希望它播放时），则必须先将视频静音。

I ran into this in Angular and spent way too much time assuming it was related to the fact I was using a template, or something Angular related.

我在 Angular 中遇到了这个问题，花了太多时间假设它与我使用模板或与 Angular 相关的事实有关。

I made a test app on StackBlitz. You will need to uncomment the line // video.muted = trueto get it to work properly.

我在 StackBlitz 上做了一个测试应用。您需要取消注释该行// video.muted = true才能使其正常工作。

https://stackblitz.com/edit/angular-ze4t9y

https://stackblitz.com/edit/angular-ze4t9y

The other important things to realize are:

其他需要意识到的重要事情是：

• Even if a video doesn't actually HAVE sound it must be muted. Test with the 'bunny' video if you need to.
• The newer 'media engagement' rules outlined in the blog can confuse the heck out of you when testing a page because you will have interacted with the page. What you must do is close the browser, or open a new window in incognito mode - in order to reset this engagement rule (see blog entry).

• 即使视频实际上没有声音，它也必须静音。如果需要，请使用“兔子”视频进行测试。
• 博客中概述的较新的“媒体参与”规则可能会使您在测试页面时感到困惑，因为您将与该页面进行交互。您必须做的是关闭浏览器，或在隐身模式下打开一个新窗口 - 以重置此参与规则（请参阅博客条目）。

The error you'll see in the browser if you try to play a non muted video when the user hasn't 'engaged' with the page first is shown below. If you aren't seeing this message for a non muted video then Chrome may have allowed the video to play because you interacted with the page.

如果您在用户尚未首先“参与”页面时尝试播放非静音视频，您将在浏览器中看到的错误如下所示。如果您没有看到非静音视频的此消息，则 Chrome 可能允许播放该视频，因为您与该页面进行了交互。

And finally, if you are using Angular (where everything is dynamically added), the following works to mute the video:

最后，如果您使用的是 Angular（其中所有内容都是动态添加的），以下内容可以使视频静音：

 @ViewChild('bunnyVideo', { read: ElementRef }) bunnyVideo: ElementRef;

Then when you want to play it:

然后当你想玩它时：

 const video: HTMLVideoElement = this.bunnyVideo.nativeElement;

 // explicitly mute it...
 video.muted = true;

 // ...before attempting to play
 video.play().catch((err) => {
    alert('video error ' + err);
 });

回答by Ronnie

In Angular case, one can try [muted]="'muted'", It is working for me.

在 Angular 的情况下，可以尝试[muted]="'muted'"，它对我有用。

<video id="video" style="width:100%; height:100%" autoplay [muted]="'muted'" loop>
  <source src="./../../assets/video/model-video.mp4" type="video/mp4">
</video>

回答by SANA Abdoul Aziz

This work fine for me.

这对我来说很好。

<video oncanplay="this.muted=true" id="video" width="640px" height="350px" autoplay="autoplay" loop="loop" controls="controls">
            <source src="intouchables.f4v" type="video/mp4">
            Your browser does not support the video tag.
</video>

回答by reco

looks like this muted stopped working in chrome 64. still works in 63.

看起来这个静音在 chrome 64 中停止工作。在 63 中仍然有效。

回答by Tahmid

<video preload= "true" autoplay = "autoplay" loop = "loop" muted>
    <source src = "video/Real-Estate.mp4" type = "video/mp4">
</video>

回答by SM23

To mute via HTML5 directly instead of jQuery, you can also use volume="0"within the video tag, i.e:

要直接通过 HTML5 而不是 jQuery 静音，您还可以volume="0"在 video 标签中使用，即：

<video preload="true" autoplay="" volume="0" poster="img/example.jpg">

回答by user3141094

Make sure your audio codec is set to AAC when producing a video. I had the same problem using OpenShot where the default setting is AC3.

制作视频时，请确保您的音频编解码器设置为 AAC。我在使用默认设置为 AC3 的 OpenShot 时遇到了同样的问题。