在 Videojs 中遍历视频

Question

感谢您查看我的问题。对于一项作业，我需要在 JQuery 手风琴中循环播放 5 个视频。我们需要创建自己的按钮，它们有自己的功能。目前我有 5 div 个不同的视频，但是，当我想播放例如第二个视频时，第一个视频将开始播放。第3、4、5个视频也是如此。

问题： 我如何更改我的代码，以便每个播放按钮都适用于每个不同的视频？我的猜测是 JQuery 每个功能，但我没有线索。

        <div id="video-wrap">
            <div id="accordion">
                <div class="acc-wrap"><img class="arrow" src="img/arrow.svg" alt="arrow">
                    <h3>Introduction</h3>
                </div>
                <div>
                    <div class="video-player" id="player-1">
                        <video id="my-video-1" class="video-js" preload="auto" width="1088px" height="612"
                            data-setup="{}">
                            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
                            <p class="vjs-no-js">
                                To view this video please enable JavaScript, and consider upgrading to a
                                web browser that
                                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
                                    video</a>
                            </p>
                        </video>
                        <div class="player-buttons">
                            <a class="play-toggle" class="video-play">
                                <img class="pause" src="img/play-btn.svg" alt="pause button">
                                <img class="play" src="img/play-btn2.svg" alt="play button">
                            </a>
                            <a class="forward-btn">
                                <img src="img/forward btn.svg" alt="forward button">
                            </a>
                            <a class="rewind-btn">
                                <img src="img/rewind btn.svg" alt="forward button">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="acc-wrap"><img class="arrow" src="img/arrow.svg" alt="arrow">
                    <h3>Daniel Shiffman: Coding Challenge 1</h3>
                </div>
                <div>
                    <div class="video-player" id="player-2">
                        <video id="my-video-2" class="video-js" preload="auto" width="1088px" height="612"
                            data-setup="{}">
                            <source src="video/citral.mp4" type="video/mp4" />
                            <p class="vjs-no-js">
                                To view this video please enable JavaScript, and consider upgrading to a
                                web browser that
                                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
                                    video</a>
                            </p>
                        </video>
                        <div class="player-buttons">
                            <a class="play-toggle" class="video-play">
                                <img class="pause" src="img/play-btn.svg" alt="pause button">
                                <img class="play" src="img/play-btn2.svg" alt="play button">
                            </a>
                            <a class="forward-btn">
                                <img src="img/forward btn.svg" alt="forward button">
                            </a>
                            <a class="rewind-btn">
                                <img src="img/rewind btn.svg" alt="forward button">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="acc-wrap"><img src="img/arrow.svg" alt="arrow">
                    <h3>Daniel Shiffman: Coding Challenge 2</h3>
                </div>
                <div>
                    <div class="video-player" id="player-3">
                        <video controls id="my-video-3" class="video-js" preload="auto" width="1088px" height="612"
                            data-setup="{}">
                            <source src="https://player.vimeo.com/video/420225730" type="video/mp4" />
                            <p class="vjs-no-js">
                                To view this video please enable JavaScript, and consider upgrading to a
                                web browser that
                                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
                                    video</a>
                            </p>
                        </video>
                        <div class="player-buttons">
                            <a class="play-toggle" class="video-play">
                                <img class="pause" src="img/play-btn.svg" alt="pause button">
                                <img class="play" src="img/play-btn2.svg" alt="play button">
                            </a>
                            <a class="forward-btn">
                                <img src="img/forward btn.svg" alt="forward button">
                            </a>
                            <a class="rewind-btn">
                                <img src="img/rewind btn.svg" alt="forward button">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="acc-wrap"><img src="img/arrow.svg" alt="arrow">
                    <h3>Daniel Shiffman: Coding Challenge 3</h3>
                </div>
                <div>
                    <div class="video-player" id="player-4">
                        <video controls id="my-video-4" class="video-js" preload="auto" width="1088px" height="612"
                            data-setup="{}">
                            <source src="https://player.vimeo.com/video/420225730" type="video/mp4" />
                            <p class="vjs-no-js">
                                To view this video please enable JavaScript, and consider upgrading to a
                                web browser that
                                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
                                    video</a>
                            </p>
                        </video>
                        <div class="player-buttons">
                            <a class="play-toggle" class="video-play">
                                <img class="pause" src="img/play-btn.svg" alt="pause button">
                                <img class="play" src="img/play-btn2.svg" alt="play button">
                            </a>
                            <a class="forward-btn">
                                <img src="img/forward btn.svg" alt="forward button">
                            </a>
                            <a class="rewind-btn">
                                <img src="img/rewind btn.svg" alt="forward button">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="acc-wrap"><img src="img/arrow.svg" alt="arrow">
                    <h3>Daniel Shiffman: Coding Challenge 4</h3>
                </div>
                <div>
                    <div class="video-player" id="player-5">
                        <video controls id="my-video-5" class="video-js" preload="auto" width="1088px" height="612"
                            data-setup="{}">
                            <source src="https://player.vimeo.com/video/420225730" type="video/mp4" />
                            <p class="vjs-no-js">
                                To view this video please enable JavaScript, and consider upgrading to a
                                web browser that
                                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
                                    video</a>
                            </p>
                        </video>
                        <div class="player-buttons">
                            <a class="play-toggle" class="video-play">
                                <img class="pause" src="img/play-btn.svg" alt="pause button">
                                <img class="play" src="img/play-btn2.svg" alt="play button">
                            </a>
                            <a class="forward-btn">
                                <img src="img/forward btn.svg" alt="forward button">
                            </a>
                            <a class="rewind-btn">
                                <img src="img/rewind btn.svg" alt="forward button">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

