如何使视频在鼠标悬停时播放并在鼠标移开时暂停？

Question

我想让我的视频在鼠标悬停和鼠标移出时播放。我的页面上有大约 4 个视频。我的 HTML 看起来像这样：

<div class="project-container">
    <video class="content" controls loop>
          <source src="videos/THESIS_VIDEO.mov">
    </video>
</div>

谢谢！

Answer 1

不得不偷一个工作视频来玩，因为我没有你的项目视频...改回来：

<div class="project-container">
    <video class="content" controls loop onmouseover="this.play()" onmouseout="this.pause();" >
          <source src="https://media.w3.org/2010/05/sintel/trailer.mp4">
    </video>
</div>

Fiddle: https://jsfiddle.net/2n3auu06/12/

如何使视频在鼠标悬停时播放并在鼠标移开时暂停？

How to make videos play on mouseover and pause on mouseout?

html

video

hover

mouseover

mouseout