如何使用 jQuery 在 div 上悬停时播放视频？

在Web开发中，我们常常需要实现在鼠标悬停时播放视频的效果。本文将介绍使用jQuery实现该功能的方法。

首先，我们需要准备一个视频文件和一个作为容器的div元素。在div元素中嵌入一个video元素，代码如下：

<div class="container">
  <video src="video.mp4" controls></video>
</div>

其中，视频文件名为video.mp4，控制条属性为controls。

接下来，我们需要使用jQuery来实现在div悬停时播放视频的效果。代码如下：

$(document).ready(function(){
  $('.container').hover(function(){
    $('video', this).get(0).play();
  }, function(){
    $('video', this).get(0).pause();
    $('video', this).get(0).currentTime = 0;
  });
});

解释：

1. 使用.ready()方法，等待DOM加载完毕后再执行JavaScript代码。
2. 使用.hover()方法，传入两个函数，第一个函数为鼠标悬停时执行的函数，第二个函数为鼠标离开时执行的函数。
3. 在鼠标悬停时，调用.get()方法获取到video元素，并用play()方法播放视频。
4. 在鼠标离开时，使用.pause()方法暂停视频播放，并使用.currentTime属性将视频时间设为0。

最后，我们需要使用CSS样式对容器进行美化。代码如下：

.container {
  width: 320px;
  height: 240px;
  position: relative;
  overflow: hidden;
}

video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
}

解释：

1. 给容器设置宽度和高度，并将position属性设为relative，overflow属性设为hidden，以达到控制视频大小和显示效果的目的。
2. 给video元素设置position属性为absolute，top和left属性为50%，使其居中显示，使用transform属性进行微调，并将宽度设为auto，高度设为100%。

代码片段：

```html
<div class="container">
  <video src="video.mp4" controls></video>
</div>

$(document).ready(function(){
  $('.container').hover(function(){
    $('video', this).get(0).play();
  }, function(){
    $('video', this).get(0).pause();
    $('video', this).get(0).currentTime = 0;
  });
});

.container {
  width: 320px;
  height: 240px;
  position: relative;
  overflow: hidden;
}

video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
}