![一次自动静音播放多个 一次自动静音播放多个](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了一次自动静音播放多个 YouTube 视频的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试制作一个网页,该网页使用 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 视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!