音视频前端UI组件【免费下载链接】ArtPlayer:art: ArtPlayer.js is a modern and full featured HTML5 video player项目地址https://gitcode.com/gh_mirrors/ar/ArtPlayer点击查看免费下载本文围绕 ArtPlayer 挂在构造函数Artplayer上的一组第一级静态属性展开系统讲解instances、version、env、build、config、utils、scheme、Emitter、validator、kindOf、html与option的用途、典型调用方式与底层实现原理。读完本文你将掌握如何借助这些静态属性实现多播放器实例管理、默认配置探测、选项校验、事件系统复用与工具函数调用从而写出更稳健的 ArtPlayer 二次开发代码。一、什么是 ArtPlayer 的静态属性在 ArtPlayer 中静态属性static properties指挂在构造函数Artplayer本身、而非挂在某个播放器实例上的第一级属性。它们不依赖任何new Artplayer(...)实例即可直接访问属于类级别的共享 API。文档指出这类属性在日常业务中很少被直接使用但在排查版本、调试默认值、批量管理实例或编写插件时极为关键。从源码结构看这些静态属性在 入口文件 中通过static get xxx()定义例如static get instances() { return instances } static get version() { return version } static get config() { return config } static get utils() { return utils } static get scheme() { return scheme } static get Emitter() { return Emitter } static get validator() { return validator } static get kindOf() { return validator.kindOf } static get html() { return Template.html } static get option() { return { ... } }对应的 TypeScript 声明位于 artplayer.d.ts全部标记为static readonly说明它们是只读的类级只读接口。下文将逐一拆解这些属性的用途与实现细节。二、实例管理Artplayer.instancesArtplayer.instances返回当前页面上所有播放器实例组成的数组。当你需要在多个播放器并存时例如视频列表页、多窗口监控统一管理它们这个属性非常有用。文档给出的最小演示如下console.info([...Artplayer.instances]); // 初始为空数组 var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, }); console.info([...Artplayer.instances]); // 现在包含 1 个实例这里使用[...Artplayer.instances]展开运算符是因为instances的 getter 直接返回内部数组引用展开可得到一份副本避免外部代码意外修改内部数组。底层实现与生命周期从 src/index.js 可以看到let id 0 const instances []每次new Artplayer(...)时实例会自动被push进instancesinstances.push(this)同时this.id id生成递增的实例序号调用art.destroy()时会通过instances.splice(instances.indexOf(this), 1)把该实例从数组中移除避免内存泄漏。此外Template 构造器 还利用constructor.instances做了一项安全检查禁止多个实例挂载到同一个 DOM 容器上errorHandle( constructor.instances.every(ins ins.template.$container ! this.$container), Cannot mount multiple instances on the same dom element, )实战遍历统一操作// 暂停所有播放器 Artplayer.instances.forEach(art art.pause()); // 打印每个实例的基本信息 Artplayer.instances.forEach(art { console.info(#${art.id}, art.option.url, art.playing); });三、版本与环境信息version、env、buildArtplayer.version返回播放器版本号字符串。版本号直接来源于 package.json 中的version字段当前仓库为5.4.1由构建时注入console.info(Artplayer.version); // 例如 5.4.1底层实现见 src/index.js 的import { version } from ../package.json。在控制台中快速核对线上环境使用的版本或配合Artplayer.DEBUG输出诊断日志源码中log(Version${Artplayer.version})都很常用。Artplayer.env文档说明返回播放器的环境变量。在 artplayer.d.ts 中其类型被声明为联合类型development | production可用于区分开发与生产构建。console.info(Artplayer.env);Artplayer.build文档说明返回播放器的构建时间戳。其类型声明为string见 artplayer.d.ts可用于核对产物构建时间、排查缓存是否过期。console.info(Artplayer.build);提示env与build均在类型声明中公开。由于二者面向调试与发布诊断属于低频 API实际业务中一般无需依赖。四、默认配置与底层校验config、scheme、validator、kindOf这一组静态属性共同构成了 ArtPlayer默认配置 → 校验规则 → 类型检测的完整管线。Artplayer.config视频相关配置清单返回播放器内置的视频配置对象实际对应 src/config/index.js它枚举了video元素相关的能力按类别分为四组console.info(Artplayer.config);分组内容举例propertiesaudioTracks、buffered、currentTime、duration、muted、paused、playbackRate、src、textTracks、volume等methodsaddTextTrack、canPlayType、load、play、pauseeventscanplay、durationchange、ended、playing、seeked、timeupdate、waiting等媒体事件prototypesvideoWidth、videoHeight、poster、playsInline、requestPictureInPicture等该配置是玩家内部事件绑定与视频代理的基础。例如 src/index.js 在DEBUG模式下会遍历config.events为每个video:xxx事件注册日志监听。Artplayer.scheme选项校验规则返回播放器选项option的校验 schema。它来自 src/scheme/index.js对option中每个字段声明了期望类型例如id、container、url、poster、type、theme、lang→ 字符串container允许字符串或Elementvolume→ 数字isLive、muted、autoplay、loop、hotkey→ 布尔plugins→ 函数数组layers、contextmenu、settings、controls→ 组件选项对象数组controls中的position仅接受top、left、right三个取值quality每项要求html、url字符串及可选的default布尔highlight每项要求数字time与字符串textthumbnails、subtitle、moreVideoAttr、i18n、icons、cssVar、customType各有嵌套结构约束。console.info(Artplayer.scheme);Artplayer.validator选项校验函数返回实际的校验函数。在 src/index.js 中它来自option-validator依赖并在构造函数中用于校验用户传入的选项this.option validator(mergeOption, scheme)即先mergeDeep(Artplayer.option, option)合并默认值再调用validator依据scheme校验。校验失败时会抛出包含字段路径的错误信息如xx.yy require string type便于定位配置问题。console.info(Artplayer.validator);Artplayer.kindOf类型检测工具返回类型检测工具函数源码中直接透传validator.kindOf见 src/index.js。它返回某个值的类型字符串如object、array、function可用于统一、稳定的类型判断console.info(Artplayer.kindOf); // 打印函数源码 console.info(Artplayer.kindOf([])); // array console.info(Artplayer.kindOf({})); // object console.info(Artplayer.kindOf(x)); // string五、工具函数集Artplayer.utilsArtplayer.utils返回播放器内置工具函数的集合对象。入口位于 src/utils/index.js由多个模块聚合导出export * from ./compatibility export * from ./dom export * from ./error export * from ./file export * from ./format export * from ./property export * from ./subtitle export * from ./time完整类型签名见 packages/artplayer/types/utils.d.ts主要分组如下类别代表函数说明环境检测isBrowser、isMobile、isSafari、isIOS见 compatibility.js基于 UA 判断DOM 操作query、queryAll、addClass、removeClass、append、setStyle、getStyle见 dom.js格式转换srtToVtt、vttToBlob、assToVtt字幕格式互转时间与数字secondToTime、clamp见 format.js异步与节流sleep、debounce、throttle、silencePromise见 utils.d.ts其他loadImg、download、escape、getExt、errorHandle、mergeDeep通用辅助典型用法示例console.info(Artplayer.utils); // 秒数转 mm:ss 或 hh:mm:ss console.info(Artplayer.utils.secondToTime(125)); // 02:05 // 数值钳制 console.info(Artplayer.utils.clamp(150, 0, 100)); // 100 // 环境判断 console.info(Artplayer.utils.isMobile, Artplayer.utils.isSafari);关于所有工具函数的完整列表与参数说明请参考 packages/artplayer/types/utils.d.ts。六、事件系统Artplayer.EmitterArtplayer.Emitter返回事件发射器的构造函数。它来自 src/utils/emitter.js是一个极简的发布/订阅实现提供四个方法on(name, fn, ctx)注册监听once(name, fn, ctx)只触发一次后自动移除内部用listener._ fn记录原始函数以便off匹配emit(name, ...data)触发事件并向监听者传递参数off(name, callback)移除监听若无匹配则删除该事件键。console.info(Artplayer.Emitter); // 用构造函数创建独立的事件总线 const bus new Artplayer.Emitter(); bus.on(hello, (msg) console.info(msg)); bus.emit(hello, ArtPlayer);值得注意的是ArtPlayer 主类本身就继承自 Emitterexport default class Artplayer extends Emitter见 src/index.js因此每个实例都具备on/once/emit/off能力例如art.on(ready, ...)、art.on(video:timeupdate, ...)。事件相关类型见 events.d.ts。七、默认渲染模板Artplayer.htmlArtplayer.html返回播放器所需的HTML 模板字符串。它来自 template.js 中的Template.html静态 getter内容是一整段div.art-video-player结构包含video classart-video视频元素封面、字幕、弹幕、图层、遮罩、底部控制栏进度条 左/中/右三区 controls、加载动画、通知、设置面板、信息面板、右键菜单等容器。console.info(Artplayer.html);模板字符串中甚至内嵌了版本号Player version: ${version}与信息面板所需的data-video占位属性。若你启用了useSSR选项模板不会由玩家注入而是由服务端预渲染template.js 中if (!option.useSSR)分支控制此时Artplayer.html可帮助你在服务端获取一致的结构。八、默认选项Artplayer.optionArtplayer.option返回播放器的默认选项对象即每次new Artplayer(option)时与用户传入配置做深合并mergeDeep的基准值。其定义位于 src/index.js完整默认值如下console.info(Artplayer.option);字段默认值说明id实例标识container#artplayer挂载容器选择器url/poster/type/theme///#f00视频地址、封面、类型、主题色volume0.7默认音量isLive/muted/autoplayfalse× 3直播/静音/自动播放autoSize/autoMini/loop/flip/playbackRate/aspectRatio/screenshot/settingfalse各项功能开关hotkey/mutex/backdroptrue/true/true快捷键/全局互斥/背景遮罩pip/fullscreen/fullscreenWeb/subtitleOffset/miniProgressBarfalse画中画与全屏相关useSSR/playsInline/lock/gesture/fastForward/autoPlayback/autoOrientation/airplayfalseplaysInline为true进阶行为开关proxyundefined自定义视频元素代理函数layers/contextmenu/controls/settings/quality/highlight/plugins[]各扩展点空数组thumbnails{ url: , number: 60, column: 10, width: 0, height: 0, scale: 1 }预览缩略图配置subtitle{ url: , type: , style: {}, name: , escape: true, encoding: utf-8, onVttLoad: vtt vtt }字幕配置moreVideoAttr{ controls: false, preload: isSafari ? auto : metadata }附加 video 属性i18n/icons/cssVar/customType{}国际化/图标/CSS 变量/自定义类型langnavigator?.language.toLowerCase()语言默认跟随浏览器实战获取当前生效的完整选项var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, }); // 用户传入选项与默认值深合并后的最终结果 console.info(art.option);由于构造函数执行mergeDeep(Artplayer.option, option)后再经validator校验art.option中总是包含上述全部字段这也是调试某个配置项为什么没生效时的首选检查对象。九、扩展阅读构造函数级可写常量除上述只读静态属性外src/index.js 还在构造函数上暴露了一批可覆盖的静态常量用于全局调整玩家行为类型见 artplayer.d.ts常量默认值作用Artplayer.DEBUGfalse开启后输出版本与全部video:*事件日志Artplayer.NOTICE_TIME2000提示条显示时长msArtplayer.CONTROL_HIDE_TIME3000控制栏自动隐藏延迟Artplayer.DBCLICK_TIME/DBCLICK_FULLSCREEN300/true双击判定与全屏行为Artplayer.VOLUME_STEP/SEEK_STEP0.1/5音量与进度步进Artplayer.PLAYBACK_RATE[0.5, 0.75, 1, 1.25, 1.5, 2]倍速档位Artplayer.ASPECT_RATIO[default, 4:3, 16:9]宽高比档位Artplayer.FLIP[normal, horizontal, vertical]翻转档位Artplayer.REMOVE_SRC_WHEN_DESTROYtrue销毁时是否清空 video srcArtplayer.LOG_VERSIONtrue控制台打印版本 Logo// 示例关闭销毁时的 src 清理 Artplayer.REMOVE_SRC_WHEN_DESTROY false;这些常量与上文静态属性共同构成 ArtPlayer 的类级 API在 src/index.js 中集中定义便于整体审查与覆盖。十、综合实战多实例管理与运行时自检把上述静态属性组合起来可以实现一个实用的运行时自检 批量管理工具// 1. 初始化两个播放器 new Artplayer({ container: #player-a, url: /assets/sample/video.mp4 }); new Artplayer({ container: #player-b, url: /assets/sample/video.mp4 }); // 2. 类级自检 console.table({ version: Artplayer.version, env: Artplayer.env, build: Artplayer.build, instanceCount: Artplayer.instances.length, hasConfig: !!Artplayer.config, hasUtils: !!Artplayer.utils, hasScheme: !!Artplayer.scheme, }); // 3. 校验器手写用法先合并默认值再校验 const merged Artplayer.utils.mergeDeep(Artplayer.option, { container: #player-c, url: /assets/sample/video.mp4, volume: 1, // 合法 }); const validated Artplayer.validator(merged, Artplayer.scheme); console.info(validated); // 4. 用 Emitter 搭建独立事件总线 const bus new Artplayer.Emitter(); bus.on(switch:quality, (q) console.info(switch to ${q})); bus.emit(switch:quality, 1080p); // 5. 统一销毁全部实例 Artplayer.instances.slice().forEach(art art.destroy()); console.info(Artplayer.instances.length); // 0结语ArtPlayer 的静态属性虽然使用频率不高却是理解其类级能力的钥匙instances支撑多实例生命周期管理config/scheme/validator/kindOf构成默认配置与校验管线utils提供可直接复用的工具函数Emitter是事件机制的核心实现html与option则分别代表默认渲染结构与默认配置基准。结合 src/index.js 与 artplayer.d.ts 阅读可以快速定位任何类级 API 的定义与行为为插件开发与复杂页面集成打下基础。赞分享音视频前端UI组件【免费下载链接】ArtPlayer:art: ArtPlayer.js is a modern and full featured HTML5 video player项目地址https://gitcode.com/gh_mirrors/ar/ArtPlayer点击查看免费下载相关推荐jsoneditor API 完全指南构造函数、配置选项、方法与静态属性详解jsoneditor API 完全指南构造函数、配置选项、方法与静态属性详解 本篇技术指南以 docs/api.md https://link.gitcode前端UI组件Recompose 完整 API 指南高阶组件、静态属性助手与 Observable 工具函数实战详解Recompose 完整 API 指南高阶组件、静态属性助手与 Observable 工具函数实战详解 导读 本文是 React 函数组件与高阶组件工具库 R前端UI组件React Native CodePush Android Java API 参考构造函数、CodePushBuilder 与静态方法实战详解React Native CodePush Android Java API 参考构造函数、CodePushBuilder 与静态方法实战详解 导读 本文是移动开发上一篇M3u8Downloader_H批量下M3U8视频下一篇在 React Styleguidist 示例中实现组件联动跨组件导入与 public 公开方法调用以 examples/themed 为例创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
