Работа с видео через js

Question

У меня есть определенный код js который будет ставить видео на паузу и убирать её, т.е. ничего сложного, примерно так:

if (!video[0].paused) {
  video[0].pause();
}

Обратная смена происходит подобным образом, но как видно я обращаюсь к первому блоку видео, хотя на странице их может быть несколько:

let video = document.getElementsByTagName('video');

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

Да всякие поиски по классу и подобное мне не подходит, работать будет только через js, и единственное что известно это то что видео будет где-то рядом, всё, так что привязки которые работают через клас который известен заранее мне неподходят.

Answer 1

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

Приведу абстрактный пример:

<div id="video-wrapper">
    <video id="video1" controls>
    <div class="close-caption">Какой либо текст</div>
</div>

При клике по элементу div с классом close-caption можно воспользоваться методом closest():

document.querySelectorAll(".close-caption").addEventListener("onclick", event => {
    const wrapper = event.target.closest("video-wrapper")
    const video = wrapper.querySelector("video")
    console.log(video.getAttribute("id")) // video1
}, false)

Если видео и блок субтитров находятся в разных блоках, то наиболее оптимальный вариант будет добавить к блоку субтитров data- атрибут, который например может быть равным id элемента video.

В этом случае:

<video id="video1" controls>
<div class="close-caption" data-video="video1">Какой либо текст</div> 

document.querySelectorAll(".close-caption").addEventListener("onclick", event => {
    const id = event.target.getAttribute("data-video")
    const video = document.querySelector(id)
    // console.log(video.getAttribute("id")) // video1
}, false)

ВАЖНО: В приведенных выше примерах можно обойтись без привязки к идентификаторам типа class, id, т.п., они здесь только для иллюстрации.

БЛОГ НА HUSL

Работа с видео через js

Ответы (1 шт):