Question

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

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

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

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

提前谢谢。

Answer 1

请更改您的代码：

自：

 [{
"StudentID": "",
"Course": "",
"Module": "",
"Activity_Start_Time": "",
"Activity_End_Time": "",
"Activity_Date": {
    "date": "2016-04-14 00:00:00.000000",
    "timezone_type": 3,
    "timezone": "UTC"
},
"Activity_Type": "",
"Day": "",
"Campus": "",
"Location": "",
"Staff_Name": "",
"Register_Description": "",
"Timetabled_Hours": 2
}]

要

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

基于谷歌提供的sample code。 Events元素在playerVars元素之外。以下是支持的参数列表int {playerVars element的link。

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

请参阅此jsfiddle作为示例。

一次静音播放多个YouTube视频

1 个答案: