如何解决我想通过一个播放/暂停按钮播放从 YouTube 嵌入的两个视频，我该如何实现
我的 wordpress 网站中有一个页面，我想在其中使用一个播放/暂停按钮并排播放两个 youtube 视频。单击播放时，两个视频都需要开始播放，暂停时都需要立即暂停。我怎样才能做到这一点。
解决方法
欢迎加入。
tl;博士
您可以通过使用 YouTube 的 YouTube Player API Reference for iframe Embeds 来实现这一点。基本上，您需要知道的一切都在那里。我冒昧地为您的想法开发了一个基本的测试代码。 You can find it here：
https://codepen.io/thaikolja/pen/rNjmLxN
怎么做
如果您有更多兴趣，这里有简要说明的分步指南。我们从 JavaScript 开始。
- 选择一个随机 YT 视频 ID（例如 dQw4w9WgXcQ），比如三个。
- 将它们添加到数组中，就像我在这里所做的一样：
let videoIds = [
'mM0nhQwN5iU','411r5LekD4M','GxH5piakaHc'
]
- 接下来，定义一个
let players = []数组。下一步，我们将在此处存储功能齐全的 YouTube 对象。 - 现在有一个 Google 函数 - 简单地说 - 将我们的 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 must remain exactly like this。
说到 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>
我希望这对您有所帮助。
干杯！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
