一次静音播放多个YouTube视频
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一次静音播放多个YouTube视频相关的知识,希望对你有一定的参考价值。
我正在尝试制作一个使用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>
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();
}
先感谢您。
答案
请更改您的代码:
从:
new YT.Player(players[i], {
playerVars: {
'autoplay': 1,
'modestbranding': 1,
'controls': 1,
events: {
'onReady': onPlayerReady
}
},
videoId: players[i].dataset.id
});
至
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元素的link。
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
}
});
}
以jsfiddle为例。
以上是关于一次静音播放多个YouTube视频的主要内容,如果未能解决你的问题,请参考以下文章
没有静音的 HTML 视频自动播放(或者 youtube 是如何做到的)?
如何自动播放静音的 Youtube 视频 (IFrame API)?
Youtube视频w/Javascript API-自动播放和静音
我如何对 youtube 嵌入播放器进行编程以在单击时取消静音