A way to mute an iframe using jQuery or CSS?

不打扰是莪最后的温柔 提交于 2019-12-30 07:00:11

问题


Is there a way to mute the audio of an iframe using jQuery or CSS?

This is the iframe I need to mute

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

回答1:


Include this library in your page: https://github.com/vimeo/player-api/tree/master/javascript like this

<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

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

Or, without the external library:

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

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




回答2:


Here you are with a button based on previous answers 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 :)




回答3:


You can only mute HTML5 audio and video elements.

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.

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:

iframe {
    volume: silent;
}


来源:https://stackoverflow.com/questions/26654655/a-way-to-mute-an-iframe-using-jquery-or-css

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!