遍歷 Videojs 中的視頻

Question

謝謝你看我的問題。 對於作業，我需要在 JQuery 手風琴中遍歷 5 個視頻。 我們需要創建自己的按鈕，它們有自己的功能。 目前我有 5 個不同視頻的 div，但是，當我想播放第二個視頻時，第一個視頻將開始播放。 第 3、4 和 5 個視頻也是如此。

問題：如何更改我的代碼，以便每個播放按鈕適用於每個不同的視頻？ 我的猜測是 JQuery 每個 function，但我不知道。

        <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類，您目前無法識別該播放按鈕所屬的正確視頻。

您可以開始 scope 如果通過將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}`)
        })
    }
}

如果您不確定類，請閱讀它們，這里我們將視頻播放器元素定義為變量並將它們保存為變量，然后初始化一個事件偵聽器來偵聽您的點擊事件。 您將在此 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 視頻事件。

請注意，您必須自己處理刪除事件偵聽器，這不是一個完整的答案，但應該為您提供有關如何解決問題的足夠信息