Javascript HTML，JS如何在悬停状态下播放/停止视频

如您所见，我有一个关于在hover上播放/停止视频的问题。用户将鼠标悬停在视频上，视频将开始播放，当他将鼠标移开时，视频将停止播放。有可能吗？怎么可能？我这里有视频标签

<video id="video" controls="" loop="" src="/wp-content/uploads/2016/06/vid/elipsiniai-treniruokliai.mp4" width="auto" height="auto" alt=""></video>

试试：

给你

$（文档）.ready（函数（）{
$（.myvideos”）.on（“鼠标悬停”，函数（事件）{
这个。play（）；
}).on（'mouseout'，函数（事件）{
这个。暂停（）；
});
})

---

要播放视频/暂停悬停，请尝试以下操作：

JS:

CSS:

---

为此，您必须使用javascript。最简单的是使用jQuery/javascript实现的某种实现

你也可以在互联网上很容易地找到这一点，我只需在谷歌中键入“悬停视频”就花了3秒钟：

Html:

<div id="videosList">           
<div class="video">
    <video class="thevideo" loop preload="none">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
    </video>
  </div>
</div>

现在，您添加了一个在悬停时播放视频的功能：

function hoverVideo(e) {  
  $('video', this).get(0).play(); 
}

当用户离开视频时，您可以添加另一个功能：

function hideVideo(e) {
  $('video', this).get(0).pause(); 
}

---

你的作品，但以一种独特的方式。当我把鼠标移开时，它会播放视频。你想让它转过来吗？是的。我需要它能继续播放谢谢！最后再想想。我需要更改什么才能使此代码适用于同一网页上的每个视频，而不仅仅是一个网页上的视频？您应该为所有

视频标签
分配一个单独的
类
，并使用
类
而不是
id
对其进行初始化，这样，您就可以使用此功能初始化所有视频，而不是单独添加所有ID。
<div id="videosList">           
<div class="video">
    <video class="thevideo" loop preload="none">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
    </video>
  </div>
</div>

var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {  
  $('video', this).get(0).play(); 
}

function hideVideo(e) {
  $('video', this).get(0).pause(); 
}