文章最后更新时间：2024年06月02日
Artplayer简介
Artplayer是一个现代且功能齐全的H5播放器。它不仅全开源且提供了丰富的功能和插件，可以轻松地兼容集成到您的网站或应用程序中。
Artplayer支持多种视频解析方式。用户可以通过artplayer解析各种常见的视频格式，如MP4、M3U8、FLV等。同时，artplayer还支持解析在线视频，用户只需输入视频地址，artplayer便可自动解析并播放视频。这一功能方便了用户观看各种来源的视频，无需额外安装其他解析插件。
Artplayer具有良好的兼容性和稳定性。无论是在电脑端还是移动设备上，artplayer都能够稳定运行，并提供流畅的视频播放体验。无论是低带宽环境下的视频播放，还是高清视频的解析和播放，artplayer都能够应对自如，保证视频的流畅播放。
Artplayer还提供了丰富的播放控制功能。用户可以通过artplayer对视频进行暂停、播放、快进、快退等操作，还可以调整音量、全屏播放、选择分辨率等。这些功能的存在，使用户能够更加方便地控制视频播放，提高观看体验。
Artplayer还支持视频的自动播放和连续播放功能。用户可以设置artplayer在打开网页时自动播放视频，省去了手动点击播放的麻烦。同时，用户还可以设置artplayer在视频播放结束后自动播放下一个视频，实现视频的连续播放，让用户能够连续观看多个视频，提高观看效率。artplayer还支持视频的弹幕功能。用户可以在视频播放过程中发送弹幕，与其他观看者实时互动。这一功能在直播、音乐MV等场景中尤为重要，增加了用户的参与感和娱乐性。
Artplayer实例
Demo HTML
... <div id="player"></div> ... <script src="https://unpkg.com/artplayer/dist/artplayer.js"></script> <script src="js/HLS.min.js"></script>
Demo JS
var art = new Artplayer({
container: undefined, // 父元素
url: "", // 视频地址
title: "", // 视频标题
volume: 0.7, // 视频默认音量
theme: "#ffad00", // 播放器主题颜色
aspectRatio: true, // 是否开启宽高比自适应
autoSize: false, // 是否自动填充容器
screenshot: true, // 是否开启截图功能
setting: true, // 是否开启设置菜单
flip: true, // 是否开启视频翻转
playbackRate: true, // 是否开启视频播放速率
loop: false, // 是否循环播放
autoplay: false, // 是否自动播放
muted: false, // 是否开始禁音
hotkey: true, // 是否开启视频快捷键
fullscreen: true, // 是否允许全屏
fullscreenWeb: true, // 是否允许页面全屏
preload: "auto", // 预载入视频空间
volumeBar: true, // 是否开启音量调节
controlBar: true, // 是否开启控制条
subtitle: [], // 字幕列表
highlight: [], // 时间轴标记点
pip: true, // 是否支持画中画
autoMini: true, // 是否支持迷你模式
lock: false, // 是否锁定移动端播放器
lang: navigator.language, // 播放器语言
plugins: [], // 插件
moreVideoAttr: {}, // 更多 video 标签属性
HLSjsConfig: {}, // hls.js 配置
flvjsConfig: {}, // flv.js 配置
dashjsConfig: {}, // dash.js 配置
controls: [
'play',
'progress',
'time',
'spacer',
'fullscreen',
],
quality: [
{
name: 'SD',
value: 'https://example.com/SD.mp4',
},
{
name: 'HD',
value: 'https://example.com/HD.mp4',
},
{
name: 'FHD',
value: 'https://example.com/FHD.mp4',
},
],
layers: [
{
name: 'artplayer-plugin-danmuku',
data: [
{ time: 0, text: 'Hello World!' },
{ time: 5, text: 'Welcome to ArtPlayer.js' },
],
},
],
});Artplayer参数
container: undefined, // 父元素 url: "", // 视频地址 title: "", // 视频标题 volume: 0.7, // 视频默认音量 theme: "#ffad00", // 播放器主题颜色 aspectRatio: true, // 是否开启宽高比自适应 autoSize: false, // 是否自动填充容器 screenshot: true, // 是否开启截图功能 setting: true, // 是否开启设置菜单 flip: true, // 是否开启视频翻转 playbackRate: true, // 是否开启视频播放速率 loop: false, // 是否循环播放 autoplay: false, // 是否自动播放 muted: false, // 是否开始禁音 hotkey: true, // 是否开启视频快捷键 fullscreen: true, // 是否允许全屏 fullscreenWeb: true, // 是否允许页面全屏 preload: "auto", // 预载入视频空间 volumeBar: true, // 是否开启音量调节 controlBar: true, // 是否开启控制条 subtitle: [], // 字幕列表 highlight: [], // 时间轴标记点 pip: true, // 是否支持画中画 autoMini: true, // 是否支持迷你模式 lock: false, // 是否锁定移动端播放器 lang: navigator.language, // 播放器语言 plugins: [], // 插件 moreVideoAttr: {}, // 更多 video 标签属性 hlsjsConfig: {}, // hls.js 配置 flvjsConfig: {}, // flv.js 配置 dashjsConfig: {}, // dash.js 配置 poster: 'poster.jpg', autoSize: true, fullscreenWeb: true, localVideo: true, muted: true, loop: true, volume: 0.7, aspectRatio: '16:9', theme: '#f3ad27', lang: 'zh-cn', container：播放器容器的选择器 url：视频文件的URL title：视频的标题 poster：视频封面图的URL autoSize：自动调整播放器大小以适应视频 fullscreenWeb：启用浏览器内全屏模式 localVideo：在本地播放视频文件而不是从远程服务器下载 muted：静音播放视频 loop：循环播放视频 volume：初始音量 aspectRatio：视频宽高比 theme：播放器主题颜色 lang：播放器语言 controls：控制栏中的控件 quality：视频质量选项 layers：图层插件及其数据
Artplayer控制
示例:
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
muted: true,
});
art.on('ready', () => {
art.play();
});
play // 播放视频
pause // 暂停视频
toggle // 切换视频的播放和暂停
destroy // 销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 HTML，默认为 true
seek // 视频时间跳转，单位秒
forward // 视频时间快进，单位秒
backward // 视频时间快退，单位秒
volume // 设置和获取视频音量，范围在：[0, 1]
url // 设置和获取视频地址
switch // 设置视频地址，设置时和 art.url 类似，但会执行一些优化操作
switchUrl // 设置视频地址，设置时和 art.url 类似，但会执行一些优化操作
switchQuality// 设置视频画质地址，和 art.switchUrl 类似，但会带上之前的播放进度
muted // 设置和获取视频是否静音
currentTime// 设置和获取视频当前时间，设置时间时和 seek 类似，但它不会触发额外的事件
duration // 获取视频时长
screenshot// 下载当前视频帧的截图
getDataURL// 获取当前视频帧的截图的base64地址，返回的是一个 Promise
getBlobUrl// 获取当前视频帧的截图的blob地址，返回的是一个 Promise
fullscreen// 设置和获取播放器窗口全屏
fullscreenWeb// 设置和获取播放器网页全屏
pip // 设置和获取播放器画中画模式
poster // 设置和获取视频海报，只有在视频播放前才能看到海报效果
mini // 设置和获取播放器迷你模式
playing // 获取视频是否正在播放中
autoSize // 设置视频是否自适应尺寸
rect // 获取播放器的尺寸和坐标信息
flip // 设置和获取播放器翻转，支持normal, horizontal, vertical
playbackRate// 设置和获取播放器播放速度
aspectRatio// 设置和获取播放器长宽比
autoHeight// 当容器只有宽度，该属性可以自动计算出并设置视频的高度
attr // 动态获取和设置 video 元素的属性
type // 动态获取和设置视频类型
theme // 动态获取和设置播放器主题颜色
airplay // 开启隔空播放
loaded // 视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
played // 视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
proxy // DOM 事件的代理函数，实质上代理了 addEventListener 和 removeEventListener, 当使用 proxy 来处理事件，播放器销毁时也会自动销毁该事件
query // DOM 的查询函数，类似 document.querySelector，但被查询的对象局限于当前播放器内，可以避免同类名的错误
video // 快捷返回播放器的 video 元素
CSSVar // 动态获取或设置 CSS 变量
quality // 动态设置画质列表Artplayer监听
播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件
监听事件：
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.on('video:canplay', () => {
console.info('video:canplay');
});只监听一次事件：
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.once('video:canplay', () => {
console.info('video:canplay');
});手动触发事件：
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
art.emit('focus');移除事件：
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
const onReady = () => {
console.info('ready');
art.off('ready', onReady);
}
art.on('ready', onReady);全部事件监听API:
'video:canplay': [event: Event]; 'video:canplaythrough': [event: Event]; 'video:complete': [event: Event]; 'video:durationchange': [event: Event]; 'video:emptied': [event: Event]; 'video:ended': [event: Event]; 'video:error': [event: Error]; 'video:loadeddata': [event: Event]; 'video:loadedmetadata': [event: Event]; 'video:pause': [event: Event]; 'video:play': [event: Event]; 'video:playing': [event: Event]; 'video:progress': [event: Event]; 'video:ratechange': [event: Event]; 'video:seeked': [event: Event]; 'video:seeking': [event: Event]; 'video:stalled': [event: Event]; 'video:suspend': [event: Event]; 'video:timeupdate': [event: Event]; 'video:volumechange': [event: Event]; 'video:waiting': [event: Event]; 'document:mousemove': [event: Event]; 'document:mouseup': [event: Event]; info: [state: boolean]; layer: [state: boolean]; loading: [state: boolean]; mask: [state: boolean]; subtitle: [state: boolean]; contextmenu: [state: boolean]; control: [state: boolean]; setting: [state: boolean]; hotkey: [event: Event]; destroy: []; subtitleUpdate: [text: string]; subtitleLoad: [url: string]; subtitleSwitch: [url: string]; focus: [event: Event]; blur: [event: Event]; dblclick: [event: Event]; click: [event: Event]; hover: [state: boolean, event: Event]; mousemove: [event: Event]; resize: []; view: [state: boolean]; lock: [state: boolean]; aspectRatio: [aspectRatio: AspectRatio]; autoHeight: [height: number]; autoSize: []; ready: []; error: [error: Error, reconnectTime: number]; flip: [flip: Flip]; fullscreen: [state: boolean]; fullscreenError: [event: Event]; fullscreenWeb: [state: boolean]; mini: [state: boolean]; pause: []; pip: [state: boolean]; play: []; screenshot: [dataUri: string]; seek: [currentTime: number]; subtitleOffset: [offset: number]; restart: [url: string]; muted: [state: boolean];
Artplayer弹幕
弹幕示例:
...
<script src="https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js"></script>
...
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
setting: true,
plugins: [
artplayerPluginDanmuku({
//弹幕参数...
}),
],
});弹幕参数:
{
danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
fontSize: 25, // 字体大小，支持数字和百分比
color: '#FFFFFF', // 默认字体颜色
mode: 0, // 默认模式，0-滚动，1-静止
margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
antiOverlap: true, // 是否防重叠
useWorker: true, // 是否使用 web worker
synchronousPlayback: false, // 是否同步到播放速度
filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
heatmap: true, // 是否开启弹幕热度图, 默认为 false
beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
// 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
mount: document.querySelector('.artplayer-danmuku'),
}弹幕事件监听:
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
setting: true,
plugins: [
artplayerPluginDanmuku({
danmuku: '/assets/sample/danmuku.xml',
}),
],
});
art.on('artplayerPluginDanmuku:emit', (danmu) => {
console.info('新增弹幕', danmu);
});
art.on('artplayerPluginDanmuku:loaded', (danmus) => {
console.info('加载弹幕', danmus.length);
});
art.on('artplayerPluginDanmuku:error', (error) => {
console.info('加载错误', error);
});
art.on('artplayerPluginDanmuku:config', (option) => {
console.info('配置变化', option);
});
art.on('artplayerPluginDanmuku:stop', () => {
console.info('弹幕停止');
});
art.on('artplayerPluginDanmuku:start', () => {
console.info('弹幕开始');
});
art.on('artplayerPluginDanmuku:hide', () => {
console.info('弹幕隐藏');
});
art.on('artplayerPluginDanmuku:show', () => {
console.info('弹幕显示');
});
art.on('artplayerPluginDanmuku:destroy', () => {
console.info('弹幕销毁');
});Artplayer下载
此处为隐藏内容，请评论后查看隐藏内容，谢谢！
文章版权声明：除非注明，否则均为十八码原创文章，转载或复制请以超链接形式并注明出处。
MacPlayer.Html = '';
MacPlayer.Show();