Перебирать видео в Videojs - PullRequest
Новая
       120

Перебирать видео в Videojs

0 голосов
/ 30 мая 2020

Спасибо, что посмотрели на мой вопрос.

Вопрос: Как я могу изменить свой код, чтобы каждая кнопка воспроизведения работала для каждого отдельного видео?

1 Ответ

0 голосов
/ 30 мая 2020

Я бы порекомендовал узнать больше о Scope и Classes / Object Prototypes .

Проблема с вашим кодом jQuery прямо сейчас заключается в том, что есть несколько классов .play-toggle, и в настоящее время у вас нет возможности определить правильное видео, к которому принадлежит эта кнопка воспроизведения.

Вы можете начать область действия, передав параметр event в обработчик кликов, чтобы определить, какой на самом деле щелкается элемент 

$('.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}`)
        })
    }
}

Если вы не уверены в классах, прочтите на них, здесь мы определяем область действия элементов видеоплеера и сохраняем их как переменные, а затем инициализируем прослушиватель событий, который прослушивает событие щелчка. Вы должны хранить все функции вашего видеоплеера внутри этого класса

Шаг 2: Просмотрите страницу и определите все потенциальные видеопроигрыватели 

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

Здесь мы знаем все видео плееры заключены в родительский класс video-player, если вы console.log(videoPlayers) должны увидеть массив элементов

Шаг 3. Создайте экземпляр класса VideoPlayer для каждого элемента 

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

Это создаст новый экземпляр класса VidePlayer для каждого элемента, который у вас есть внутри videoPlayers, теперь, если вы нажмете кнопку воспроизведения, вы должны увидеть в своей консоли журнал play button clicked on element id (whatever id)

Once снова внутри вашего класса видеоплеера я бы разместил все logi c для ваших кнопок, здесь вы можете подключиться к любым HTML5 видео событиям, которые вы хотите настроить для своего видеоплеера.

Обратите внимание, что у вас будет чтобы самостоятельно удалить прослушиватели событий, это не полный ответ, но он должен дать вам достаточно информации о том, как решить вашу проблему

...