用Videojs对视频进行迭代。

Question

谢谢你看我的问题。

问题：我怎样才能改变我的代码，让每个播放按钮为每个不同的视频工作？我如何改变我的代码，使每个播放按钮 将工作为每个不同的视频？

Answer 1

我建议你多了解一下 范围 和 类对象原型.

你的jQuery代码马上的问题是，有多个jQuery代码。.play-toggle 类，而您目前无法确定该播放按钮所属的正确视频。

您可以通过传递 event 在你的点击处理程序中加入param，以确定哪个项目正在被点击。

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

从这里你可以识别父容器找到视频，并挂入播放暂停功能。不过我推荐另一种方法。

第1步：创建一个VideoPlayer类来容纳所有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}`)
        })
    }
}

如果你不清楚类，请阅读一下，这里我们将视频播放器的元素范围化，并将其保存为变量，然后初始化一个事件监听器，监听你的点击事件。你可以在这个类中存储所有的视频播放器功能。

第二步：在页面中迭代，识别所有潜在的视频播放器。

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

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

第3步：为每个元素创建一个VideoPlayer类的实例。为每个元素创建一个VideoPlayer类的实例。

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

这将为你在videoPlayers中的每个项目创建一个新的VidePlayer类实例，现在如果你点击一个播放按钮，你应该在控制台中看到一个日志，内容是 play button clicked on element id (whatever id)

再次，在您的视频播放器类中，我将为您的按钮提供所有的逻辑，在这里，您可以钩入任何您想要自定义视频播放器的HTML5视频事件。

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