如何从 javascript 在 youtube iframe 上执行音量更改？

Question

这里是JS/HTML菜鸟，请耐心等待。

我有一个包含 iframe 的 html 页面。 https://developers.google.com/youtube/iframe_api_reference#Example_Video_Player_Constructors 我正在使用上面“入门”部分中的示例并在 JSFiddle 上进行测试。

我希望能够在页面加载后在 YouTube 播放器上执行音量更改。

youtube API 的 setVolume 函数在 HTML 页面内工作（我可以成功加载页面并使用文档中的信息设置音量），但我正在努力弄清楚如何在页面外部调用/公开它。

我已经尝试过：

var iframe = document.getElementById("player");

callPlayer('setVolume', 100);

function callPlayer(func, args) { 
        var src = iframe.getAttribute('src');
        if (src && src.indexOf('youtube.com/embed') !== -1) {
            iframe.contentWindow.postMessage(JSON.stringify({
                'event': 'command',
                'func': func,
                'args': args || []
            }), '*');
        }    
}

我在另一篇文章中找到了它，但没有任何反应。

我已经尝试过这个 如何从外部组件设置 Youtube iframe 音量，但出现方法未定义错误。

我已经尝试过了

`var iframe = document.getElementById("player");
iframe.setVolume({value});`

Answer 1

首先，确保您已在 HTML 中包含 YouTube Iframe API 脚本。

<!-- Include the YouTube Iframe API script -->
<script src="https://www.youtube.com/iframe_api"></script>

为 YouTube 播放器容器创建 HTML 元素。

<!-- HTML container for the YouTube player -->
<div id="player"></div>

使用 Iframe API 初始化 YouTube 播放器。

// Variables
var player;

// YouTube API callback function
function onYouTubeIframeAPIReady() {
  // Create the YouTube player
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'YOUR_VIDEO_ID',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// Function called when the player is ready
function onPlayerReady(event) {
  // You can set the initial volume here if needed
  // event.target.setVolume(50);
}

将“YOUR_VIDEO_ID”替换为实际的 YouTube 视频 ID。

现在，您可以创建函数来从 iframe 外部控制播放器的音量。

// Function to set the volume
function setVolume(volume) {
  if (player) {
    player.setVolume(volume);
  }
}

您可以从 iframe 外部调用 setVolume 函数。

// Example: Set volume to 75
setVolume(75);

请记住在 iframe 初始化后执行此脚本。确保在自定义脚本之前加载 YouTube Iframe API 脚本。