我在wordpress网站上有一个页面，我想用一个播放/暂停按钮并排播放两个youtube视频。当点击播放时，两个视频都需要开始播放，当暂停时，两者都需要同时暂停。我怎样才能做到这一点。
欢迎登机。
tl；dr
您可以通过使用YouTube的iframe嵌入的YouTube播放器API参考来实现这一点。基本上，你需要知道的都在里面。我已经自由地为您的想法开发了一个基本的测试代码。你可以在这里找到：
https://codepen.io/thaikolja/pen/rNjmLxN
如何操作
如果你有更多兴趣，这里有一个简单解释的分步指南。我们从JavaScript开始。
- 选择一个数字，比方说三个，随机YT视频ID(例如dQw4w9WgXcQ(
- 将它们添加到一个数组中，就像我在这里所做的那样：
let videoIds = [
'mM0nhQwN5iU',
'411r5LekD4M',
'GxH5piakaHc'
]
- 接下来，定义一个
let players = []数组。下一步我们将在这里存储功能齐全的YouTube对象 - 现在出现了一个谷歌函数，简单地说，它将我们的YT ID转换为一个对象，该对象将用于转换为
<iframe>，我们稍后需要将其包含在HTML代码中：
/**
* Created <iframe> players as used with YouTube embeds.
* Since this is an internal YouTube API function,
* DO NOT rename it.
*/
function onYouTubeIframeAPIReady() {
let player
/** We loop through the YouTube video IDs */
for (let videoId of videoIds) {
player = new YT.Player('player-' + videoId, {
width: '100%',
videoId: videoId
})
/** Let's add the newly created player object into our `players` array for later use */
players.push(player)
}
}
小而重要的注意事项：函数名称onYouTubeIframeAPIReady必须保持原样。
当谈到JS时，我们最不需要做的就是定义"；启动所有视频"；以及"；停止所有视频"；按钮我们开始了：
/**
* Stops to starts all videos defined
* in `videoIds` (if they're running)
*/
function pauseAllVideos() {
for (let i in players) {
players[i].pauseVideo()
}
}
/**
* Function to starts all videos as specified
* in `videoIds`.
*/
function playAllVideos() {
for (let i in players) {
players[i].playVideo()
}
}
最后一部分是HTML模型。我使用了Bootstrap 4.6(仅限CSS(使其看起来更整洁，但如果没有它也可以工作。这是源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Play and Pause all YouToube Videos at Once</title>
<script src="./main.js"></script>
<!-- This is just Bootstrap 5.0 for styling purposes and is optional -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- Bootstrap icons, to make it look a bit nicer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
<style>
i {
margin-right: 5px;
}
.player {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container my-5">
<div class="row mb-5">
<div class="col-12 col-lg-6 mb-3 mb-lg-0">
<button type="button" class="btn btn-success w-100 text-center" onclick="playAllVideos()">
<i class="bi-play-circle-fill"></i>
Play all Videos
</button>
</div>
<div class="col-12 col-lg-6">
<button type="button" class="btn btn-danger w-100" onclick="pauseAllVideos()">
<i class="bi-stop-circle-fill"></i>
Play all Videos
</button>
</div>
</div>
<div class="row">
<div class="col">
<div class="row">
<script type="text/javascript">
/** We create n elements of players, based on the YouTube IDs entered in `main.js` */
for (let videoId of videoIds) {
document.write(
'<div class="player" id="player-' + videoId + '"></div>'
)
}
</script>
</div>
</div>
</div>
</div>
<!-- Don't forget the main library from YouTube - otherwise it won't work, obviously -->
<script src="https://www.youtube.com/iframe_api" defer></script>
</body>
</html>
我希望这能有所帮助。
干杯！