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
