创建一个html 引入video.js CDN
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
HTML 部分 (下边js部分效果需要最少两个Video 标签视频)
<video
id="my-video"
class="video-js vjs-big-play-centered"
controls
preload="auto"
width="600"
height="300"
poster="./img/banner_1.jpg"
data-setup="{}"
>
<source src="https://ypy48001.baomihua.com/d93b00adaf88972f3d1db8bd814cb528/60614D60/3564/35637193_9_4e9d4684174b11e59a92003048cc631a.mp4" type="video/mp4" />
<source src="MY_VIDEO.webm" type="video/webm" />
</video>
JS 部分 (多个h5播放器video，点击一个播放其他暂停)
var videos = document.getElementsByTagName('video');
console.log(videos)
for (var i = videos.length - 1; i >= 0; i--) {
(function(){
var p = i;
videos[p].addEventListener('play',function(){
pauseAll(p);
})
})()
}
function pauseAll(index){
for (var j = videos.length - 1; j >= 0; j--) {
if (j!=index) videos[j].pause();
}
};
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<title>自定义视频播放器</title>
</head>
<body>
<main>
<video
id="my-video"
class="video-js vjs-big-play-centered"
controls
preload="auto"
width="600"
height="300"
poster="./img/banner_1.jpg"
data-setup="{}"
>
<source src="https://ypy48001.baomihua.com/d93b00adaf88972f3d1db8bd814cb528/60614D60/3564/35637193_9_4e9d4684174b11e59a92003048cc631a.mp4" type="video/mp4" />
<source src="MY_VIDEO.webm" type="video/webm" />
</video>
</main>
</body>
</html>
<script type="text/javascript">
var videos = document.getElementsByTagName('video');
console.log(videos)
for (var i = videos.length - 1; i >= 0; i--) {
(function(){
var p = i;
videos[p].addEventListener('play',function(){
pauseAll(p);
})
})()
}
function pauseAll(index){
for (var j = videos.length - 1; j >= 0; j--) {
if (j!=index) videos[j].pause();
}
};
</script>
video.js 官方文档链接
https://videojs.com/getting-started/
部分video.js 功能
https://www.cnblogs.com/chenyingying0/p/12422727.html