javascript – 如何通过鼠标悬停来播放/暂停多个视频

我有一个页面有许多视频,并希望播放
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>

原文链接：https://www.f2er.com/js/152334.html

javascript – 如何通过鼠标悬停来播放/暂停多个视频

解决方法

猜你在找的JavaScript相关文章