效果如下:
video.js实现鼠标移入播放鼠标移出暂停_html5

<html>
<head>
<link href="video-js/video-js.css" rel="stylesheet" />

<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
<video
id="my-video1"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"

>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>

<p></p>
<p></p>
<video
id="my-video2"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"

>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>

<script src="video-js/video-js.js"></script>

<script>

var options = {
muted: true, //默认情况下将使所有音频静音
controls:false
};

function onPlayerReady() {
videojs.log('播放器已经准备好了!');

// In this context, `this` is the player that was created by Video.js.<br> // 注意,这个地方的上下文, `this` 指向的是Video.js的实例对像player
// this.play();

//监听视频结束
// How about an event listener?<br> // 如何使用事件监听?
this.on('ended', function() {
videojs.log('播放结束了!');
});

let that=this;
//监听鼠标点击事件
this.on('click',function() {
videojs.log('click!');
})

//
this.on('mouseover',function() {
videojs.log('mouseover!');
that.play();
});

this.on('mouseout',function() {
videojs.log('mouseout!');
that.pause();
})
}
var player = videojs('my-video1', options,onPlayerReady );
var player2 = videojs('my-video2', options,onPlayerReady );




</script>
</body>
</html>

将代码放到网站的根目录就可以看到效果了
​完整代码下载