我想用一个播放/暂停按钮播放从 YouTube 嵌入的两个视频我怎么能做到这一点答案

【问题标题】：I want to play two videos embed from YouTube with one play/pause button how can i achieve this我想用一个播放/暂停按钮播放从 YouTube 嵌入的两个视频我怎么能做到这一点
【发布时间】：2021-04-02 07:39:09
【问题描述】：

我的 wordpress 网站中有一个页面，我想用一个播放/暂停按钮并排播放两个 youtube 视频。单击播放时，两个视频都需要开始播放，暂停时都需要立即暂停。我怎样才能做到这一点。

【问题讨论】：

标签： button video youtube playback

【解决方案1】：

欢迎加入。

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 转换为一个对象，该对象将用于转换为我们稍后需要包含在 HTML 代码中的 <iframe>：

/**
 * 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)
    }
}

小而重要的注意事项：函数名onYouTubeIframeAPIReadymust 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>

我希望这对您有所帮助。

干杯！

【讨论】：