如何将iframe的音频静音？

Question

我正在创建一个关于埃隆·马斯克的致敬页面(为freecodecamp.com)，我想通过属性将他的游戏包含到我的页面中。是否可以将自动播放音频静音？我的页面url：https://codepen.io/auginis/full/BdwBZW/ https://blastar-1984.appspot.com/：游戏:url这里是它的代码：

<iframe src="https://blastar-1984.appspot.com/" width="1000px" height="1000px">
  <p>Sorry, your browser does not support this game</p>
</iframe>

Answer 1

如果你可以使用Sachin的解决方案，那就去试试吧，但我很确定它只适用于媒体元素，就是我最后检查过的audio和video元素(spec)。但事情会变得很快，所以也许你很幸运。

如果你不能在iframe级别上改变它，那么你就会遇到跨域的问题。如果你能控制你嵌入的应用的头部，X-Frame-Origins就是你的朋友。如果您使用该标题来放松对游戏原始页面的限制，则您的javascript只需如下所示：

​

var iframe = document.querySelector('iframe[src="https://blastar-1984.appspot.com/"]');
// This code could probably be tidied up, depending on how familiar you are with the game code
iframe.contentDocument.getElementById("muted").checked = true;
iframe.contentWindow.speaker[0].muted = true
iframe.contentWindow.speaker[1].muted = true

​

然而，如果你没有那么幸运，那么同源策略可能会让你被击败。在这种情况下，我只建议创建一个div，并在单击"play“(请原谅代码片段中的懒惰CSS )时将其替换为iframe：example。这给了你额外的好处，在用户想要之前不加载内容(这对性能/移动浏览器都有好处)。

祝好运!

Answer 2

您可以通过JavaScript将其静音。

这是您的html iframe使用id。

<iframe src="https://blastar-1984.appspot.com/" width="1000px" height="1000px" id="iframeId">
  <p>Sorry, your browser does not support this game</p>
</iframe>

在getElementById中添加您的iframe id

<script type="text/javascript">
    myVid=document.getElementById("iframeId");
    myVid.muted=true;
</script>

通过使用此选项，可以将音频静音