如何播放/按鼠标悬停

暂停多个视频中，我有很多的视频页面，并希望发挥每个视频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

如何播放/按鼠标悬停

回答

相关问题