Tengo una lista de videos HTML5 que también tienen un botón de reproducción.
Cada botón de reproducción tiene un identificador único (como un nombre de clase), y luego cada video tiene un nombre de clase correspondiente, de modo que puedo asignar un botón específico a un video específico para reproducirlo.
HTML
<figure class="hover-scale rounded mb-0 ratio ratio-1x1"> <a class="thumbnail-wrapper" href="........."> <video class="3c4c0f2d-6324-48c3-b32b-08d9c0b035e0 loaded" data-src="......." data-was-processed="true" loop="" preload="metadata" src="........" width="100%"> <source src=".........." type="video/mp4"> </video> </a> <p> <i class="uil uil-play text-white fs-20 video-play-button 3c4c0f2d-6324-48c3-b32b-08d9c0b035e0"></i> </p> </figure>JavaScript
var videoPlayBackBtn = document.getElementsByClassName('video-play-button'); for (let item of videoPlayBackBtn) { console.log(item.id); item.addEventListener('click', function(){ console.log(this); }) }Con el JS anterior, puedo obtener el identificador utilizado para el video, y deseo simplemente reproducir el video con el identificador coincidente como botón de reproducción y pausar cualquier otro video que no coincida. ¿Cómo puedo segmentar un video específico en este escenario?
Si bien sería posible diseccionar la cadena de class del elemento i para encontrar el video que coincida con ese GUID y configurarlo para que se reproduzca, sería una forma increíblemente frágil de lograr su objetivo y daría como resultado un código realmente feo e innecesario.
La forma más sencilla de lograr su objetivo es atravesar el DOM para encontrar el video relacionado con el i . Como ha etiquetado la pregunta con 'jQuery', aquí hay una implementación de un controlador único para todas las instancias de esta estructura en su HTML:
const $videos = $('figure video'); $('.video-play-button').on('click', e => { let $video = $(e.target).closest('figure').find('video'); $videos.not($video).each((i, v) => v.pause()); $video[0].play(); });