我有一个包含许多视频的页面,希望播放每个视频mouseOver并暂停mouseOut.
它正在使用video1,但我想使用video2等等.
<!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>
基于Etienne Miret的答案,最小的实现根本不需要特定的功能.
简单的设置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>
使用this关键字:
onmouseover="playPause(this)"
并在您的Javascript中:
function playPause(video) {
if (video.paused) {
video.play();
} else {
video.pause();
}
}