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

2023-11-26

我有一个包含很多视频的页面并希望播放 每个视频上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()" and 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> 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何通过鼠标悬停播放/暂停多个视频 的相关文章

随机推荐