javascript - youtube iframe api在另一个正在播放时停止视频
问题描述
我有一个包含多个视频的滑块。我希望能够在播放另一个视频时停止视频(如果它正在播放)。
我不是 js 专家,所以我在使它工作时遇到了一些麻烦。
我已经创建了这支笔:https ://codepen.io/vlrprbttst/pen/eYpMrmB?editors=1010作为起点,但我不知道如何继续。我想这部分与我正在寻找的东西有关:
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
但我不确定如何使用它:/
我曾经使用一种并不总是有效的方法,它依赖于一个复杂的系统,该系统具有一个不可见的 iframe 覆盖,可以触发使用 jquery 播放/暂停视频,但它并不总是有效(你可以看到它)这里:https ://codepen.io/vlrprbttst/pen/vxrWzQ )。我一直在网上寻找,但我只能找到同时播放多个视频。
如果在同一页面上播放不同的视频,有关如何检测视频播放和停止它的任何建议?有或没有 jquery 都可以。
非常感谢你
解决方案
我建议您创建您的 YouTube 播放器并将每个 om 存储在一个数组中。这样,您始终可以在回调中遍历它们中的每一个并控制应该发生的事情。
首先创建一个空数组来存储播放器和(可选)一个数组,该数组保存具有视频 id 的对象和要在其中创建播放器的元素。
let youtubePlayers = [];
const youtubeVideosSources = [
{
id: 'M7lc1UVf-VE',
player: 'player1'
},
{
id: 'VFQB1zE9zYU',
player: 'player2'
}
];
在您的就绪回调中,使用map()
带有 id 和播放器的数组的方法创建一个新的 YouTube 播放器数组,并将它们存储在您之前创建的空数组中。或者在这种情况下,覆盖变量的值。
function onYouTubeIframeAPIReady() {
youtubePlayers = youtubeVideosSources.map(({ id, player }) => new YT.Player(player, {
height: '360',
width: '640',
videoId: id,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
}));
}
然后在onPlayerStateChange
每个播放器的回调循环中,如果它们不是当前激活的播放器并且实际上正在播放,则停止它们。您可以使用该方法检查每个玩家的状态getPlayerState()
。
function onPlayerStateChange(event) {
const playing = YT.PlayerState.PLAYING;
if (event.data === playing) {
for (const player of youtubePlayers) {
if (player !== event.target && player.getPlayerState() === playing) {
player.stopVideo();
}
}
}
}
推荐阅读
- java - 实时重新加载数据库更新
- c# - 我怎样才能像键盘记录器一样只挂钩隐藏键盘来读取键?(条形码扫描器)
- python - Python Pandas - 无法识别来自另一个数据框列中的列的字符串
- php - 查看 Google 日历中创建的每个活动的会议链接
- bash - 如何将 Bash 数组拆分为 Markdown 表中的多个列?
- algorithm - 恢复领先奇异向量的快速方法
- android - Dagger2 依赖注入:它如何在 Android 应用程序中工作?
- android - 在另一个活动中显示连接到一个活动的现有导航菜单
- algorithm - 在无向无环图中找到两个节点之间的最大权重边
- c - 打印在超出未定义长度字符数组边界的奇怪字符