Tengo muchas etiquetas de video en una página. Necesito play/pause un elemento si se hizo clic en él y pausar el elemento anterior, si se está reproduciendo. Cuando hice clic en un elemento después de cargar la página, se reprodujo el elemento seleccionado, pero cuando hice clic por segunda vez, en el mismo video, no se detuvo.
<video class='vsingle' src='01.mp4' poster='01.jpg' preload='none' controls></video> <video class='vsingle' src='02.mp4' poster='02.jpg' preload='none' controls></video> <video class='vsingle' src='03.mp4' poster='03.jpg' preload='none' controls></video> $('.vsingle').on('click', function(){ if($(this).hasClass('active')){ $(this).trigger('pause').removeClass('active'); } else{ $('.active').trigger('pause').removeClass('active'); $(this).trigger('play').addClass('active'); } });El método jQuery .trigger() se ocupa de los eventos estándar. No reconoce los eventos que son exclusivos de las API web, como la interfaz MediaElement a la que pertenece la etiqueta <video> . Por lo tanto, los eventos "pause" y "play" no se pueden activar con ningún método jQuery. Además, los eventos de "pause"/"play" son activados por .pause() y .play() . Para usarlos, deberán agregarse como sufijo a un objeto JavaScript simple de una etiqueta <video> . jQuery $(objects) no puede usar métodos simples de JavaScript y viceversa.
$('video').on('click', function(e) { let vids = $.makeArray($(this).siblings('video')); vids.forEach(vid => { vid.pause(); vid.classList.remove('active'); }); $(this).toggleClass('active'); if ($(this).is('.active')) { this.play(); } else { this.pause(); } }); video { height: 30vh; cursor: pointer; } .active { outline: 2px solid blue } <video src='https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4'></video> <video src='https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4'></video> <video src='https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4'></video> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>