// Play/pause toggle //
$('.play-toggle').click(function () {
    if ($('.acc-wrap').hasClass("ui-state-active")) {
        if (player.paused()) {
            player.play();
            $('.play').css({
                "visibility": "visible",
            });
            $('.pause').css({
                "visibility": "hidden",
            });
        } else {
            player.pause();
            $('.play').css({
                "visibility": "hidden",
            });
            $('.pause').css({
                "visibility": "visible",
            });
        };
    };
});

Answer 1

我建议您进一步了解 Scope 和 Classes / Object Prototypes.

您 jQuery 代码的问题是有多个 .play-toggle class 并且您目前无法识别此播放按钮所属的正确视频到.

您可以通过将 event 参数传递到您的点击处理程序来开始确定范围，以确定实际点击的项目

$('.play-toggle').click(function (event) {
    console.log(event)
})

从这里您可以识别父容器找到视频并挂接到播放暂停功能。但是我会推荐另一种方法。

第 1 步：创建一个 VideoPlayer Class 以容纳所有 VideoPlayer 功能

class VideoPlayer {
    constructor(el) {
        this._el = el
        this._video = el.querySelector('video')
        this._playToggle = el.querySelector('.play-toggle')

        this.setupEventListeners()
    }

    setupEventListeners() {
        this._playToggle.addEventListener('click',() => {
            console.log(`play button clicked on element id ${this._el.id}`)
        })
    }
}

如果您不确定 classes，请仔细阅读它们，在这里我们确定视频播放器元素的范围并将它们保存为变量，然后初始化一个事件侦听器来侦听您的点击事件。您可以将所有视频播放器功能存储在此 class

中

第 2 步：遍历页面并识别所有潜在的视频播放器

let videoPlayers = document.querySelectorAll('.video-player')

这里我们知道所有视频播放器都包裹在父 class video-player 如果你 console.log(videoPlayers) 你应该看到一个元素数组

步骤 3. 为每个元素创建一个 VideoPlayer 实例class

videos.forEach(v => new VideoPlayer(v))

这将为您在 videoPlayers 中的每个项目创建一个新的 VidePlayer class 实例，现在如果您单击播放按钮，您应该会在您的控制台中看到 play button clicked on element id (whatever id)

再一次在您的视频播放器中 class 我会为您的按钮放置所有逻辑，在这里您可以连接到您想要自定义视频播放器的任何 HTML5 视频事件。

请注意，您必须自行处理删除事件侦听器的问题，这不是一个完整的答案，但应该为您提供足够的信息来解决您的问题

在 Videojs 中遍历视频

Iterate through video's in Videojs

javascript

jquery

video.js

playback