video.js是一种非常受欢迎的前端视频播放器库，有很多插件，支持MP4、flv、hls、m3u8等，生态丰富，其本身非常小巧，使用方便。
video.js官网：https://videojs.com/
<!-- https://videojs.com/ -->
<html ><head>
<meta charset="utf-8">
<title>Admin | Video</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="" name="wzy">
<link href="video-js.css" target="_blank" rel="external nofollow" 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>
<div style="width: 33%;height: 200px;">
<video
id="my-video"
class="video-js"
>
<!-- <source src="oceans.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" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
</div>
<div style="width: 33%;height: 200px;">
<video
id="my-video2"
class="video-js"
>
<!-- <source src="oceans.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" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
</div>
<script src="./video.min.js"></script>
<script src="./jquery-3.3.1.min.js"></script>
<script>
var player = videojs('my-video', {
autoplay: 'false',//any以流量器支持的方式自动播放
muted:false,//设置true流量器才能自动播放，原因是浏览器新规则必须要用户与页面有交互后才能自动播放音视频
controls: true,
loop:true,
preload:'metadata',//auto、metadata、、
fluid:true,//自适应大小，true时width、height无用
width: '500px',
height: '400px',
playbackRates: [0.5, 1, 1.5, 2],
// poster: "Snipaste_2023-01-30_11-02-09.png",//预显示海报
dataSetup: {
},
plugins: {
// foo: {bar: true},
// boo: {baz: false}
}
});
var player2 = videojs('my-video2', {
autoplay: 'any',//any以流量器支持的方式自动播放
muted:false,//设置true流量器才能自动播放
controls: true,
loop:true,
preload:'metadata',
fluid:true,
width: '500px',
height: '400px',
playbackRates: [0.5, 1, 1.5, 2],
// poster: "Snipaste_2023-01-30_11-02-09.png",
dataSetup: {
},
plugins: {
// foo: {bar: true},
// boo: {baz: false}
}
});
player.src({type: 'video/mp4', src: 'oceans.mp4'}); //更新地址
player2.src({src: 'V-143405-B7736A80.mp4'});
player.ready(function() {
// get
var howLoudIsIt = player.volume();
console.log(howLoudIsIt)
// set
player.volume(0.5); // Set volume to half
//用户交互后才能自动播放音视频，任何点击都行，在play之前只要有交互就可以自动播放
// player.play();
// player.pause();
setTimeout(()=>{
player.pause();
player.muted(false);
console.log(player.currentTime())
player.currentTime(10);//设置播放帧
},1000)
});
// player.on('ended', function() {
// this.dispose(); //销毁
// });
</script>
</body>
</html>
资源打包下载：https://download.csdn.net/download/qq_42371913/87405871
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)