artplayer.js是一款功能齐全支持弹幕图层、hls多码率、生成gif的现代html5视频播放器

特性

支持vtt和srt字幕

支持视频质量切换

支持自定义控件、层、上下文菜单、设置

支持播放速率、纵横比、翻页、窗口全屏或网络全屏调整

支持与其他依赖项的集成，如：flv.js、hls.js、dash.js、shaka player、webtorrent

支持图片模式下的chrome本地图片，或图片模式下的自定义图片

支持缩略图并在进度条中突出显示

支持保持原始视频比例、自适应大小

支持丰富的自定义事件监控，易于扩展

支持控制国际化

支持自定义插件

支持本地视频预览

支持字幕时间偏移

支持屏幕截图

使用方式：

npm

npm install artplayer

yarn

yarn add artplayer

script

<!-- 本地 -->
<script src="path/to/artplayer.js"></script>
<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
<!-- unpkg -->
<script src="https://unpkg.com/artplayer/dist/artplayer.js"></script>

示例代码

<script>
	var art = new Artplayer({
		container: '.artplayerBox', //容器
		url: './video/video.mp4', //视频地址
		title: 'this is title', //标题
		poster: './image/poster.png', //封面
		volume: 0.5, //音量大小
		isLive: false, //是否直播
		muted: false, //是否静音
		autoplay: false, //是否自动播放
		pip: true,
		autoSize: true, //是否自动播放大小
		screenshot: true, //显示截屏按钮
		setting: true, //显示设置按钮
		loop: true, //是否循环播放
		flip: true, //是否翻转
		playbackRate: true,
		aspectRatio: true, //显示保持比率按钮
		fullscreen: true, //显示全屏按钮
		fullscreenWeb: true, //是否网页全按钮
		subtitleOffset: true,
		miniProgressBar: true, //mini模式按钮
		localVideo: true, //本地视频
		localSubtitle: true, //本地字幕
		networkMonitor: false, //网络监控
		autoPip: true,
		mutex: true,
		backdrop: true,
		theme: '#ffad00', //主题色
		lang: navigator.language.toLowerCase(),
		moreVideoAttr: { //跨域
			crossOrigin: 'anonymous',
		},
		contextmenu: [{ //右键菜单
			html: 'Custom menu',
			click: function(contextmenu) {
				console.info('You clicked on the custom menu');
				contextmenu.show = false;
			},
		}, ],
		layers: [{ //视频图层
			html: `<img style="width: 100px" src="./image/icon.png">`,
			click: function() {
				console.info('You clicked on the custom layer');
			},
			style: {
				position: 'absolute',
				top: '20px',
				right: '20px',
				opacity: '.9',
			},
		}, ],
		quality: [{ //视频码率
				default: true,
				name: 'SD 480P',
				url: './video/quality.mp4',
			},
			{
				name: 'HD 720P',
				url: './video/quality_720.mp4',
			},
		],
		thumbnails: {
			url: './image/thumbnails.png',
			number: 100,
			width: 160,
			height: 90,
			column: 10,
		},
		//视频高亮字幕
		highlight: [{
				time: 60,
				text: 'One more chance',
			},
			{
				time: 120,
				text: 'good',
			},
		],
		//视频控制条
		controls: [{
			position: 'right',
			html: 'Control',
			click: function() {
				console.info('You clicked on the custom control');
			},
		}, ],
	});
</script>

提示：播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的。

链接: https://fly63.com/nav/3888