javascript 一种使用 jQuery 或 CSS 使 iframe 静音的方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26654655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A way to mute an iframe using jQuery or CSS?
提问by DanielNolan
Is there a way to mute the audio of an iframe using jQuery or CSS?
有没有办法使用 jQuery 或 CSS 使 iframe 的音频静音？
This is the iframe I need to mute
这是我需要静音的 iframe
<iframe src="http://player.vimeo.com/video/4415083?api=1;title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
回答by pawel
Include this library in your page: https://github.com/vimeo/player-api/tree/master/javascriptlike this
在您的页面中包含此库：https: //github.com/vimeo/player-api/tree/master/javascript像这样
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
This code will send an API call to vimeo player to set the volume to 0 once the player is ready, based on http://developer.vimeo.com/player/js-api
此代码将向 vimeo 播放器发送 API 调用，以在播放器准备就绪后将音量设置为 0，基于http://developer.vimeo.com/player/js-api
// you may need another way of getting reference to the iframe:
var iframe = document.getElementsByTagName('iframe')[0];
var player = $f( iframe );
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
Or, without the external library:
或者，没有外部库：
iframe.contentWindow.postMessage('{"method":"setVolume", "value":0}','*');
回答by Bojan Petkovski
Here you are with a button based on previous answers http://jsfiddle.net/qumg6e7h/
这里有一个基于以前答案的按钮http://jsfiddle.net/qumg6e7h/
$('button').on('click', function () {
var iframe = $(this).prev('iframe')[0];
if ($(this).hasClass('mute')) {
$(this).removeClass('mute').text('Mute');
iframe.contentWindow.postMessage('{"method":"setVolume", "value":1}', '*');
} else {
$(this).addClass('mute').text('Unmute');
iframe.contentWindow.postMessage('{"method":"setVolume", "value":0}', '*');
}
});
You can have as many iframes as you like. Just add the button after the iframe and on click mute/unmute the video :)
您可以拥有任意数量的 iframe。只需在 iframe 之后添加按钮，然后单击静音/取消静音视频:)
回答by feeela
You can only mute HTML5 audioand videoelements.
您只能静音 HTML5audio和video元素。
An iframe does not have an audio API, so you can't mute anything using JS on that element. If you can find a workaround to the restrictions from the same-origin policy, you maybe can select the real audio or video element inside the iframe and mute that.
iframe 没有音频 API，因此您不能在该元素上使用 JS 将任何内容静音。如果您可以从同源策略中找到解决限制的方法，您也许可以选择 iframe 中的真实音频或视频元素并将其静音。
There is a W3C recommendation for “aural style sheets”, but I don't know how the browser support for that look like. Using those properties you probably could mute any HTML element:
有一个为“听觉样式表” W3C推荐，但我不知道怎么了，看起来像在浏览器的支持。使用这些属性，您可能可以将任何 HTML 元素静音：
iframe {
volume: silent;
}
