一次自动静音播放多个 YouTube 视频 [英] Autoplay multiple YouTube videos on mute at once

问题描述

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

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

如果有人想玩的话，这是代码:

HTML:

<div data-id="EI0ib1NErqg"></div>
<div class="no-sound"><div data-id="fV6O722O_ew"></div>

<div class="no-sound"><div data-id="cKxRvEZd3Mw"></div>

<div id="声音"><iframe width="560" height="315" src="https://www.youtube.com/embed/g95_9Qd7o9Y?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

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 玩家；函数 onYouTubePlayerAPIReady() {var player = document.querySelectorAll('.no-sound div')for (var i = 0; i 

提前致谢.

解决方案

请更改您的代码:

来自:

new YT.Player(players[i], {玩家变量:{'自动播放':1，'适度品牌':1，'控制':1，事件:{'onReady': onPlayerReady}},videoId:玩家[i].dataset.id});

到

new YT.Player(players[i], {玩家变量:{'自动播放':1，'适度品牌':1，'控制':1}，事件:{'onReady': onPlayerReady},videoId:玩家[i].dataset.id});

基于谷歌提供的示例代码.事件元素在 playerVars 元素之外.这是支持的 int playerVars 元素参数列表的链接.

函数 onYouTubeIframeAPIReady() {var 播放器；player = new YT.Player('玩家', {videoId: 'M7lc1UVf-VE',playerVars: { 'autoplay': 1, 'controls': 0 },事件:{'onReady': onPlayerReady,'onPlaybackQualityChange': onPlayerPlaybackQualityChange,'onStateChange': onPlayerStateChange,'onError': onPlayerError}});}

以 jsfiddle 为例.

I am trying to make a webpage that uses the YouTube iframe API to display multiple videos which start playing automatically on load. I want 3 of the 4 videos to start playing in mute, but the 4th video to be playing with the audio. Finally, I am trying to create a mute/un-mute and pause/start button that allows me control all 4 videos simultaneously.

I have been playing around with the code for the audio feature and not sure why it isn't working. Right now 3 of the 4 videos use the api so I can control them all at once, and the last video is its own iframe which autoplays.

Here's the code if anyone want to play around with it:

HTML:

<div class="no-sound">
    <div data-id="EI0ib1NErqg"></div>
</div>
<div class="no-sound">
    <div data-id="fV6O722O_ew"></div>
</div>
<div class="no-sound">
    <div data-id="cKxRvEZd3Mw"></div>
</div>

<div id="sound">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/g95_9Qd7o9Y?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

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();
      }

Thank you in advance.

解决方案

Kindly change your code:

From:

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

To

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

Base on the sample code given by google. Events element is outside the playerVars element. Here is the link for the supported list of parameters int playerVars element.

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
        }
    });
}

See this jsfiddle as example.

这篇关于一次自动静音播放多个 YouTube 视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！