扫一扫分享
artplayer.js是一款功能齐全支持弹幕图层、hls多码率、生成gif的现代html5视频播放器
支持vtt和srt字幕
支持视频质量切换
支持自定义控件、层、上下文菜单、设置
支持播放速率、纵横比、翻页、窗口全屏或网络全屏调整
支持与其他依赖项的集成,如:flv.js、hls.js、dash.js、shaka player、webtorrent
支持图片模式下的chrome本地图片,或图片模式下的自定义图片
支持缩略图并在进度条中突出显示
支持保持原始视频比例、自适应大小
支持丰富的自定义事件监控,易于扩展
支持控制国际化
支持自定义插件
支持本地视频预览
支持字幕时间偏移
支持屏幕截图
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 必须是有尺寸的。
手机预览