javascript - 静音 iframe 中播放的音乐?

标签 javascript html iframe web frontend

所以我有一个 iframe,其“src”指向一些音乐的 URL。 iframe 被隐藏并自动播放音乐。如何添加一个按钮来使音乐静音?

<iframe hidden="true" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
        src="http://urlofmusic"></iframe>

请注意,音乐来自外部网站。而且 URL 并不指向特定文件。它只是网站提供的外部链接。

最佳答案

使 iframe 静音的唯一方法是将其从 html 中删除。您可以克隆它以便稍后取消静音。但你不能暂停和恢复,就像停止和播放一样。
HTML

<div id = "iframe_contain">
    <iframe width="0" height="0" hidden="hidden" id="iframe"
        src="http://www.youtube.com/embed/y6120QOlsfU?autoplay=1&loop=1">
    </iframe>
</div>
<a href="javascript:" id="mute">Mute</a><a href="javascript:" id="unmute">Unmute</a>

JS

(function(){
    $("#mute").click(mute);
    $("#unmute").click(unmute);
    //backup iframe
    var iframe_bk;
    //play status
    var status = 1;
    function mute(){
        if(status!=1) return;
        var iframe = $("#iframe");
        iframe_bk = iframe.clone();
        iframe.remove();
        status = 0;
    }
    function unmute(){
        if(status!=0) return;
        if(iframe_bk){
            $("#iframe_contain").append(iframe_bk);
            iframe_bk = null;
            status = 1;
        }
    }
})();

我使用 jQuery,这里的工作版本为 jsfiddle

关于javascript - 静音 iframe 中播放的音乐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32174022/

相关文章:

javascript - 在 HTML5 中使用 Pattern 属性

html - Bootstrap 导航栏图标栏不起作用

javascript - 样式化 JS 变量

javascript - 使用 jquery 滑动菜单

javascript - 清除 ios 上的 UIWebView 缓存

jquery - 在 facebook iframe 应用程序中使用 jquery - GET 与 POST

c# - 如何在 iframe 中显示本地文件夹中的 html 文件?

Javascript API - 可选 js sdk 模块未定义

html - 如何调整悬停图像以使其始终全屏显示?

javascript - 使用YouTube API和IE8进行“视频未定义”