极客教程如何使用jQuery在悬停的DIV上播放视频
在网站上给定一个视频，任务是在将光标悬停在视频上时播放该视频，并在将光标从视频div上移开时使用jQuery事件停止视频播放。
例子：假设你很匆忙，没有时间查看文章的整个视频，那么你只需将鼠标悬停在视频上即可看到其内容，而无需打开整个视频。这种方法非常有效，可以用来节省数据和用户的时间。这种方法最常用于YouTube和其他流行的视频流网站，允许光标悬停时播放视频。
方法：人们可以使用jQuery在悬停处播放视频。为此，他们需要有mouseenter函数，让视频在鼠标指针悬停在视频上时播放。同样地，人们可以通过jQuery的mouseleave函数来暂停视频。
使用jQuery mouseenter()方法: mouseenter() 方法是jQuery的一个内置方法，当鼠标指针移动到选定的元素上时，它就会发挥作用。
使用jQuery mouseleave()方法: mouseleave()方法是jQuery内置的方法，当鼠标指针离开选定的元素时，该方法会发挥作用。
代码 Implementation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width", initial-scale=1>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src="jquery.hoverplay.js"></script>
</head>
<body>
<div id="video-wrapper">
<video id="video" width="320" height="240"
controls data-play="hover" muted="muted">
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200107020629/sample_video.mp4"
type="video/mp4">
Your browser does not
support the video tag.
</video>
</div>
<script>
// Getting video element using jQuery
var video = ("#video");
// Check if video is ready to play
(video).on('canplay', function () {
(video).mouseenter(function () {
(this).get(0).play();
}).mouseleave(function () {
$(this).get(0).pause();
})
});
</script>
</body>
</html>
输出:
