尧图网页设计 
音视频前端UI组件【免费下载链接】ArtPlayer:art: ArtPlayer.js is a modern and full featured HTML5 video player项目地址https://gitcode.com/gh_mirrors/ar/ArtPlayer点击查看免费下载导读本文聚焦 ArtPlayer 播放器组件中设置面板Settings Panel的完整实现与使用方案。设置面板是播放器右上角齿轮图标点开后弹出的交互菜单默认内置倍速Play Speed、画面比例Aspect Ratio、画面翻转Video Flip与字幕偏移Subtitle Offset四项能力同时支持开发者通过settings配置项自由定义按钮、单选列表、多级级联菜单、开关与滑块等五类自定义项并可在运行时通过art.setting.add / remove / updateAPI 对面板做动态增删改。读完本文你将掌握从零配置一个可复用的播放器设置面板、并深度定制其交互行为的完整方法。一、认识设置面板与内置项1.1 面板的启用方式设置面板由播放器实例上的setting布尔配置项控制同时四个内置功能由flip、playbackRate、aspectRatio、subtitleOffset四个开关分别控制。仅当setting: true时面板才会渲染var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, // 开启设置面板 flip: true, // 内置画面翻转 playbackRate: true, // 内置播放倍速 aspectRatio: true, // 内置画面比例 subtitleOffset: true, // 内置字幕偏移 });在源码层面面板的初始化位于 src/setting/index.js只有当option.setting为真时Setting组件才会执行format()与render()构建 DOM并监听blur/focus/resize事件控制显隐与布局。配置项的合法类型在 src/scheme/index.js 中被声明为布尔类型传入非布尔值会触发运行时校验错误。1.2 四个内置项的组成四个内置项以选择列表形态出现其定义分布在src/setting/目录下内置项名称name选项取值对应源码播放倍速playback-rate由PLAYBACK_RATE常量提供含 1.0 正常速度playbackRate.js画面比例aspect-ratio由ASPECT_RATIO常量提供含 defaultaspectRatio.js画面翻转flip由FLIP常量提供flip.js字幕偏移subtitle-offsetrange: [0, -10, 10, 0.1]滑块-10s ~ 10s步进 0.1ssubtitleOffset.js值得注意的一个实现细节flip、playbackRate、aspectRatio三个内置项在选中后都会调用art.setting.check(target)来刷新当前项的art-current高亮样式并通过监听video:ratechange、aspectRatio、flip等事件保持面板状态与播放器实际状态同步见 playbackRate.js 的mounted回调。而subtitleOffset则直接驱动art.subtitleOffset item.range[0]并将 tooltip 显示为${value}s见 subtitleOffset.js。从源码结构看内置项与用户自定义项走的是完全相同的渲染管线自定义项也可以获得与内置项一致的外观与交互体验。二、自定义项通用属性settings是一个数组每一项对应面板中的一个条目。所有自定义项共享以下基础属性合法类型约束见 ComponentOption属性类型说明htmlString,Element条目左侧显示的 DOM 内容iconString,Element条目左侧的图标元素widthNumber子列表selector 展开的宽度tooltipString条目右侧显示的提示文本nameString条目的唯一标识供add / update / remove定位可选disableBoolean是否禁用该条目可选indexNumber排序序号可选mountedFunction条目挂载到 DOM 后的回调可选从 src/setting/index.js 的format()逻辑看每个条目的name都必须唯一重复命名会抛出The [name] already exists in [setting]错误未显式提供name的条目会被自动编号为setting-0、setting-1……因此若要使用remove / update动态操作务必为条目显式命名。三、五类自定义项详解3.1 按钮Button按钮用于执行一次性动作核心属性为onClick属性类型说明htmlString,ElementDOM 元素iconString,Element图标元素onClickFunction点击事件回调widthNumber列表宽度tooltipString提示文本var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, settings: [ { html: Button, icon: img width22 height22 src/assets/img/state.svg, tooltip: tooltip, onClick(item, $dom, event) { console.info(item, $dom, event); return new tooltip; // 返回值会写入 item.tooltip实时更新右侧提示 }, }, ], });源码 createItem 对条目的类型判定顺序是先判断是否存在switch、再判断range、最后判断onClick。因此只要配置了onClick而不同时携带switch/range该条目即被渲染为按钮点击后回调的返回值会被赋给item.tooltip从而实现提示文案的动态刷新见 index.js。3.2 选择列表Selection List选择列表用于单选场景如切清晰度、选字幕核心属性为selector与onSelect属性类型说明htmlString,ElementDOM 元素iconString,Element图标元素selectorArray选项数组onSelectFunction点击某个选项时触发widthNumber列表宽度tooltipString提示文本下面是一个字幕切换 清晰度切换的完整组合示例其中default: true用于标记默认选中项选项内可携带任意自定义数据如urlvar art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, settings: [ { html: Subtitle, width: 250, tooltip: Subtitle 01, selector: [ { default: true, // 默认选中 html: span stylecolor:redSubtitle 01/span, url: /assets/sample/subtitle.srt?id1, // 自定义数据 }, { html: span stylecolor:yellowSubtitle 02/span, url: /assets/sample/subtitle.srt?id2, }, ], onSelect: function (item, $dom, event) { console.info(item, $dom, event); art.subtitle.url item.url; // 切换字幕 return item.html; // 返回值作为 tooltip 更新 }, }, { html: Quality, width: 150, tooltip: 1080P, selector: [ { default: true, html: 1080P, url: /assets/sample/video.mp4?id1080, }, { html: 720P, url: /assets/sample/video.mp4?id720, }, { html: 360P, url: /assets/sample/video.mp4?id360, }, ], onSelect: function (item, $dom, event) { console.info(item, $dom, event); art.switchQuality(item.url, item.html); // 切换清晰度 return item.html; }, }, ], });从源码实现看选择列表的点击处理分为两种路径见 index.js若当前条目本身携带selector子项点击后调用this.render(item.selector)进入下一级列表若是叶子选项则调用this.check(item)更新选中高亮再执行item.$parent.onSelect即配置在父级条目上的onSelect。每个选项都可以配置default: truecheck()内部会遍历同一级所有选项、用inverseClass在art-current类上做互斥切换见 index.js。3.3 多级级联列表Nested List只要在selector内部再嵌套selector即可构建多级菜单。点击携带子列表的条目会推进到下一级点击面板顶部的返回条头则回退到上一级var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, settings: [ { html: Multi-level, selector: [ { html: Setting 01, width: 150, selector: [ { html: Setting 01 - 01, }, { html: Setting 01 - 02, }, ], onSelect: function (item, $dom, event) { console.info(item, $dom, event); return item.html; }, }, { html: Setting 02, width: 150, selector: [ { html: Setting 02 - 01, }, { html: Setting 02 - 02, }, ], onSelect: function (item, $dom, event) { console.info(item, $dom, event); return item.html; }, }, ], }, ], });级联导航在源码中由render()与createHeader()共同支撑每个层级面板都会被缓存在this.cache一个Map中切换层级只是切换激活面板不会重复创建 DOM见 index.js 与 index.js返回条头art-setting-item-back的点击事件通过proxy绑定点击后render(item.$parents)回到上一层。3.4 开关Toggle Button开关用于布尔状态的切换如画中画开关核心属性为switch与onSwitch属性类型说明htmlString,Element条目 DOM 元素iconString,Element条目图标switchBoolean开关默认状态onSwitchFunction开关切换事件tooltipString提示文本var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, settings: [ { html: PIP Mode, tooltip: Close, icon: img width22 height22 src/assets/img/state.svg, switch: false, onSwitch: function (item, $dom, event) { console.info(item, $dom, event); const nextState !item.switch; // 计算下一个状态 art.pip nextState; // 联动画中画 item.tooltip nextState ? Open : Close; return nextState; // 返回值写入 item.switch驱动开关 UI }, }, ], });onSwitch的返回值会通过item.switch await item.onSwitch(...)写回开关状态同时switch属性已被改造成带 DOM 副作用的数据描述符赋值为true时显示开启图标、false时显示关闭图标见 index.js 与 index.js。因此读取当前状态用item.switch、切换后返回新状态即可让 UI 自动同步。3.5 范围滑块Range Slider滑块用于连续数值调整如亮度、倍速微调、字幕偏移核心属性为range、onRange与onChange属性类型说明htmlString,Element条目 DOM 元素iconString,Element条目图标rangeArray默认状态数组[value, min, max, step]onRangeFunction拖动结束change事件触发onChangeFunction拖动过程input事件触发tooltipString提示文本range数组的四元组语义如下const range [5, 1, 10, 1]; const value range[0]; // 当前值 const min range[1]; // 最小值 const max range[2]; // 最大值 const step range[3]; // 步进var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, settings: [ { html: Slider, tooltip: 5x, icon: img width22 height22 src/assets/img/state.svg, range: [5, 1, 10, 1], onChange: function (item, $dom, event) { console.info(item, $dom, event); return item.range[0] x; // 返回值作为 tooltip 实时更新 }, }, ], });底层实现中滑块直接映射为原生input typerangerange数组的第 0~3 位分别赋给$range.value / min / max / step见 index.js。onChange绑定input事件拖动过程高频触发、onRange绑定change事件松开滑块时触发一次回调执行前会把item.range[0]更新为当前valueAsNumber回调的返回值同样写回item.tooltip见 index.js。若希望实现拖动实时生效用onChange若希望松手后统一处理用onRange。四、运行时的动态增、删、改设置面板不仅支持启动时静态配置还可以通过art.setting实例在运行期操作。使用前通常需要先展开面板art.setting.show true。4.1 add —— 动态新增条目art.setting.add(item)会把新条目追加到面板底部传入结构与settings数组中的条目一致var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, }); art.setting.show true; art.setting.add({ html: Slider, tooltip: 5x, icon: img width22 height22 src/assets/img/state.svg, range: [5, 1, 10, 1], });源码层面add()执行option.push(item)→format()分配唯一name→createItem(item)构建 DOM→render()刷新面板并返回新增的条目对象见 index.js。4.2 remove —— 按名称删除条目先为条目配置name作为唯一标识再调用art.setting.remove(slider)var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, flip: true, settings: [ { name: slider, html: Slider, tooltip: 5x, icon: img width22 height22 src/assets/img/state.svg, range: [5, 1, 10, 1], }, ], }); art.setting.show true; art.on(ready, () { setTimeout(() { // 按 name 删除该设置项 art.setting.remove(slider); }, 3000); });remove()内部先通过find(name)定位条目递归遍历含嵌套 selector 的全部层级找不到时会抛出Cant find [name] in the [setting]错误随后从所属数组splice移除、注销其绑定的事件inactivate、删除对应 DOM 并重渲染见 index.js 与 index.js。4.3 update —— 按名称原地更新art.setting.update({ name: slider, ...新属性 })会在找到目标后以Object.assign合并新属性、重建该条目的 DOMvar art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, settings: [ { name: slider, html: Slider, tooltip: 5x, icon: img width22 height22 src/assets/img/state.svg, range: [5, 1, 10, 1], }, ], }); art.setting.show true; art.on(ready, () { setTimeout(() { // 按 name 更新该设置项 art.setting.update({ name: slider, html: PIP Mode, tooltip: Close, icon: img width22 height22 src/assets/img/state.svg, switch: false, }); }, 3000); });值得注意的是上述示例把一条滑块条目整体更新为开关switch: false是可行的——update()会重建条目 DOMcreateItem(item, true)根据新属性重新判定条目类型若name不存在update()会退化为调用add()直接追加新条目见 index.js。五、面板交互与布局的底层原理5.1 展开 / 收起面板的展开收起由齿轮按钮控制其点击处理器为art.setting.toggle()见 control/setting.js。同时面板遵循失焦即收起策略播放器blur时若面板处于展开状态则自动收起focus时若点击目标既不在设置按钮上、也不在面板内部同样收起见 index.js。齿轮按钮的 tooltip 会随展开状态在Show Setting / Hide Setting之间切换。5.2 尺寸与定位面板的尺寸与位置由resize()统一计算相关常量定义在 src/index.js常量默认值用途SETTING_WIDTH250面板默认宽度pxSETTING_ITEM_WIDTH200内置选择列表子项宽度pxSETTING_ITEM_HEIGHT35每个条目高度px高度按当前激活列表条目数 × 条目高度计算子级列表额外加一行返回条头宽度优先取激活列表首项$parent.width、缺省回落到SETTING_WIDTH面板默认以设置按钮为中心水平居中若超出播放器右边界则自动改用右对齐见 index.js。5.3 面板样式面板及其条目的视觉样式定义在 src/style/setting.less 中容器类art-setting-panel、条目类art-setting-item、当前项高亮类art-current、滑块类art-setting-range等移动端下的适配规则位于 src/style/mobile.less。若需调整面板外观可通过覆盖这些类名或设置播放器theme主题色实现。六、类型定义与调用链速查配置项的类型声明settings为组件数组、setting为布尔见 src/scheme/index.js对外 TypeScript 声明见 types/artplayer.d.ts 与 types/component.d.ts编辑器可获得完整的Setting实例 API 提示面板实例的公开方法add/remove/update/find/check/resize/show全部实现在 src/setting/index.js继承自Component基类src/utils/component.js四个内置项的独立实现可分别阅读 playbackRate.js、aspectRatio.js、flip.js、subtitleOffset.js。七、推荐实践小结先开总开关setting: true是面板渲染的前提其余四个内置开关可按需独立开合善用name需要运行时remove/update的条目务必显式命名并保持唯一否则会自动生成不稳定的setting-N编号区分回调时机滑块场景下实时预览用onChangeinput松手提交用onRangechange按钮用onClick、开关用onSwitch、选择项用onSelect巧用返回值各类回调的返回值都会写入item.tooltip是低成本实现选中后提示同步的惯用手段组合级联与数据绑定selector 选项可携带任意字段如url、value在onSelect中联动art.subtitle.url、art.switchQuality()等播放器 API即可快速搭建字幕切换与多清晰度切换这类真实业务面板。赞分享音视频前端UI组件【免费下载链接】ArtPlayer:art: ArtPlayer.js is a modern and full featured HTML5 video player项目地址https://gitcode.com/gh_mirrors/ar/ArtPlayer点击查看免费下载相关推荐npkill Profiles 完全指南内置删除预设、匹配机制与自定义配置npkill Profiles 完全指南内置删除预设、匹配机制与自定义配置 导读 npkill 的核心能力是扫描并列出系统中 node_modules 等可MediaCrawler 多平台自媒体数据爬虫实战指南5 分钟跑通七平台内容采集MediaCrawler 多平台自媒体数据爬虫实战指南5 分钟跑通七平台内容采集 MediaCrawler 是一个多平台自媒体数据爬虫覆盖小红书、抖音、快手网页爬虫数据工程OrchardCore 自定义设置Custom Settings完整实战指南从内容类型创建到代码与 Liquid 访问OrchardCore 自定义设置Custom Settings完整实战指南从内容类型创建到代码与 Liquid 访问 导读 本文基于 Orchard CCMS后端Web框架上一篇Windows HEIC缩略图扩展方案解决iPhone照片在Windows中的预览难题下一篇3步配置LinkSwift解锁9大网盘全速下载的终极方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ArtPlayer 设置面板（Settings Panel）完整指南：内置项、自定义项与动态增删改
音视频前端UI组件【免费下载链接】ArtPlayer:art: ArtPlayer.js is a modern and full featured HTML5 video player项目地址https://gitcode.com/gh_mirrors/ar/ArtPlayer点击查看免费下载导读本文聚焦 ArtPlayer 播放器组件中设置面板Settings Panel的完整实现与使用方案。设置面板是播放器右上角齿轮图标点开后弹出的交互菜单默认内置倍速Play Speed、画面比例Aspect Ratio、画面翻转Video Flip与字幕偏移Subtitle Offset四项能力同时支持开发者通过settings配置项自由定义按钮、单选列表、多级级联菜单、开关与滑块等五类自定义项并可在运行时通过art.setting.add / remove / updateAPI 对面板做动态增删改。读完本文你将掌握从零配置一个可复用的播放器设置面板、并深度定制其交互行为的完整方法。一、认识设置面板与内置项1.1 面板的启用方式设置面板由播放器实例上的setting布尔配置项控制同时四个内置功能由flip、playbackRate、aspectRatio、subtitleOffset四个开关分别控制。仅当setting: true时面板才会渲染var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, // 开启设置面板 flip: true, // 内置画面翻转 playbackRate: true, // 内置播放倍速 aspectRatio: true, // 内置画面比例 subtitleOffset: true, // 内置字幕偏移 });在源码层面面板的初始化位于 src/setting/index.js只有当option.setting为真时Setting组件才会执行format()与render()构建 DOM并监听blur/focus/resize事件控制显隐与布局。配置项的合法类型在 src/scheme/index.js 中被声明为布尔类型传入非布尔值会触发运行时校验错误。1.2 四个内置项的组成四个内置项以选择列表形态出现其定义分布在src/setting/目录下内置项名称name选项取值对应源码播放倍速playback-rate由PLAYBACK_RATE常量提供含 1.0 正常速度playbackRate.js画面比例aspect-ratio由ASPECT_RATIO常量提供含 defaultaspectRatio.js画面翻转flip由FLIP常量提供flip.js字幕偏移subtitle-offsetrange: [0, -10, 10, 0.1]滑块-10s ~ 10s步进 0.1ssubtitleOffset.js值得注意的一个实现细节flip、playbackRate、aspectRatio三个内置项在选中后都会调用art.setting.check(target)来刷新当前项的art-current高亮样式并通过监听video:ratechange、aspectRatio、flip等事件保持面板状态与播放器实际状态同步见 playbackRate.js 的mounted回调。而subtitleOffset则直接驱动art.subtitleOffset item.range[0]并将 tooltip 显示为${value}s见 subtitleOffset.js。从源码结构看内置项与用户自定义项走的是完全相同的渲染管线自定义项也可以获得与内置项一致的外观与交互体验。二、自定义项通用属性settings是一个数组每一项对应面板中的一个条目。所有自定义项共享以下基础属性合法类型约束见 ComponentOption属性类型说明htmlString,Element条目左侧显示的 DOM 内容iconString,Element条目左侧的图标元素widthNumber子列表selector 展开的宽度tooltipString条目右侧显示的提示文本nameString条目的唯一标识供add / update / remove定位可选disableBoolean是否禁用该条目可选indexNumber排序序号可选mountedFunction条目挂载到 DOM 后的回调可选从 src/setting/index.js 的format()逻辑看每个条目的name都必须唯一重复命名会抛出The [name] already exists in [setting]错误未显式提供name的条目会被自动编号为setting-0、setting-1……因此若要使用remove / update动态操作务必为条目显式命名。三、五类自定义项详解3.1 按钮Button按钮用于执行一次性动作核心属性为onClick属性类型说明htmlString,ElementDOM 元素iconString,Element图标元素onClickFunction点击事件回调widthNumber列表宽度tooltipString提示文本var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, settings: [ { html: Button, icon: img width22 height22 src/assets/img/state.svg, tooltip: tooltip, onClick(item, $dom, event) { console.info(item, $dom, event); return new tooltip; // 返回值会写入 item.tooltip实时更新右侧提示 }, }, ], });源码 createItem 对条目的类型判定顺序是先判断是否存在switch、再判断range、最后判断onClick。因此只要配置了onClick而不同时携带switch/range该条目即被渲染为按钮点击后回调的返回值会被赋给item.tooltip从而实现提示文案的动态刷新见 index.js。3.2 选择列表Selection List选择列表用于单选场景如切清晰度、选字幕核心属性为selector与onSelect属性类型说明htmlString,ElementDOM 元素iconString,Element图标元素selectorArray选项数组onSelectFunction点击某个选项时触发widthNumber列表宽度tooltipString提示文本下面是一个字幕切换 清晰度切换的完整组合示例其中default: true用于标记默认选中项选项内可携带任意自定义数据如urlvar art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, settings: [ { html: Subtitle, width: 250, tooltip: Subtitle 01, selector: [ { default: true, // 默认选中 html: span stylecolor:redSubtitle 01/span, url: /assets/sample/subtitle.srt?id1, // 自定义数据 }, { html: span stylecolor:yellowSubtitle 02/span, url: /assets/sample/subtitle.srt?id2, }, ], onSelect: function (item, $dom, event) { console.info(item, $dom, event); art.subtitle.url item.url; // 切换字幕 return item.html; // 返回值作为 tooltip 更新 }, }, { html: Quality, width: 150, tooltip: 1080P, selector: [ { default: true, html: 1080P, url: /assets/sample/video.mp4?id1080, }, { html: 720P, url: /assets/sample/video.mp4?id720, }, { html: 360P, url: /assets/sample/video.mp4?id360, }, ], onSelect: function (item, $dom, event) { console.info(item, $dom, event); art.switchQuality(item.url, item.html); // 切换清晰度 return item.html; }, }, ], });从源码实现看选择列表的点击处理分为两种路径见 index.js若当前条目本身携带selector子项点击后调用this.render(item.selector)进入下一级列表若是叶子选项则调用this.check(item)更新选中高亮再执行item.$parent.onSelect即配置在父级条目上的onSelect。每个选项都可以配置default: truecheck()内部会遍历同一级所有选项、用inverseClass在art-current类上做互斥切换见 index.js。3.3 多级级联列表Nested List只要在selector内部再嵌套selector即可构建多级菜单。点击携带子列表的条目会推进到下一级点击面板顶部的返回条头则回退到上一级var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, settings: [ { html: Multi-level, selector: [ { html: Setting 01, width: 150, selector: [ { html: Setting 01 - 01, }, { html: Setting 01 - 02, }, ], onSelect: function (item, $dom, event) { console.info(item, $dom, event); return item.html; }, }, { html: Setting 02, width: 150, selector: [ { html: Setting 02 - 01, }, { html: Setting 02 - 02, }, ], onSelect: function (item, $dom, event) { console.info(item, $dom, event); return item.html; }, }, ], }, ], });级联导航在源码中由render()与createHeader()共同支撑每个层级面板都会被缓存在this.cache一个Map中切换层级只是切换激活面板不会重复创建 DOM见 index.js 与 index.js返回条头art-setting-item-back的点击事件通过proxy绑定点击后render(item.$parents)回到上一层。3.4 开关Toggle Button开关用于布尔状态的切换如画中画开关核心属性为switch与onSwitch属性类型说明htmlString,Element条目 DOM 元素iconString,Element条目图标switchBoolean开关默认状态onSwitchFunction开关切换事件tooltipString提示文本var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, settings: [ { html: PIP Mode, tooltip: Close, icon: img width22 height22 src/assets/img/state.svg, switch: false, onSwitch: function (item, $dom, event) { console.info(item, $dom, event); const nextState !item.switch; // 计算下一个状态 art.pip nextState; // 联动画中画 item.tooltip nextState ? Open : Close; return nextState; // 返回值写入 item.switch驱动开关 UI }, }, ], });onSwitch的返回值会通过item.switch await item.onSwitch(...)写回开关状态同时switch属性已被改造成带 DOM 副作用的数据描述符赋值为true时显示开启图标、false时显示关闭图标见 index.js 与 index.js。因此读取当前状态用item.switch、切换后返回新状态即可让 UI 自动同步。3.5 范围滑块Range Slider滑块用于连续数值调整如亮度、倍速微调、字幕偏移核心属性为range、onRange与onChange属性类型说明htmlString,Element条目 DOM 元素iconString,Element条目图标rangeArray默认状态数组[value, min, max, step]onRangeFunction拖动结束change事件触发onChangeFunction拖动过程input事件触发tooltipString提示文本range数组的四元组语义如下const range [5, 1, 10, 1]; const value range[0]; // 当前值 const min range[1]; // 最小值 const max range[2]; // 最大值 const step range[3]; // 步进var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, settings: [ { html: Slider, tooltip: 5x, icon: img width22 height22 src/assets/img/state.svg, range: [5, 1, 10, 1], onChange: function (item, $dom, event) { console.info(item, $dom, event); return item.range[0] x; // 返回值作为 tooltip 实时更新 }, }, ], });底层实现中滑块直接映射为原生input typerangerange数组的第 0~3 位分别赋给$range.value / min / max / step见 index.js。onChange绑定input事件拖动过程高频触发、onRange绑定change事件松开滑块时触发一次回调执行前会把item.range[0]更新为当前valueAsNumber回调的返回值同样写回item.tooltip见 index.js。若希望实现拖动实时生效用onChange若希望松手后统一处理用onRange。四、运行时的动态增、删、改设置面板不仅支持启动时静态配置还可以通过art.setting实例在运行期操作。使用前通常需要先展开面板art.setting.show true。4.1 add —— 动态新增条目art.setting.add(item)会把新条目追加到面板底部传入结构与settings数组中的条目一致var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, }); art.setting.show true; art.setting.add({ html: Slider, tooltip: 5x, icon: img width22 height22 src/assets/img/state.svg, range: [5, 1, 10, 1], });源码层面add()执行option.push(item)→format()分配唯一name→createItem(item)构建 DOM→render()刷新面板并返回新增的条目对象见 index.js。4.2 remove —— 按名称删除条目先为条目配置name作为唯一标识再调用art.setting.remove(slider)var art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, flip: true, settings: [ { name: slider, html: Slider, tooltip: 5x, icon: img width22 height22 src/assets/img/state.svg, range: [5, 1, 10, 1], }, ], }); art.setting.show true; art.on(ready, () { setTimeout(() { // 按 name 删除该设置项 art.setting.remove(slider); }, 3000); });remove()内部先通过find(name)定位条目递归遍历含嵌套 selector 的全部层级找不到时会抛出Cant find [name] in the [setting]错误随后从所属数组splice移除、注销其绑定的事件inactivate、删除对应 DOM 并重渲染见 index.js 与 index.js。4.3 update —— 按名称原地更新art.setting.update({ name: slider, ...新属性 })会在找到目标后以Object.assign合并新属性、重建该条目的 DOMvar art new Artplayer({ container: .artplayer-app, url: /assets/sample/video.mp4, setting: true, settings: [ { name: slider, html: Slider, tooltip: 5x, icon: img width22 height22 src/assets/img/state.svg, range: [5, 1, 10, 1], }, ], }); art.setting.show true; art.on(ready, () { setTimeout(() { // 按 name 更新该设置项 art.setting.update({ name: slider, html: PIP Mode, tooltip: Close, icon: img width22 height22 src/assets/img/state.svg, switch: false, }); }, 3000); });值得注意的是上述示例把一条滑块条目整体更新为开关switch: false是可行的——update()会重建条目 DOMcreateItem(item, true)根据新属性重新判定条目类型若name不存在update()会退化为调用add()直接追加新条目见 index.js。五、面板交互与布局的底层原理5.1 展开 / 收起面板的展开收起由齿轮按钮控制其点击处理器为art.setting.toggle()见 control/setting.js。同时面板遵循失焦即收起策略播放器blur时若面板处于展开状态则自动收起focus时若点击目标既不在设置按钮上、也不在面板内部同样收起见 index.js。齿轮按钮的 tooltip 会随展开状态在Show Setting / Hide Setting之间切换。5.2 尺寸与定位面板的尺寸与位置由resize()统一计算相关常量定义在 src/index.js常量默认值用途SETTING_WIDTH250面板默认宽度pxSETTING_ITEM_WIDTH200内置选择列表子项宽度pxSETTING_ITEM_HEIGHT35每个条目高度px高度按当前激活列表条目数 × 条目高度计算子级列表额外加一行返回条头宽度优先取激活列表首项$parent.width、缺省回落到SETTING_WIDTH面板默认以设置按钮为中心水平居中若超出播放器右边界则自动改用右对齐见 index.js。5.3 面板样式面板及其条目的视觉样式定义在 src/style/setting.less 中容器类art-setting-panel、条目类art-setting-item、当前项高亮类art-current、滑块类art-setting-range等移动端下的适配规则位于 src/style/mobile.less。若需调整面板外观可通过覆盖这些类名或设置播放器theme主题色实现。六、类型定义与调用链速查配置项的类型声明settings为组件数组、setting为布尔见 src/scheme/index.js对外 TypeScript 声明见 types/artplayer.d.ts 与 types/component.d.ts编辑器可获得完整的Setting实例 API 提示面板实例的公开方法add/remove/update/find/check/resize/show全部实现在 src/setting/index.js继承自Component基类src/utils/component.js四个内置项的独立实现可分别阅读 playbackRate.js、aspectRatio.js、flip.js、subtitleOffset.js。七、推荐实践小结先开总开关setting: true是面板渲染的前提其余四个内置开关可按需独立开合善用name需要运行时remove/update的条目务必显式命名并保持唯一否则会自动生成不稳定的setting-N编号区分回调时机滑块场景下实时预览用onChangeinput松手提交用onRangechange按钮用onClick、开关用onSwitch、选择项用onSelect巧用返回值各类回调的返回值都会写入item.tooltip是低成本实现选中后提示同步的惯用手段组合级联与数据绑定selector 选项可携带任意字段如url、value在onSelect中联动art.subtitle.url、art.switchQuality()等播放器 API即可快速搭建字幕切换与多清晰度切换这类真实业务面板。赞分享音视频前端UI组件【免费下载链接】ArtPlayer:art: ArtPlayer.js is a modern and full featured HTML5 video player项目地址https://gitcode.com/gh_mirrors/ar/ArtPlayer点击查看免费下载相关推荐npkill Profiles 完全指南内置删除预设、匹配机制与自定义配置npkill Profiles 完全指南内置删除预设、匹配机制与自定义配置 导读 npkill 的核心能力是扫描并列出系统中 node_modules 等可MediaCrawler 多平台自媒体数据爬虫实战指南5 分钟跑通七平台内容采集MediaCrawler 多平台自媒体数据爬虫实战指南5 分钟跑通七平台内容采集 MediaCrawler 是一个多平台自媒体数据爬虫覆盖小红书、抖音、快手网页爬虫数据工程OrchardCore 自定义设置Custom Settings完整实战指南从内容类型创建到代码与 Liquid 访问OrchardCore 自定义设置Custom Settings完整实战指南从内容类型创建到代码与 Liquid 访问 导读 本文基于 Orchard CCMS后端Web框架上一篇Windows HEIC缩略图扩展方案解决iPhone照片在Windows中的预览难题下一篇3步配置LinkSwift解锁9大网盘全速下载的终极方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考