Come posso riprodurre/mettere in pausa più di un video con il mouseover

Ho una pagina con molti video e desidero riprodurre ogni video su mouseOver e mettere in pausa su mouseOut.Come posso riprodurre/mettere in pausa più di un video con il mouseover

Funziona con video1, ma voglio lavorare con video2 e così via.

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
    <video id="video1" width="420" onmouseover="playPause()" onmouseout="playPause()"> 
    <source src="mov_bbb.mp4" type="video/mp4"> 
    <source src="mov_bbb.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
    </video> 
    <video id="video2" width="420" onmouseover="playPause()" onmouseout="playPause()"> 
    <source src="mov_bbb.mp4" type="video/mp4"> 
    <source src="mov_bbb.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
    </video> 
</div> 

<script> 
var myVideo=document.getElementById("video1"); 

function playPause() 
{ 
if (myVideo.paused) 
    myVideo.play(); 
else 
    myVideo.pause(); 
} 
</script> 

</body> 
</html>

fonte

2013-10-03 Eyesis

Sulla base della risposta di Etienne Miret un'implementazione minimale non ha bisogno di una specifica funzione a tutti.

semplicemente impostando onmouseover="this.play()" e onmouseout="this.pause()" dovrebbe fare il trucco:

<div style="text-align:center"> 
    <video id="video1" width="420" onmouseover="this.play()" onmouseout="this.pause()"> 
    <source src="mov_bbb.mp4" type="video/mp4"> 
    <source src="mov_bbb.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
    </video> 
    <video id="video2" width="420" onmouseover="this.play()" onmouseout="this.pause()"> 
    <source src="mov_bbb.mp4" type="video/mp4"> 
    <source src="mov_bbb.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
    </video> 
</div>

fonte

2013-10-03 13:57:31 mariusnn

È necessario passare un riferimento al video che si desidera riprodurre/mettere in pausa. f.ex:

<div style="text-align:center"> 
    <video id="video1" width="420" onmouseover="playPause('video1')" onmouseout="playPause('video1')"> 
    <source src="mov_bbb.mp4" type="video/mp4"> 
    <source src="mov_bbb.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
    </video> 
    <video id="video2" width="420" onmouseover="playPause('video2')" onmouseout="playPause('video2')"> 
    <source src="mov_bbb.mp4" type="video/mp4"> 
    <source src="mov_bbb.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
    </video> 
</div> 

<script> 

function playPause(videoID) 
{ 
var myVideo=document.getElementById(videoID); 

if (myVideo.paused) 
    myVideo.play(); 
else 
    myVideo.pause(); 
} 
</script>

fonte

2013-10-03 13:03:36 mariusnn

Grazie, è funziona bene, ma la soluzione con "questa" parola chiave è meglio per me. – Eyesis

@Eyesis Questa è una soluzione più dinamica. – mariusnn

Utilizzare la parola chiave this:

onmouseover="playPause(this)"

e in Javascript:

function playPause(video) { 
    if (video.paused) { 
     video.play(); 
    } else { 
     video.pause(); 
    } 
}

fonte

2013-10-03 13:04:00

+1 bello e dinamico. – Subby

Grazie! Accetterò il prima possibile :) – Eyesis

Basato su questo; usando 'onmouseover =" this.play() "' e 'onmouseout =" this.pause() "' dovrebbe avere lo stesso effetto? – mariusnn

Come posso riprodurre/mettere in pausa più di un video con il mouseover

risposta

Problemi correlati