HTML5视频静音但仍在播放

Question

标题几乎说明了一切.我有一个视频,当到达页面时自动开始播放.

在HTML代码中我把muted ="muted".这是奇怪的部分.当看着控制器时,它显然是静音的,但音乐仍在播放,可以听到.即使我在W3Schools上查看HTML5视频示例,它也会在静音时播放音乐.

有没有办法,例如通过jQuery绕过这个？我有一个jQuery线,坚持视频静音,但没有效果.

这是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>

希望你能帮助我.jQuery行如下:

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

提前致谢.

Answer 1

我不完全确定muted在video标签内定义属性时出现故障的原因.但是,这是你可以做的:

首先,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>

现在,定义一个在加载页面时将视频静音的功能.

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

我已经验证了这一点,它确实有效.

Answer 2

这对我来说很好。

<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>

Answer 3

在我的回答中没有真正的新答案 - 只是试图让这个问题更新,并希望避免人们像我刚才那样浪费一整天.

据我可以告诉(尤其是因为这个问题太旧),其muted已从未当视频动态添加到网页的工作.而且由于muted不起作用,那么muted autoplay也不起作用.

我认为发生的事情是浏览器在页面加载时作出某些决定,并且由于一些超级奇怪的原因,即使它具有muted属性,稍后添加到页面的视频也不会静音.我认为这是Chrome中的一个错误,在Safari中没有出现 - 但看起来我们现在仍然坚持使用它.

谷歌关于自动播放/静音的博客文章只有一年的历史,并提供以下见解:

Chrome的自动播放政策很简单:

• 始终允许静音自动播放.
• 如果出现以下情况,则允许自动播放声音
  • 用户已与域进行了互动(点击,点击等).
  • 在桌面上,用户的媒体参与度指数阈值已超过,这意味着用户之前已播放带有声音的视频.
  • 在移动设备上,用户已将该网站添加到他或她的主屏幕.
• 顶部框架可以将自动播放权限委托给他们的iframe,以允许自动播放声音.

只缺少一件大事!

• "静音"HTML属性仅在初始加载时HTML中存在视频时生效.这也适用于'自动播放静音'视频.

那么这有什么影响:

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

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

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

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

要实现的其他重要事项是:

• 即使视频实际上没有声音,也必须将其静音.如果需要,请使用' bunny '视频进行测试.
• 博客中概述的较新的"媒体参与"规则可能会在测试页面时混淆您,因为您将与该页面进行交互.您必须做的是关闭浏览器,或以隐身模式打开新窗口 - 以重置此参与规则(请参阅博客条目).

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

最后,如果您正在使用Angular(动态添加所有内容),以下内容可以使视频静音:

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

然后当你想玩它:

 const video: HTMLVideoElement = this.bunnyVideo.nativeElement;

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

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

Answer 4

在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>

Answer 5

看起来这个静音停止在chrome 64工作.仍然在63工作.