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

在网页中，我们经常需要在特定操作或事件触发时播放视频，例如在鼠标悬停在某个区域时播放特定视频。在这种场景下，使用 jQuery 库可以很方便地实现这一功能，下面我们来看具体的实现方法。

准备工作

首先，我们需要准备好用于播放视频的 HTML 代码以及相应的视频文件。为了保证跨浏览器的兼容性，我们建议使用 HTML5 <video> 标签，例如：

<video id="my-video" width="320" height="240">
  <source src="path/to/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

同时，我们需要在网页中引入 jQuery 库，例如：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

实现步骤

1. 使用 jQuery 获取需要悬停响应的 div 元素，例如：

var hoverDiv = $('#hover-div');

2. 为该 div 元素添加鼠标悬停事件的处理函数，例如：

hoverDiv.hover(function() {
  // 鼠标悬停时的处理代码
}, function() {
  // 鼠标移开时的处理代码
});

3. 在鼠标悬停事件的处理函数中，使用 jQuery 获取视频元素，并播放视频，例如：

var video = $('#my-video')[0]; // 注意加上 [0]，获取原生 video 元素
video.play();

4. 在鼠标移开事件的处理函数中，停止视频播放，例如：

video.pause();
video.currentTime = 0; // 将视频进度重置为 0

完整代码示例

$(function() {
  var hoverDiv = $('#hover-div');
  var video = $('#my-video')[0];
  hoverDiv.hover(function() {
    video.play();
  }, function() {
    video.pause();
    video.currentTime = 0;
  });
});

总结

使用 jQuery 在 div 上悬停时播放视频非常简单，只需要准备好 HTML 视频标签以及 jQuery 库，并在相应的事件处理函数中调用视频播放函数即可。注意，我们在示例代码中使用了 HTML5 <video> 标签，因此需要确保浏览器支持该标签才能正常播放视频。