Ciao, attraverso un ciclo puoi gestire l'evento "play" di ciascun video in cui esegui, a sua volta, un ciclo di tutti gli elementi per mettere in pausa (metodo pause()) gli altri, o anche giusto quello che risulta in esecuzione.
Qui un esempio minimo:
codice HTML:<!DOCTYPE HTML> <html lang="it"> <head> <title>Esempio</title> </head> <body> <div id="contenitore_player_video"> <video class="videos" id="video1" poster="video/poster.png" controls > <source src="video/video1.mp4" type="video/mp4"> </video> <video class="videos" id="video2" poster="video/poster.png" controls > <source src="video/video2.mp4" type="video/mp4"> </video> <video class="videos" id="video3" poster="video/poster.png" controls > <source src="video/video3.mp4" type="video/mp4"> </video> </div> <script> // NodeList degli elementi video var elementiVideo = document.querySelectorAll('#contenitore_player_video .videos'); // Ciclo gli elementi elementiVideo.forEach(function(el){ // Gestisco l'evento play per ciascun elemento el.addEventListener('play', e => { // Questo elemento const me = e.currentTarget; // Ciclo tutti gli altri e li metto in pausa (se sono in esecuzione) elementiVideo.forEach(te => { // Esco se è l'elemento corrente o se è già in pausa if (me === te || te.paused) return // Metto in pausa te.pause(); // Azzero la testina di riproduzione //te.currentTime = 0; // <= Decommenta questo per ottenere un effetto "stop" }); }); }); </script> </body> </html>
Rispondi quotando