如何播放/按鼠標懸停

暫停多個視頻中，我有很多的視頻頁面，並希望發揮每個視頻mouseOver和暫停對mouseOut。如何播放/按鼠標懸停

它正在與視頻1，但我想與視頻2等工作。

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

來源

2013-10-03 Eyesis

基於艾蒂安米雷特的答案最小的實現並不需要特定的功能。

簡單的設置onmouseover="this.play()"和onmouseout="this.pause()"應該做的伎倆：

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

來源

2013-10-03 13:57:31 mariusnn

你需要傳遞給您要播放/暫停視頻的參考。 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>

來源

2013-10-03 13:03:36 mariusnn

謝謝你，它工作得很好，但「這個」關鍵詞的解決方案是爲我好。 – Eyesis

@Eyesis這確實是一個更動態的解決方案。 – mariusnn

使用this關鍵字：

onmouseover="playPause(this)"

，並在你的JavaScript：

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

來源

2013-10-03 13:04:00

+1美好而充滿活力。 – Subby

謝謝！我會盡快接受:) – Eyesis

基於此;使用'onmouseover =「this.play（）」'和'onmouseout =「this.pause（）」'應該有相同的效果？ – mariusnn

如何播放/按鼠標懸停

回答

相關問題