Jak mogę odtwarzać/wstrzymać więcej niż jedno wideo przez mouseover

Mam stronę z wieloma filmami i chcę odtworzyć każde wideo na mouseOver i wstrzymać na mouseOut.Jak mogę odtwarzać/wstrzymać więcej niż jedno wideo przez mouseover

Działa z wideo1, ale chcę pracować z wideo2 i tak dalej.

<!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>

Źródło

2013-10-03 Eyesis

Na podstawie odpowiedzi Etienne Miret minimalna realizacja nie wymaga specyficznych funkcjonować w ogóle.

Wystarczy ustawienie onmouseover="this.play()" i onmouseout="this.pause()" powinno załatwić sprawę:

<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>

Źródło

2013-10-03 13:57:31 mariusnn

Musisz podać referencję do filmu, który chcesz odtworzyć/wstrzymać. 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>

Źródło

2013-10-03 13:03:36 mariusnn

Dziękuję, to działa dobrze, ale rozwiązanie z „to” słowo kluczowe jest lepsze dla mnie. – Eyesis

@Eyesis To rzeczywiście bardziej dynamiczne rozwiązanie. – mariusnn

Użyj this kluczowe:

onmouseover="playPause(this)"

iw swoim javascript:

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

Źródło

2013-10-03 13:04:00

+1 ładny i dynamiczny. – Subby

Dziękujemy! Przyjmę tak szybko, jak to możliwe :) – Eyesis

Na tej podstawie; używanie 'onmouseover =" this.play() "' i 'onmouseout =" this.pause() "' powinno mieć taki sam efekt? – mariusnn

Jak mogę odtwarzać/wstrzymać więcej niż jedno wideo przez mouseover

Odpowiedz

Powiązane problemy