javascript - 如何更改 iframe 元素的音量？

问题描述

在我的网站上，我有一个正在播放音乐的 iframe 元素（在这种情况下我不能使用音频元素），我希望能够使用滑块更改音量。

我尝试了以下方法：

HTML：

<iframe src="bg.mp3" allow="autoplay" style="display:none" id="iframeAudio"></iframe>
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)" />

Javascript：

var iframe = document.getElementById('iframeAudio');
iframe.setVolume(val / 100);

但是，我在控制台中收到以下错误：

Uncaught TypeError: iframe.setVolume is not a function

我怎样才能做到这一点？

标签： javascripthtmliframe

您可以使用以下小技巧以不同的方式执行此操作：

您可以将您想要的视频上传到您的 YouTube 频道，然后

到YouTube上你要的视频去获取视频ID，你会v=像这样找到它

因此，在我们的示例中，视频 ID 是_cB8CE_Q3Yk

控制音量或任何其他属性

<!DOCTYPE html>
<html>
<head>
    <title>YouTube API</title>
    <!--to load YouTube "iframe_api" asynchronously-->
    <script async src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
    <div id="div_YouTube"></div>
</body>

<script>
    function onYouTubeIframeAPIReady() {

        var player;

        player = new YT.Player('div_YouTube', {
            videoId: '_cB8CE_Q3Yk',   //  video id.
            width: 560,
            height: 316,
            playerVars: {
                'autoplay': 1,
                'controls': 1,
                'showinfo': 0,
                'modestbranding': 0,
                'loop': 1,
                'fs': 0,
                'cc_load_policty': 0,
                'iv_load_policy': 3
            },
            events: {
                'onReady': function (e) {
                  e.target.setVolume(100); // For max value, set value to 100.
                }
            }
        });
    }
</script>
</html>

有关 IFrame Player API 的更多信息：

javascript - 如何更改 iframe 元素的音量？

问题描述

解决方案

推荐阅读