Javascript 同时在静音模式下自动播放多个YouTube视频

我试图制作一个网页，使用YouTube iframe API显示多个视频，这些视频在加载时自动播放。我希望4个视频中的3个以静音方式开始播放，但第4个视频将使用音频播放。 最后，我尝试创建一个静音/取消静音和暂停/开始按钮，允许我同时控制所有4个视频

我一直在玩弄音频功能的代码，不知道为什么它不起作用。现在4个视频中有3个使用了api，所以我可以一次控制它们，最后一个视频是它自己的iframe，可以自动播放

如果有人想玩它，下面是代码：

HTML:

JavaScript:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var players;
function onYouTubePlayerAPIReady() {
    var players = document.querySelectorAll('.no-sound div')
    for (var i = 0; i < players.length; i++) {
        new YT.Player(players[i], {
            playerVars: {
                'autoplay': 1,
                'modestbranding': 1,
                'controls': 1,
                    events: {
                'onReady': onPlayerReady
                    }
            },
            videoId: players[i].dataset.id
        });
    }

}

      function onPlayerReady(event) {
        event.target.mute();
      }

var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var参与者；
函数onYouTubePlayerAPIReady（）{
var players=document.querySelectorAll（'.no sound div'）
对于（变量i=0；i

---

提前谢谢。

请更改您的代码：

发件人：

到

基于谷歌给出的数据。Events元素位于playerVars元素之外。以下是受支持的参数列表int playerVars元素的详细信息

function onYouTubeIframeAPIReady() {
    var player;
    player = new YT.Player('player', {
        videoId: 'M7lc1UVf-VE',
        playerVars: { 'autoplay': 1, 'controls': 0 },
        events: {
            'onReady': onPlayerReady,
            'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
            'onStateChange': onPlayerStateChange,
            'onError': onPlayerError
        }
    });
}

---

请参见此示例。

请更改您的代码：

发件人：

到

基于谷歌给出的数据。Events元素位于playerVars元素之外。以下是受支持的参数列表int playerVars元素的详细信息

function onYouTubeIframeAPIReady() {
    var player;
    player = new YT.Player('player', {
        videoId: 'M7lc1UVf-VE',
        playerVars: { 'autoplay': 1, 'controls': 0 },
        events: {
            'onReady': onPlayerReady,
            'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
            'onStateChange': onPlayerStateChange,
            'onError': onPlayerError
        }
    });
}

以此为例

new YT.Player(players[i], {
    playerVars: {
        'autoplay': 1,
        'modestbranding': 1,
        'controls': 1},
        events: {
        'onReady': onPlayerReady
    },
    videoId: players[i].dataset.id
});

function onYouTubeIframeAPIReady() {
    var player;
    player = new YT.Player('player', {
        videoId: 'M7lc1UVf-VE',
        playerVars: { 'autoplay': 1, 'controls': 0 },
        events: {
            'onReady': onPlayerReady,
            'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
            'onStateChange': onPlayerStateChange,
            'onError': onPlayerError
        }
    });
}