Chrome 64 更新 - 静音标签不再在 <video> 中工作答案

【问题标题】：Chrome 64 Update - muted tag no longer working in <video>Chrome 64 更新 - 静音标签不再在 <video> 中工作
【发布时间】：2018-07-15 17:27:13
【问题描述】：

https://jsfiddle.net/kaldenfi/rpmk93wm/3/

<div ng-app="myApp" ng-controller="testCtrl">
   <section ng-if="url">
     <video id="player1" playsinline autoplay loop muted volume="0.0">
       <source ng-src="{{url | trusturl}}" type="video/mp4"> Your browser does not support the video tag.
     </video>
   </section>
</div>

更新到 chrome 64 后，我的视频不再静音。如果我将视频放在 ng-if 之外并对 url 进行硬编码，它应该可以正常工作

有什么解决办法吗？

【问题讨论】：

标签： javascript angularjs google-chrome

【解决方案1】：

我正在处理的 Ember 应用程序中遇到了同样的问题。

我有两个解决方案：

将<video> 标记移动到 index.html，就像您所做的一样
创建一个可以在init 或window.onload 挂钩上调用的函数 mutePlayer1VideoHack() { const player1Video = document.getElementById('player1'); player1Video.setAttribute('muted', true); }

我在#2 中的函数名称前加上Hack，以防这是一个真正的Chrome 64 错误，将被修复。我将针对我的情况使用解决方案 #1

【讨论】：

【解决方案2】：

好的，找到一个临时解决方案，如果我将 ng-if 移动到 source 标签，它会正确静音。

Chrome 64 必须在页面首次加载时执行某些操作，它正在寻找任何视频标签，因此如果您的视频标签在加载时不存在，它将不会运行静音标签

【讨论】：