我正在使用 JS 将 YT 视频加载到 div 中 JS:
function onYouTubeIframeAPIReady() {
player = new YT.Player('video1', {
width: 600,
height: 400,
videoId: 'pDMwa1NYceY',
playerVars: {
color: 'white',
controls: 0,
showinfo: 0
},
events: {
onReady: initialize
}
});
}
HTML:
<div id="video1"></div>
这可行,但现在我想将另一个视频加载到同一页面上的第二个 DIV 中
HTML:
<div id="video1"></div>
<div id="video2"></div>
JS:
function onYouTubeIframeAPIReady() {
player = new YT.Player('video1', {
width: 600,
height: 400,
videoId: 'XFmRL-Vuwtc',
playerVars: {
color: 'white',
controls: 0,
showinfo: 0
},
player = new YT.Player('video2', {
width: 600,
height: 400,
videoId: 'fQsHVCDn-bs',
playerVars: {
color: 'white',
controls: 0,
showinfo: 0
},
events: {
onReady: initialize
}
});
}
我该如何进行这项工作?
我为什么要这么做?我想用JS同时控制两个YouTube视频。
首先,您应该为要应用的每个 iframe 有一个不同的变量。这意味着,如果您想要有两个 YouTube iframe,则必须添加两个变量。
下一个示例显示两个 YouTube iframe (每个 iframe 都有不同的视频) 和两个按钮:“恢复”和“暂停”。
您必须在自己的环境中进行测试,因为它似乎 代码片段不允许加载 YouTube iframe API,我也不能 到目前为止,已经制作了一个功能齐全的jsfiddle,但是这段代码将 给你一个关于我如何管理两个YouTube的“控制”的提示 已加载 iframe:
/*
Sources:
https://developers.google.com/youtube/iframe_api_reference?hl=es-419
https://stackoverflow.com/a/17843719/4092887
https://stackoverflow.com/a/11284045/4092887
https://stackoverflow.com/a/17857716/4092887
*/
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Variables of the divs (where the YouTube iframe will load):
var player;
var multip;
function onYouTubeIframeAPIReady() {
// Div player:
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady
}
});
// Div "multip":
multip = new YT.Player('multip', {
height: '360',
width: '640',
videoId: '7gwO8-oqwFw',
events: {
'onReady': onPlayerReady2
}
});
// Add onclick events to HTML anchor controls for play and
// pause the videos.
document.getElementById('resume').onclick = function() {
play_video();
};
document.getElementById('pause').onclick = function() {
pause_video();
};
}
// Div "player" - The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// Div "multip" - The API will call this function when the video player is ready.
function onPlayerReady2(event) {
event.target.playVideo();
}
// Function for play all the loaded iframes: those div are: ("player" and "multip").
function play_video() {
player.playVideo();
multip.playVideo();
}
// Function for pause all the loaded iframes: those div are: ("player" and "multip").
function pause_video() {
player.pauseVideo();
multip.pauseVideo();
}
// Function for reset (start at 0:00) all the loaded iframes: those div are: ("player" and "multip").
function reset_video() {
player.stopVideo();
multip.stopVideo();
}
<script src="https://www.youtube.com/iframe_api"></script>
<!-- These divs will contain the iframe YouTube player: -->
<div id="player"></div>
<div id="multip"></div>
<a href="#" id="pause">Pause</a>
<a href="#" id="resume">Resume</a>
这个技巧似乎对我有用。如果您正在制作部分精选视频,这可能会起作用
<div id="DIV ID" class="youtube-videos" data-id="YOUTUBE ID"></div>
<div id="DIV ID2" class="youtube-videos" data-id="YOUTUBE ID2"></div>
var all_IDs = [];
$('div.youtube-videos').each(function(){
all_IDs.push($(this).data('id')+":"+$(this).attr('id'));
});
var player = [],
time_update_interval = 0;
function onYouTubeIframeAPIReady() {
for (i = 0; i < all_IDs.length; ++i) {
var init_i = all_IDs[i];
var all_data = init_i.split(':');
console.log(all_data[1]+" --- "+all_data[0]);
player[i] = new YT.Player(all_data[1], {
width: 600,
height: 400,
videoId: all_data[0],
playerVars: {
'autoplay': 0,
color: 'white',
rel: 0,
showinfo: 0,
ecver: 2
}
});
}
}
这是我在 StackOverflow 上的第一篇文章:)
Chong Alburo 的上述解决方案对于有限数量的帧(或多或少 20 个)非常有效。
我发现我们可以使用这一行来识别各个视频:
var 玩家 = YT.get('DIV ID');
其中“DIV ID”是个人ID。
然后我们就可以控制每个视频了
这个 jQuery 示例还展示了如何在关闭模式时使用
$(函数(){
$("#dynamicVideoModal1 ID").on('hide.bs.modal', function(){
var player = YT.get('DIV ID');
player.stopVideo();
})
$('#pause ID').click(function() {
var player = YT.get('DIV ID');
player.pauseVideo();
});
$('#play ID').click(function() {
var player = YT.get('DIV ID');
player.playVideo();
});
$('#mute ID').click(function() {
var player = YT.get('DIV ID');
var x = player.getPlayerState();
if ((x == 1) || (x == 2)) {
if (player.isMuted()) {
player.unMute();
} else {
player.mute();
}
}
});
});