如何通过鼠标悬停播放/暂停多个视频 [英] How can I play/pause more than one video by mouseover
本文介绍了如何通过鼠标悬停播放/暂停多个视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个包含许多视频的页面，并希望在 mouseOver 上播放
每个视频，并暂停 mouseOut 。
I have a page with many videos and wish to play
each video on mouseOver and pause on mouseOut.
它正在使用video1，但我想使用video2等等。
It is working with video1, but I want to work with video2 and so on.
<!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的答案，最小化实施根本不需要特定的功能。
Based on the answer of Etienne Miret a minimal implementation does not need a specific function at all.
只需设置 onmouseover =this.play（）和 onmouseout =this.pause（）应该这样做：
Simply setting onmouseover="this.play()" and onmouseout="this.pause()" should do the trick:
<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>
这篇关于如何通过鼠标悬停播放/暂停多个视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
