Question

有没有办法使用jQuery或CSS来静音iframe的音频？

这是我需要静音的iframe

<iframe src="http://player.vimeo.com/video/4415083?api=1;title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Answer 1

在您的网页中加入此库：https://github.com/vimeo/player-api/tree/master/javascript，就像这样

<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>

根据http://developer.vimeo.com/player/js-api

，此代码将向vimeo播放器发送API调用，以便在播放器准备就绪后将音量设置为0

// 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); 
 });

http://jsfiddle.net/87dsjL8q/

或者，没有外部库：

iframe.contentWindow.postMessage('{"method":"setVolume", "value":0}','*');

http://jsfiddle.net/87dsjL8q/1/

Answer 2

这里有一个基于先前答案的按钮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}', '*');
    }
});

你可以拥有任意数量的iframe。只需在iframe后添加按钮，然后点击静音/取消静音视频：）

Answer 3

您只能将HTML5 audio和video元素设为静音。

iframe没有音频API，因此您无法在该元素上使用JS来静音。如果您可以找到same-origin policy限制的变通方法，您可以选择iframe中的真实音频或视频元素并将其静音。

有一个W3C recommendation for “aural style sheets”，但我不知道浏览器是如何支持的。使用这些属性可能会使任何HTML元素静音：

iframe {
    volume: silent;
}

一种使用jQuery或CSS静音iframe的方法？

3 个答案: