Как добавить атрибут к видео, когда кликают на play в controls?

Question

На странице в elementor у меня есть видео. Также загружен такой "custom code":

<script type ="module">
/* jshint  esversion: 8 */
let videos = document.querySelectorAll('.scrolledVideo');
videos.forEach(video => {
    video = video.querySelector('video')
    video.addEventListener('click', () => {
    if (video.getAttribute('data-paused') === "true"){
        video.setAttribute('data-paused', 'false')
        video.muted = false;
    }
    else video.setAttribute('data-paused', 'true') 
    })
    
})

</script>

Он работает, когда кликаешь на само видео, но не добавляет (и не обновляет значение, если оно есть) data-paused, когда кликаешь на кнопку play в controls. Нажатие на controls — это отдельное событие? Как добавить мой атрибут в обоих случаях?

Answer 1

Так и не нашел способа как взаимодействовать с play в controls. Пришлось добавлять div с прозрачным цветом и накладывать его поверх playс помощью абсолютного позиционирования. Затем смог добавить к нему вызов video.play() и установку атрибута:

<script type ="module">
/* jshint  esversion: 8 */
let videos = document.querySelectorAll('.scrolledVideo')
videos.forEach(video => {
    let btn = document.createElement('div');
    btn.classList.add('hoveredBtn')
    btn.setAttribute('style', "background-color: #0000000; max-width: 50px; width: 100%; max-height:45px; height:100%; min-height:45px; display:flex; z-index: 1000; position: absolute; top: 89.5%; left:0%;");
    video.appendChild(btn);
    video = video.querySelector('video')
    btn.addEventListener('click', () => {
    if (video.getAttribute('data-paused') === "true"){
        video.setAttribute('data-paused', 'false')
        video.muted = false;
        video.play()
    }
    else if (!video.getAttribute('data-paused') || video.getAttribute('data-paused') === "false"){video.setAttribute('data-paused', 'true')
    video.pause();
    } 
    })
video.addEventListener('click', (e) => {
    
    if (e.target.getAttribute('data-paused') === "true"){
        e.target.setAttribute('data-paused', 'false')
        e.target.muted = false;
    }
    else if (!e.target.getAttribute('data-paused') || e.target.getAttribute('data-paused') === "false") e.target.setAttribute('data-paused', 'true') 
    })
})

</script>

БЛОГ НА HUSL

Как добавить атрибут к видео, когда кликают на play в controls?

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