diff --git a/docs/assets/js/common.js b/docs/assets/js/common.js index d61ebfe27..015cb9c66 100644 --- a/docs/assets/js/common.js +++ b/docs/assets/js/common.js @@ -63,6 +63,7 @@ './assets/ts/artplayer-plugin-vast.d.ts', './assets/ts/artplayer-plugin-vtt-thumbnail.d.ts', './assets/ts/artplayer-plugin-document-pip.d.ts', + './assets/ts/artplayer-plugin-liquid-glass.d.ts', './assets/ts/artplayer-proxy-canvas.d.ts', './assets/ts/artplayer-proxy-mediabunny.d.ts', './assets/ts/artplayer.d.ts', diff --git a/docs/assets/ts/artplayer-plugin-liquid-glass.d.ts b/docs/assets/ts/artplayer-plugin-liquid-glass.d.ts new file mode 100644 index 000000000..b41ff393a --- /dev/null +++ b/docs/assets/ts/artplayer-plugin-liquid-glass.d.ts @@ -0,0 +1,16 @@ +interface Option { + 'width': string + 'max-width': string + 'min-width': string +} + +interface Result { + name: 'artplayerPluginLiquidGlass' +} + +declare const artplayerPluginLiquidGlass: (option?: Option) => (art: Artplayer) => Result + +export default artplayerPluginLiquidGlass + +export = artplayerPluginLiquidGlass +export as namespace artplayerPluginLiquidGlass; diff --git a/docs/compiled/artplayer-plugin-liquid-glass.js b/docs/compiled/artplayer-plugin-liquid-glass.js new file mode 100644 index 000000000..cc61ab08e --- /dev/null +++ b/docs/compiled/artplayer-plugin-liquid-glass.js @@ -0,0 +1,8 @@ + +/*! + * artplayer-plugin-liquid-glass.js v1.0.0 + * Github: https://github.com/zhw2590582/ArtPlayer + * (c) 2017-2025 Harvey Zack + * Released under the MIT License. + */ +!function(e,t,r,n,o,i,a,l){var d="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},u="function"==typeof d[n]&&d[n],s=u.i||{},c=u.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function p(t,r){if(!c[t]){if(!e[t]){if(o[t])return o[t];var i="function"==typeof d[n]&&d[n];if(!r&&i)return i(t,!0);if(u)return u(t,!0);if(f&&"string"==typeof t)return f(t);var a=Error("Cannot find module '"+t+"'");throw a.code="MODULE_NOT_FOUND",a}s.resolve=function(r){var n=e[t][1][r];return null!=n?n:r},s.cache={};var l=c[t]=new p.Module(t);e[t][0].call(l.exports,s,l,l.exports,d)}return c[t].exports;function s(e){var t=s.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var r={__esModule:!0};return t.forEach(function(e){var t=e[0],n=e[1],o=e[2]||e[0],i=p(n);"*"===t?Object.keys(i).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:function(){return i[e]}})}):"*"===o?Object.defineProperty(r,t,{enumerable:!0,value:i}):Object.defineProperty(r,t,{enumerable:!0,get:function(){return"default"===o?i.__esModule?i.default:i:i[o]}})}),r}return p(t)}}p.isParcelRequire=!0,p.Module=function(e){this.id=e,this.bundle=p,this.require=f,this.exports={}},p.modules=e,p.cache=c,p.parent=u,p.distDir=void 0,p.publicUrl=void 0,p.devServer=void 0,p.i=s,p.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(p,"root",{get:function(){return d[n]}}),d[n]=p;for(var g=0;gl);var i=e("bundle-text:./style.less"),a=o.interopDefault(i);function l(e={}){return t=>{let{constructor:r}=t,{addClass:n,append:o,createElement:i}=r.utils,{$bottom:a,$progress:l,$controls:d,$player:u}=t.template,s=i("div");return n(u,"artplayer-plugin-liquid-glass"),n(s,"art-liquid-glass"),o(a,s),o(s,l),o(s,d),t.on("control",t=>{t?(s.style.width=e.width,s.style["max-width"]=e["max-width"],s.style["min-width"]=e["min-width"]):(s.style.width="",s.style["max-width"]="",s.style["min-width"]="")}),{name:"artplayerPluginLiquidGlass"}}}if("undefined"!=typeof document){let e="artplayer-plugin-liquid-glass",t=document.getElementById(e);t||((t=document.createElement("style")).id=e,"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{document.head.appendChild(t)}):(document.head||document.documentElement).appendChild(t)),t.textContent=a.default}"undefined"!=typeof window&&(window.artplayerPluginLiquidGlass=l)},{"bundle-text:./style.less":"kzvrd","@parcel/transformer-js/src/esmodule-helpers.js":"6ykb1"}],kzvrd:[function(e,t,r,n){t.exports=".artplayer-plugin-liquid-glass.art-control-show{--art-control-height:42px;--art-control-icon-size:24px;--art-control-icon-scale:1.1}.artplayer-plugin-liquid-glass.art-control-show .art-bottom{padding-bottom:var(--art-padding);background-image:none;align-items:center}.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-liquid-glass{backdrop-filter:blur(12px);padding:var(--art-padding)calc(var(--art-padding)*1.5)5px;background-color:#00000040;border-radius:8px}.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-control-progress-inner{border-radius:5px;overflow:hidden}.artplayer-plugin-liquid-glass.art-control-show .art-settings{bottom:calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding))}.artplayer-plugin-liquid-glass.art-control-show .art-layer-auto-playback{bottom:calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding)*4 + 10px)}"},{}],"6ykb1":[function(e,t,r,n){r.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},r.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.exportAll=function(e,t){return Object.keys(e).forEach(function(r){"default"===r||"__esModule"===r||Object.prototype.hasOwnProperty.call(t,r)||Object.defineProperty(t,r,{enumerable:!0,get:function(){return e[r]}})}),t},r.export=function(e,t,r){Object.defineProperty(e,t,{enumerable:!0,get:r})}},{}]},["dOYQ3"],"dOYQ3","parcelRequire4dc0",{}); \ No newline at end of file diff --git a/docs/compiled/artplayer-plugin-liquid-glass.legacy.js b/docs/compiled/artplayer-plugin-liquid-glass.legacy.js new file mode 100644 index 000000000..0c8a250f3 --- /dev/null +++ b/docs/compiled/artplayer-plugin-liquid-glass.legacy.js @@ -0,0 +1,8 @@ + +/*! + * artplayer-plugin-liquid-glass.js v1.0.0 + * Github: https://github.com/zhw2590582/ArtPlayer + * (c) 2017-2025 Harvey Zack + * Released under the MIT License. + */ +!function(e,t,r,n,o,a,i,l){var d="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},u="function"==typeof d[n]&&d[n],c=u.i||{},s=u.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function p(t,r){if(!s[t]){if(!e[t]){if(o[t])return o[t];var a="function"==typeof d[n]&&d[n];if(!r&&a)return a(t,!0);if(u)return u(t,!0);if(f&&"string"==typeof t)return f(t);var i=Error("Cannot find module '"+t+"'");throw i.code="MODULE_NOT_FOUND",i}c.resolve=function(r){var n=e[t][1][r];return null!=n?n:r},c.cache={};var l=s[t]=new p.Module(t);e[t][0].call(l.exports,c,l,l.exports,d)}return s[t].exports;function c(e){var t=c.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var r={__esModule:!0};return t.forEach(function(e){var t=e[0],n=e[1],o=e[2]||e[0],a=p(n);"*"===t?Object.keys(a).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:function(){return a[e]}})}):"*"===o?Object.defineProperty(r,t,{enumerable:!0,value:a}):Object.defineProperty(r,t,{enumerable:!0,get:function(){return"default"===o?a.__esModule?a.default:a:a[o]}})}),r}return p(t)}}p.isParcelRequire=!0,p.Module=function(e){this.id=e,this.bundle=p,this.require=f,this.exports={}},p.modules=e,p.cache=s,p.parent=u,p.distDir=void 0,p.publicUrl=void 0,p.devServer=void 0,p.i=c,p.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(p,"root",{get:function(){return d[n]}}),d[n]=p;for(var g=0;g0&&void 0!==arguments[0]?arguments[0]:{};return function(t){var r=t.constructor.utils,n=r.addClass,o=r.append,a=r.createElement,i=t.template,l=i.$bottom,d=i.$progress,u=i.$controls,c=i.$player,s=a("div");return n(c,"artplayer-plugin-liquid-glass"),n(s,"art-liquid-glass"),o(l,s),o(s,d),o(s,u),t.on("control",function(t){t?(s.style.width=e.width,s.style["max-width"]=e["max-width"],s.style["min-width"]=e["min-width"]):(s.style.width="",s.style["max-width"]="",s.style["min-width"]="")}),{name:"artplayerPluginLiquidGlass"}}}if("undefined"!=typeof document){var d="artplayer-plugin-liquid-glass",u=document.getElementById(d);u||((u=document.createElement("style")).id=d,"loading"===document.readyState?document.addEventListener("DOMContentLoaded",function(){document.head.appendChild(u)}):(document.head||document.documentElement).appendChild(u)),u.textContent=i.default}"undefined"!=typeof window&&(window.artplayerPluginLiquidGlass=l)},{"bundle-text:./style.less":"3gqqK","@parcel/transformer-js/src/esmodule-helpers.js":"qpMMf"}],"3gqqK":[function(e,t,r,n){t.exports=".artplayer-plugin-liquid-glass.art-control-show{--art-control-height:42px;--art-control-icon-size:24px;--art-control-icon-scale:1.1}.artplayer-plugin-liquid-glass.art-control-show .art-bottom{padding-bottom:var(--art-padding);background-image:none;align-items:center}.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-liquid-glass{backdrop-filter:blur(12px);padding:var(--art-padding)calc(var(--art-padding)*1.5)5px;background-color:rgba(0,0,0,.25);border-radius:8px}.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-control-progress-inner{border-radius:5px;overflow:hidden}.artplayer-plugin-liquid-glass.art-control-show .art-settings{bottom:calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding))}.artplayer-plugin-liquid-glass.art-control-show .art-layer-auto-playback{bottom:calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding)*4 + 10px)}"},{}],qpMMf:[function(e,t,r,n){r.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},r.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.exportAll=function(e,t){return Object.keys(e).forEach(function(r){"default"===r||"__esModule"===r||Object.prototype.hasOwnProperty.call(t,r)||Object.defineProperty(t,r,{enumerable:!0,get:function(){return e[r]}})}),t},r.export=function(e,t,r){Object.defineProperty(e,t,{enumerable:!0,get:r})}},{}]},["bMV8e"],"bMV8e","parcelRequire4dc0",{}); \ No newline at end of file diff --git a/docs/compiled/artplayer-plugin-liquid-glass.mjs b/docs/compiled/artplayer-plugin-liquid-glass.mjs new file mode 100644 index 000000000..c0bc33c26 --- /dev/null +++ b/docs/compiled/artplayer-plugin-liquid-glass.mjs @@ -0,0 +1,8 @@ + +/*! + * artplayer-plugin-liquid-glass.js v1.0.0 + * Github: https://github.com/zhw2590582/ArtPlayer + * (c) 2017-2025 Harvey Zack + * Released under the MIT License. + */ +!function(e,t,r,n,o,i,a,l){var d="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},u="function"==typeof d[n]&&d[n],s=u.i||{},c=u.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function p(t,r){if(!c[t]){if(!e[t]){if(o[t])return o[t];var i="function"==typeof d[n]&&d[n];if(!r&&i)return i(t,!0);if(u)return u(t,!0);if(f&&"string"==typeof t)return f(t);var a=Error("Cannot find module '"+t+"'");throw a.code="MODULE_NOT_FOUND",a}s.resolve=function(r){var n=e[t][1][r];return null!=n?n:r},s.cache={};var l=c[t]=new p.Module(t);e[t][0].call(l.exports,s,l,l.exports,d)}return c[t].exports;function s(e){var t=s.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var r={__esModule:!0};return t.forEach(function(e){var t=e[0],n=e[1],o=e[2]||e[0],i=p(n);"*"===t?Object.keys(i).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:function(){return i[e]}})}):"*"===o?Object.defineProperty(r,t,{enumerable:!0,value:i}):Object.defineProperty(r,t,{enumerable:!0,get:function(){return"default"===o?i.__esModule?i.default:i:i[o]}})}),r}return p(t)}}p.isParcelRequire=!0,p.Module=function(e){this.id=e,this.bundle=p,this.require=f,this.exports={}},p.modules=e,p.cache=c,p.parent=u,p.distDir=void 0,p.publicUrl=void 0,p.devServer=void 0,p.i=s,p.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(p,"root",{get:function(){return d[n]}}),d[n]=p;for(var g=0;gl);var i=e("bundle-text:./style.less"),a=o.interopDefault(i);function l(e={}){return t=>{let{constructor:r}=t,{addClass:n,append:o,createElement:i}=r.utils,{$bottom:a,$progress:l,$controls:d,$player:u}=t.template,s=i("div");return n(u,"artplayer-plugin-liquid-glass"),n(s,"art-liquid-glass"),o(a,s),o(s,l),o(s,d),t.on("control",t=>{t?(s.style.width=e.width,s.style["max-width"]=e["max-width"],s.style["min-width"]=e["min-width"]):(s.style.width="",s.style["max-width"]="",s.style["min-width"]="")}),{name:"artplayerPluginLiquidGlass"}}}if("undefined"!=typeof document){let e="artplayer-plugin-liquid-glass",t=document.getElementById(e);t||((t=document.createElement("style")).id=e,"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{document.head.appendChild(t)}):(document.head||document.documentElement).appendChild(t)),t.textContent=a.default}"undefined"!=typeof window&&(window.artplayerPluginLiquidGlass=l)},{"bundle-text:./style.less":"8Q9di","@parcel/transformer-js/src/esmodule-helpers.js":"loqXi"}],"8Q9di":[function(e,t,r,n){t.exports=".artplayer-plugin-liquid-glass.art-control-show{--art-control-height:42px;--art-control-icon-size:24px;--art-control-icon-scale:1.1}.artplayer-plugin-liquid-glass.art-control-show .art-bottom{padding-bottom:var(--art-padding);background-image:none;align-items:center}.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-liquid-glass{backdrop-filter:blur(12px);padding:var(--art-padding)calc(var(--art-padding)*1.5)5px;background-color:#00000040;border-radius:8px}.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-control-progress-inner{border-radius:5px;overflow:hidden}.artplayer-plugin-liquid-glass.art-control-show .art-settings{bottom:calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding))}.artplayer-plugin-liquid-glass.art-control-show .art-layer-auto-playback{bottom:calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding)*4 + 10px)}"},{}],loqXi:[function(e,t,r,n){r.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},r.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.exportAll=function(e,t){return Object.keys(e).forEach(function(r){"default"===r||"__esModule"===r||Object.prototype.hasOwnProperty.call(t,r)||Object.defineProperty(t,r,{enumerable:!0,get:function(){return e[r]}})}),t},r.export=function(e,t,r){Object.defineProperty(e,t,{enumerable:!0,get:r})}},{}]},["d9Lrq"],"d9Lrq","parcelRequire4dc0",{});let{default:e}=parcelRequire4dc0("d9Lrq");export{e as default}; \ No newline at end of file diff --git a/docs/document/404.html b/docs/document/404.html index 970e53126..bb60fbb12 100644 --- a/docs/document/404.html +++ b/docs/document/404.html @@ -21,7 +21,7 @@
- + \ No newline at end of file diff --git a/docs/document/advanced/built-in.html b/docs/document/advanced/built-in.html index a3f129024..472e0dcc3 100644 --- a/docs/document/advanced/built-in.html +++ b/docs/document/advanced/built-in.html @@ -217,7 +217,7 @@ art.on('ready', () => { art.plugins.add(myPlugin); }); - + \ No newline at end of file diff --git a/docs/document/advanced/class.html b/docs/document/advanced/class.html index f1277d909..85e0ef448 100644 --- a/docs/document/advanced/class.html +++ b/docs/document/advanced/class.html @@ -31,7 +31,7 @@ }); console.info([...Artplayer.instances]);

version ​

返回播放器的版本信息

▶ Run Code
js
console.info(Artplayer.version);

env ​

返回播放器的环境变量

▶ Run Code
js
console.info(Artplayer.env);

build ​

返回播放器的打包时间

▶ Run Code
js
console.info(Artplayer.build);

config ​

返回视频的默认配置

▶ Run Code
js
console.info(Artplayer.config);

utils ​

返回播放器的工具函数集合

▶ Run Code
js
console.info(Artplayer.utils);

全部工具函数请参考以下地址:

artplayer/types/utils.d.ts

scheme ​

返回播放器选项的校验方案

▶ Run Code
js
console.info(Artplayer.scheme);

Emitter ​

返回事件分发器的构造函数

▶ Run Code
js
console.info(Artplayer.Emitter);

validator ​

返回选项的校验函数

▶ Run Code
js
console.info(Artplayer.validator);

kindOf ​

返回类型检测的函数工具

▶ Run Code
js
console.info(Artplayer.kindOf);

html ​

返回播放器所需的 html 字符串

▶ Run Code
js
console.info(Artplayer.html);

option ​

返回播放器的默认选项

▶ Run Code
js
console.info(Artplayer.option);
- + \ No newline at end of file diff --git a/docs/document/advanced/event.html b/docs/document/advanced/event.html index ccc4afe93..f927b09a8 100644 --- a/docs/document/advanced/event.html +++ b/docs/document/advanced/event.html @@ -385,7 +385,7 @@ art.on('keydown', (event) => { console.log(event.code); });

video:canplay ​

浏览器可以播放媒体文件了,但估计没有足够的数据来支撑播放到结束,不必停下来进一步缓冲内容

video:canplaythrough ​

浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束

video:complete ​

OfflineAudioContext 渲染完成

video:durationchange ​

duration 属性的值改变时触发

video:emptied ​

媒体内容变为空;例如,当这个 media 已经加载完成(或者部分加载完成),则发送此事件,并调用 load() 方法重新加载它

video:ended ​

视频停止播放,因为 media 已经到达结束点

video:error ​

获取媒体数据时出错,或者资源类型不是受支持的媒体格式

video:loadeddata ​

media 中的首帧已经完成加载

video:loadedmetadata ​

已加载元数据

video:pause ​

播放已暂停

video:play ​

播放已开始

video:playing ​

由于缺乏数据而暂停或延迟后,播放准备开始

video:progress ​

在浏览器加载资源时周期性触发

video:ratechange ​

播放速率发生变化

video:seeked ​

跳帧(seek)操作完成

video:seeking ​

跳帧(seek)操作开始

video:stalled ​

用户代理(user agent)正在尝试获取媒体数据,但数据意外未出现

video:suspend ​

媒体数据加载已暂停

video:timeupdate ​

currentTime 属性指定的时间发生变化

video:volumechange ​

音量发生变化

video:waiting ​

由于暂时缺少数据,播放已停止

- + \ No newline at end of file diff --git a/docs/document/advanced/global.html b/docs/document/advanced/global.html index 0d2fa8567..d9e75406a 100644 --- a/docs/document/advanced/global.html +++ b/docs/document/advanced/global.html @@ -248,7 +248,7 @@ // 只销毁界面,不主动清空 src art.destroy(); - + \ No newline at end of file diff --git a/docs/document/advanced/plugin.html b/docs/document/advanced/plugin.html index ab254e1c6..184dd9b9b 100644 --- a/docs/document/advanced/plugin.html +++ b/docs/document/advanced/plugin.html @@ -122,7 +122,7 @@ }) ], }); - + \ No newline at end of file diff --git a/docs/document/advanced/property.html b/docs/document/advanced/property.html index 97dec8800..675a23557 100644 --- a/docs/document/advanced/property.html +++ b/docs/document/advanced/property.html @@ -457,7 +457,7 @@ art.on('ready', () => { art.subtitleOffset = 1; }); - + \ No newline at end of file diff --git a/docs/document/assets/en_index.md.CqoCnjoZ.js b/docs/document/assets/en_index.md.C2Y0fh0y.js similarity index 98% rename from docs/document/assets/en_index.md.CqoCnjoZ.js rename to docs/document/assets/en_index.md.C2Y0fh0y.js index 199acdbea..82328ce9f 100644 --- a/docs/document/assets/en_index.md.CqoCnjoZ.js +++ b/docs/document/assets/en_index.md.C2Y0fh0y.js @@ -1,4 +1,4 @@ -import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Installation & Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1764426402000}'),p={name:"en/index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`

Installation & Usage ​

Installation ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

Usage ​

html
<html>
+import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Installation & Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1764426402000}'),p={name:"en/index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`

Installation & Usage ​

Installation ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

Usage ​

html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -19,7 +19,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
           });
         </script>
     </body>
-</html>

Note

The player's dimensions depend on the size of its container container, so your container must have defined dimensions.

See more usage examples at the following link:

/packages/artplayer-template

Vue.js ​

vue
<template>
+</html>

Note

The player's dimensions depend on the size of its container container, so your container must have defined dimensions.

See more usage examples at the following link:

/packages/artplayer-template

Vue.js ​

vue
<template>
   <div ref="$container" />
 </template>
 
@@ -71,7 +71,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
 function getInstance(art) {
   console.log(art)
 }
-</script>

Artplayer is not reactive:

Directly modifying option in Vue.js will not update the player.

React.js ​

jsx
import Artplayer from 'artplayer'
+</script>

Artplayer is not reactive:

Directly modifying option in Vue.js will not update the player.

React.js ​

jsx
import Artplayer from 'artplayer'
 import { useEffect, useRef } from 'react'
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -154,7 +154,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
 
 option.volume = 0.5;
 
-const art8 = new Artplayer(option);

Legacy Browsers ​

The production build artplayer.js only supports the latest major version of Chrome: last 1 Chrome version

For legacy browsers, you can use the artplayer.legacy.js file, which supports compatibility down to: IE 11

js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

If you need to support even older browsers, modify the following configuration and build it yourself:

Build configuration: scripts/build.js

Reference documentation: browserslist

ECMAScript Module ​

Starting from 5.2.6, artplayer and all plugins also provide an ESM version mjs, such as:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);

Legacy Browsers ​

The production build artplayer.js only supports the latest major version of Chrome: last 1 Chrome version

For legacy browsers, you can use the artplayer.legacy.js file, which supports compatibility down to: IE 11

js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

If you need to support even older browsers, modify the following configuration and build it yourself:

Build configuration: scripts/build.js

Reference documentation: browserslist

ECMAScript Module ​

Starting from 5.2.6, artplayer and all plugins also provide an ESM version mjs, such as:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
diff --git a/docs/document/assets/en_index.md.CqoCnjoZ.lean.js b/docs/document/assets/en_index.md.C2Y0fh0y.lean.js
similarity index 100%
rename from docs/document/assets/en_index.md.CqoCnjoZ.lean.js
rename to docs/document/assets/en_index.md.C2Y0fh0y.lean.js
diff --git a/docs/document/assets/en_start_i18n.md.DxZ-eafn.js b/docs/document/assets/en_start_i18n.md.CsL-uZUF.js
similarity index 98%
rename from docs/document/assets/en_start_i18n.md.DxZ-eafn.js
rename to docs/document/assets/en_start_i18n.md.CsL-uZUF.js
index 41bb5a7aa..eedb73d24 100644
--- a/docs/document/assets/en_start_i18n.md.DxZ-eafn.js
+++ b/docs/document/assets/en_start_i18n.md.CsL-uZUF.js
@@ -2,7 +2,7 @@ import{_ as a,c as i,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     lang: 'zh-cn', // or 'en'
-});

Importing Languages ​

Language files before bundling are located at: artplayer/src/i18n/*.js. Contributions to add your language are welcome.

Language files after bundling are located at: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
+});

Importing Languages ​

Language files before bundling are located at: artplayer/src/i18n/*.js. Contributions to add your language are welcome.

Language files after bundling are located at: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
 import zhTw from 'artplayer/i18n/zh-tw';
 
 var art = new Artplayer({
diff --git a/docs/document/assets/en_start_i18n.md.DxZ-eafn.lean.js b/docs/document/assets/en_start_i18n.md.CsL-uZUF.lean.js
similarity index 100%
rename from docs/document/assets/en_start_i18n.md.DxZ-eafn.lean.js
rename to docs/document/assets/en_start_i18n.md.CsL-uZUF.lean.js
diff --git a/docs/document/assets/index.md.CofUiul7.js b/docs/document/assets/index.md.u8oxcBYH.js
similarity index 98%
rename from docs/document/assets/index.md.CofUiul7.js
rename to docs/document/assets/index.md.u8oxcBYH.js
index ddffdb910..68de5e316 100644
--- a/docs/document/assets/index.md.CofUiul7.js
+++ b/docs/document/assets/index.md.u8oxcBYH.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1757137705000}'),p={name:"index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

使用 ​

html
<html>
+import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1757137705000}'),p={name:"index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

使用 ​

html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -19,7 +19,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
           });
         </script>
     </body>
-</html>

提示

播放器的尺寸依赖于容器 container 的尺寸,所以你的容器 container 必须是有尺寸的

以下链接可以看到更多的使用例子

/packages/artplayer-template

Vue.js ​

vue
<template>
+</html>

提示

播放器的尺寸依赖于容器 container 的尺寸,所以你的容器 container 必须是有尺寸的

以下链接可以看到更多的使用例子

/packages/artplayer-template

Vue.js ​

vue
<template>
   <div ref="$container" />
 </template>
 
@@ -71,7 +71,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
 function getInstance(art) {
   console.log(art)
 }
-</script>

Artplayer 非响应式:

在 Vue.js 里直接修改 option 是不会改变播放器的

React.js ​

jsx
import Artplayer from 'artplayer'
+</script>

Artplayer 非响应式:

在 Vue.js 里直接修改 option 是不会改变播放器的

React.js ​

jsx
import Artplayer from 'artplayer'
 import { useEffect, useRef } from 'react'
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -154,7 +154,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
 
 option.volume = 0.5;
 
-const art8 = new Artplayer(option);

古老的浏览器 ​

生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome:last 1 Chrome version

对于古老的浏览器,可以使用 artplayer.legacy.js 文件,可以兼容到:IE 11

js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时,请修改以下配置然后自行构建:

构建配置:scripts/build.js

参考文档:browserslist

ECMAScript Module ​

从 5.2.6 开始,artplayer 和所有插件还会提供一个 ESM 版本的 mjs,如:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);

古老的浏览器 ​

生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome:last 1 Chrome version

对于古老的浏览器,可以使用 artplayer.legacy.js 文件,可以兼容到:IE 11

js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时,请修改以下配置然后自行构建:

构建配置:scripts/build.js

参考文档:browserslist

ECMAScript Module ​

从 5.2.6 开始,artplayer 和所有插件还会提供一个 ESM 版本的 mjs,如:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
diff --git a/docs/document/assets/index.md.CofUiul7.lean.js b/docs/document/assets/index.md.u8oxcBYH.lean.js
similarity index 100%
rename from docs/document/assets/index.md.CofUiul7.lean.js
rename to docs/document/assets/index.md.u8oxcBYH.lean.js
diff --git a/docs/document/assets/plugin_danmuku.md.B8scVs_5.js b/docs/document/assets/plugin_danmuku.md.oQjW_Ffo.js
similarity index 99%
rename from docs/document/assets/plugin_danmuku.md.B8scVs_5.js
rename to docs/document/assets/plugin_danmuku.md.oQjW_Ffo.js
index c636abd2b..83c2ad1ec 100644
--- a/docs/document/assets/plugin_danmuku.md.B8scVs_5.js
+++ b/docs/document/assets/plugin_danmuku.md.oQjW_Ffo.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1734270991000}'),h={name:"plugin/danmuku.md"};function e(k,a,t,r,E,d){return p(),l("div",null,a[0]||(a[0]=[s(`

弹幕库 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

弹幕结构 ​

每一个弹幕是一个对象,多个弹幕组成的数组就是弹幕库,通常只需要text就可以发送一个弹幕,其余都是非必要参数

js
{
+import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1734270991000}'),h={name:"plugin/danmuku.md"};function e(k,a,t,r,E,d){return p(),l("div",null,a[0]||(a[0]=[s(`

弹幕库 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

弹幕结构 ​

每一个弹幕是一个对象,多个弹幕组成的数组就是弹幕库,通常只需要text就可以发送一个弹幕,其余都是非必要参数

js
{
     text: '', // 弹幕文本
     time: 10, // 弹幕时间, 默认为当前播放器时间
     mode: 0, // 弹幕模式: 0: 滚动(默认),1: 顶部,2: 底部
diff --git a/docs/document/assets/plugin_danmuku.md.B8scVs_5.lean.js b/docs/document/assets/plugin_danmuku.md.oQjW_Ffo.lean.js
similarity index 100%
rename from docs/document/assets/plugin_danmuku.md.B8scVs_5.lean.js
rename to docs/document/assets/plugin_danmuku.md.oQjW_Ffo.lean.js
diff --git a/docs/document/assets/start_i18n.md.Csa2YpJX.js b/docs/document/assets/start_i18n.md.BjaLSvLX.js
similarity index 98%
rename from docs/document/assets/start_i18n.md.Csa2YpJX.js
rename to docs/document/assets/start_i18n.md.BjaLSvLX.js
index 3abc16c65..2eb295ff9 100644
--- a/docs/document/assets/start_i18n.md.Csa2YpJX.js
+++ b/docs/document/assets/start_i18n.md.BjaLSvLX.js
@@ -2,7 +2,7 @@ import{_ as a,c as i,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const c
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     lang: 'zh-cn', // or 'en'
-});

导入语言 ​

打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言

打包后的语言文件存放于: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
+});

导入语言 ​

打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言

打包后的语言文件存放于: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
 import zhTw from 'artplayer/i18n/zh-tw';
 
 var art = new Artplayer({
diff --git a/docs/document/assets/start_i18n.md.Csa2YpJX.lean.js b/docs/document/assets/start_i18n.md.BjaLSvLX.lean.js
similarity index 100%
rename from docs/document/assets/start_i18n.md.Csa2YpJX.lean.js
rename to docs/document/assets/start_i18n.md.BjaLSvLX.lean.js
diff --git a/docs/document/component/contextmenu.html b/docs/document/component/contextmenu.html
index 36e9fe950..b5581c43a 100644
--- a/docs/document/component/contextmenu.html
+++ b/docs/document/component/contextmenu.html
@@ -106,7 +106,7 @@
         })
     }, 3000);
 });
- + \ No newline at end of file diff --git a/docs/document/component/controls.html b/docs/document/component/controls.html index 9258e604f..b98ef9a77 100644 --- a/docs/document/component/controls.html +++ b/docs/document/component/controls.html @@ -153,7 +153,7 @@ }); }, 3000); });
- + \ No newline at end of file diff --git a/docs/document/component/layers.html b/docs/document/component/layers.html index c7cc35892..9fc2055f4 100644 --- a/docs/document/component/layers.html +++ b/docs/document/component/layers.html @@ -125,7 +125,7 @@ }); }, 3000); }); - + \ No newline at end of file diff --git a/docs/document/component/setting.html b/docs/document/component/setting.html index 674974e72..d9958ae7b 100644 --- a/docs/document/component/setting.html +++ b/docs/document/component/setting.html @@ -245,7 +245,7 @@ }); }, 3000); }); - + \ No newline at end of file diff --git a/docs/document/en/advanced/built-in.html b/docs/document/en/advanced/built-in.html index 0fd194c34..72a2761e8 100644 --- a/docs/document/en/advanced/built-in.html +++ b/docs/document/en/advanced/built-in.html @@ -217,7 +217,7 @@ art.on('ready', () => { art.plugins.add(myPlugin); }); - + \ No newline at end of file diff --git a/docs/document/en/advanced/class.html b/docs/document/en/advanced/class.html index 67dd6aad7..0602a0b9a 100644 --- a/docs/document/en/advanced/class.html +++ b/docs/document/en/advanced/class.html @@ -31,7 +31,7 @@ }); console.info([...Artplayer.instances]);

version ​

Returns the version information of the player.

▶ Run Code
js
console.info(Artplayer.version);

env ​

Returns the environment variables of the player.

▶ Run Code
js
console.info(Artplayer.env);

build ​

Returns the build time of the player.

▶ Run Code
js
console.info(Artplayer.build);

config ​

Returns the default configuration for videos.

▶ Run Code
js
console.info(Artplayer.config);

utils ​

Returns the collection of utility functions for the player.

▶ Run Code
js
console.info(Artplayer.utils);

For all utility functions, please refer to the following address:

artplayer/types/utils.d.ts

scheme ​

Returns the validation schema for player options.

▶ Run Code
js
console.info(Artplayer.scheme);

Emitter ​

Returns the constructor function for the event emitter.

▶ Run Code
js
console.info(Artplayer.Emitter);

validator ​

Returns the validation function for options.

▶ Run Code
js
console.info(Artplayer.validator);

kindOf ​

Returns the utility function for type detection.

▶ Run Code
js
console.info(Artplayer.kindOf);

html ​

Returns the html string required by the player.

▶ Run Code
js
console.info(Artplayer.html);

option ​

Returns the default options for the player.

▶ Run Code
js
console.info(Artplayer.option);
- + \ No newline at end of file diff --git a/docs/document/en/advanced/event.html b/docs/document/en/advanced/event.html index 4c4c2f982..6a0894886 100644 --- a/docs/document/en/advanced/event.html +++ b/docs/document/en/advanced/event.html @@ -412,7 +412,7 @@ art.on('keydown', (event) => { console.log(event.code); });

video:canplay ​

The browser can start playing the media, but estimates there isn't enough data to play through to the end without having to stop for further buffering

video:canplaythrough ​

The browser estimates it can play the media through to the end without stopping to buffer content

video:complete ​

OfflineAudioContext rendering is complete

video:durationchange ​

Triggered when the value of the duration property changes

video:emptied ​

The media has become empty; for example, this event is sent when the media has already been loaded (or partially loaded), and the load() method is called to reload it

video:ended ​

Playback has stopped because the media has reached its end point

video:error ​

An error occurred while fetching media data, or the resource type is not a supported media format

video:loadeddata ​

The first frame of the media has finished loading

video:loadedmetadata ​

Metadata has been loaded

video:pause ​

Playback has been paused

video:play ​

Playback has begun

video:playing ​

Playback is ready to start after having been paused or delayed due to lack of data

video:progress ​

Periodically triggered while the browser is loading the resource

video:ratechange ​

The playback rate has changed

video:seeked ​

A seek operation has completed

video:seeking ​

A seek operation has begun

video:stalled ​

The user agent is trying to fetch media data, but data is unexpectedly not forthcoming

video:suspend ​

Media data loading has been suspended

video:timeupdate ​

The time indicated by the currentTime attribute has been updated

video:volumechange ​

The volume has changed

video:waiting ​

Playback has stopped due to temporary lack of data

- + \ No newline at end of file diff --git a/docs/document/en/advanced/global.html b/docs/document/en/advanced/global.html index c56632dd4..814a9e455 100644 --- a/docs/document/en/advanced/global.html +++ b/docs/document/en/advanced/global.html @@ -266,7 +266,7 @@ // Only destroys the UI, does not actively clear src art.destroy(); - + \ No newline at end of file diff --git a/docs/document/en/advanced/plugin.html b/docs/document/en/advanced/plugin.html index c391f446c..d713314a5 100644 --- a/docs/document/en/advanced/plugin.html +++ b/docs/document/en/advanced/plugin.html @@ -122,7 +122,7 @@ }) ], }); - + \ No newline at end of file diff --git a/docs/document/en/advanced/property.html b/docs/document/en/advanced/property.html index 06d8daebf..5fc532992 100644 --- a/docs/document/en/advanced/property.html +++ b/docs/document/en/advanced/property.html @@ -487,7 +487,7 @@ art.on('ready', () => { art.subtitleOffset = 1; }); - + \ No newline at end of file diff --git a/docs/document/en/component/contextmenu.html b/docs/document/en/component/contextmenu.html index 23ad7dd20..c7e037084 100644 --- a/docs/document/en/component/contextmenu.html +++ b/docs/document/en/component/contextmenu.html @@ -106,7 +106,7 @@ }) }, 3000); }); - + \ No newline at end of file diff --git a/docs/document/en/component/controls.html b/docs/document/en/component/controls.html index c8fb96f0d..aa92ed70a 100644 --- a/docs/document/en/component/controls.html +++ b/docs/document/en/component/controls.html @@ -153,7 +153,7 @@ }); }, 3000); }); - + \ No newline at end of file diff --git a/docs/document/en/component/layers.html b/docs/document/en/component/layers.html index 952f1a864..7a253adb1 100644 --- a/docs/document/en/component/layers.html +++ b/docs/document/en/component/layers.html @@ -125,7 +125,7 @@ }); }, 3000); }); - + \ No newline at end of file diff --git a/docs/document/en/component/setting.html b/docs/document/en/component/setting.html index 5fa515a8a..67ea1759f 100644 --- a/docs/document/en/component/setting.html +++ b/docs/document/en/component/setting.html @@ -260,7 +260,7 @@ }); }, 3000); }); - + \ No newline at end of file diff --git a/docs/document/en/index.html b/docs/document/en/index.html index 51fba783e..aab6d5105 100644 --- a/docs/document/en/index.html +++ b/docs/document/en/index.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

Installation & Usage ​

Installation ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

Usage ​

html
<html>
+    
Skip to content

Installation & Usage ​

Installation ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

Usage ​

html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -44,7 +44,7 @@
           });
         </script>
     </body>
-</html>

Note

The player's dimensions depend on the size of its container container, so your container must have defined dimensions.

See more usage examples at the following link:

/packages/artplayer-template

Vue.js ​

vue
<template>
+</html>

Note

The player's dimensions depend on the size of its container container, so your container must have defined dimensions.

See more usage examples at the following link:

/packages/artplayer-template

Vue.js ​

vue
<template>
   <div ref="$container" />
 </template>
 
@@ -96,7 +96,7 @@
 function getInstance(art) {
   console.log(art)
 }
-</script>

Artplayer is not reactive:

Directly modifying option in Vue.js will not update the player.

React.js ​

jsx
import Artplayer from 'artplayer'
+</script>

Artplayer is not reactive:

Directly modifying option in Vue.js will not update the player.

React.js ​

jsx
import Artplayer from 'artplayer'
 import { useEffect, useRef } from 'react'
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -179,7 +179,7 @@
 
 option.volume = 0.5;
 
-const art8 = new Artplayer(option);

Legacy Browsers ​

The production build artplayer.js only supports the latest major version of Chrome: last 1 Chrome version

For legacy browsers, you can use the artplayer.legacy.js file, which supports compatibility down to: IE 11

js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

If you need to support even older browsers, modify the following configuration and build it yourself:

Build configuration: scripts/build.js

Reference documentation: browserslist

ECMAScript Module ​

Starting from 5.2.6, artplayer and all plugins also provide an ESM version mjs, such as:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);

Legacy Browsers ​

The production build artplayer.js only supports the latest major version of Chrome: last 1 Chrome version

For legacy browsers, you can use the artplayer.legacy.js file, which supports compatibility down to: IE 11

js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

If you need to support even older browsers, modify the following configuration and build it yourself:

Build configuration: scripts/build.js

Reference documentation: browserslist

ECMAScript Module ​

Starting from 5.2.6, artplayer and all plugins also provide an ESM version mjs, such as:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -237,7 +237,7 @@
         </script>
     </body>
 </html>

Note

You need to modify it before importing the Artplayer dependency for it to take effect.

- + \ No newline at end of file diff --git a/docs/document/en/start/i18n.html b/docs/document/en/start/i18n.html index 271a405d6..3f0ff1d7e 100644 --- a/docs/document/en/start/i18n.html +++ b/docs/document/en/start/i18n.html @@ -13,7 +13,7 @@ - + @@ -27,7 +27,7 @@ container: '.artplayer-app', url: '/assets/sample/video.mp4', lang: 'zh-cn', // or 'en' -});

Importing Languages ​

Language files before bundling are located at: artplayer/src/i18n/*.js. Contributions to add your language are welcome.

Language files after bundling are located at: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
+});

Importing Languages ​

Language files before bundling are located at: artplayer/src/i18n/*.js. Contributions to add your language are welcome.

Language files after bundling are located at: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
 import zhTw from 'artplayer/i18n/zh-tw';
 
 var art = new Artplayer({
@@ -75,7 +75,7 @@
         },
     },
 });
- + \ No newline at end of file diff --git a/docs/document/en/start/option.html b/docs/document/en/start/option.html index 9df0a82ec..35437a431 100644 --- a/docs/document/en/start/option.html +++ b/docs/document/en/start/option.html @@ -475,7 +475,7 @@ url: '/assets/sample/video.mp4', proxy: () => document.createElement('video') }); - + \ No newline at end of file diff --git a/docs/document/hashmap.json b/docs/document/hashmap.json index 1deb4f58a..d3fc5d18b 100644 --- a/docs/document/hashmap.json +++ b/docs/document/hashmap.json @@ -1 +1 @@ -{"advanced_built-in.md":"DiyRIcIA","advanced_class.md":"Da3aE0pP","advanced_event.md":"mrsB0MsK","advanced_global.md":"Bdw3azKs","advanced_plugin.md":"B3Pobmcq","advanced_property.md":"CA7GaeI3","component_contextmenu.md":"ClKmcIKr","component_controls.md":"Cl62yW1F","component_layers.md":"Cys52VMi","component_setting.md":"BP5674ir","en_advanced_built-in.md":"XdT81JC0","en_advanced_class.md":"BLyA7rxa","en_advanced_event.md":"CtQl1IYg","en_advanced_global.md":"D5Nz8wyo","en_advanced_plugin.md":"BOuMu80J","en_advanced_property.md":"urRMaqHe","en_component_contextmenu.md":"COLfX45a","en_component_controls.md":"BbQsn0wJ","en_component_layers.md":"CX93a7QS","en_component_setting.md":"C6o2AWtX","en_index.md":"CqoCnjoZ","en_start_i18n.md":"DxZ-eafn","en_start_option.md":"Bk4YXvof","index.md":"CofUiul7","plugin_danmuku.md":"B8scVs_5","start_i18n.md":"Csa2YpJX","start_option.md":"D52S8Ynf"} +{"advanced_built-in.md":"DiyRIcIA","advanced_class.md":"Da3aE0pP","advanced_event.md":"mrsB0MsK","advanced_global.md":"Bdw3azKs","advanced_plugin.md":"B3Pobmcq","advanced_property.md":"CA7GaeI3","component_contextmenu.md":"ClKmcIKr","component_controls.md":"Cl62yW1F","component_layers.md":"Cys52VMi","component_setting.md":"BP5674ir","en_advanced_built-in.md":"XdT81JC0","en_advanced_class.md":"BLyA7rxa","en_advanced_event.md":"CtQl1IYg","en_advanced_global.md":"D5Nz8wyo","en_advanced_plugin.md":"BOuMu80J","en_advanced_property.md":"urRMaqHe","en_component_contextmenu.md":"COLfX45a","en_component_controls.md":"BbQsn0wJ","en_component_layers.md":"CX93a7QS","en_component_setting.md":"C6o2AWtX","en_index.md":"C2Y0fh0y","en_start_i18n.md":"CsL-uZUF","en_start_option.md":"Bk4YXvof","index.md":"u8oxcBYH","plugin_danmuku.md":"oQjW_Ffo","start_i18n.md":"BjaLSvLX","start_option.md":"D52S8Ynf"} diff --git a/docs/document/index.html b/docs/document/index.html index 0d74af6a4..b92f3db78 100644 --- a/docs/document/index.html +++ b/docs/document/index.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

使用 ​

html
<html>
+    
Skip to content

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

使用 ​

html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -44,7 +44,7 @@
           });
         </script>
     </body>
-</html>

提示

播放器的尺寸依赖于容器 container 的尺寸,所以你的容器 container 必须是有尺寸的

以下链接可以看到更多的使用例子

/packages/artplayer-template

Vue.js ​

vue
<template>
+</html>

提示

播放器的尺寸依赖于容器 container 的尺寸,所以你的容器 container 必须是有尺寸的

以下链接可以看到更多的使用例子

/packages/artplayer-template

Vue.js ​

vue
<template>
   <div ref="$container" />
 </template>
 
@@ -96,7 +96,7 @@
 function getInstance(art) {
   console.log(art)
 }
-</script>

Artplayer 非响应式:

在 Vue.js 里直接修改 option 是不会改变播放器的

React.js ​

jsx
import Artplayer from 'artplayer'
+</script>

Artplayer 非响应式:

在 Vue.js 里直接修改 option 是不会改变播放器的

React.js ​

jsx
import Artplayer from 'artplayer'
 import { useEffect, useRef } from 'react'
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -179,7 +179,7 @@
 
 option.volume = 0.5;
 
-const art8 = new Artplayer(option);

古老的浏览器 ​

生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome:last 1 Chrome version

对于古老的浏览器,可以使用 artplayer.legacy.js 文件,可以兼容到:IE 11

js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时,请修改以下配置然后自行构建:

构建配置:scripts/build.js

参考文档:browserslist

ECMAScript Module ​

从 5.2.6 开始,artplayer 和所有插件还会提供一个 ESM 版本的 mjs,如:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);

古老的浏览器 ​

生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome:last 1 Chrome version

对于古老的浏览器,可以使用 artplayer.legacy.js 文件,可以兼容到:IE 11

js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时,请修改以下配置然后自行构建:

构建配置:scripts/build.js

参考文档:browserslist

ECMAScript Module ​

从 5.2.6 开始,artplayer 和所有插件还会提供一个 ESM 版本的 mjs,如:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -237,7 +237,7 @@
         </script>
     </body>
 </html>

提示

你需要在引入 Artplayer 依赖前来修改它才会生效

- + \ No newline at end of file diff --git a/docs/document/plugin/danmuku.html b/docs/document/plugin/danmuku.html index e6a804403..3b8f03a35 100644 --- a/docs/document/plugin/danmuku.html +++ b/docs/document/plugin/danmuku.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

弹幕库 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

弹幕结构 ​

每一个弹幕是一个对象,多个弹幕组成的数组就是弹幕库,通常只需要text就可以发送一个弹幕,其余都是非必要参数

js
{
+    
Skip to content

弹幕库 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

弹幕结构 ​

每一个弹幕是一个对象,多个弹幕组成的数组就是弹幕库,通常只需要text就可以发送一个弹幕,其余都是非必要参数

js
{
     text: '', // 弹幕文本
     time: 10, // 弹幕时间, 默认为当前播放器时间
     mode: 0, // 弹幕模式: 0: 滚动(默认),1: 顶部,2: 底部
@@ -367,7 +367,7 @@
 art.on('artplayerPluginDanmuku:destroy', () => {
     console.info('弹幕销毁');
 });
- + \ No newline at end of file diff --git a/docs/document/start/i18n.html b/docs/document/start/i18n.html index 76adccea4..5ffe53a89 100644 --- a/docs/document/start/i18n.html +++ b/docs/document/start/i18n.html @@ -13,7 +13,7 @@ - + @@ -27,7 +27,7 @@ container: '.artplayer-app', url: '/assets/sample/video.mp4', lang: 'zh-cn', // or 'en' -});

导入语言 ​

打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言

打包后的语言文件存放于: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
+});

导入语言 ​

打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言

打包后的语言文件存放于: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
 import zhTw from 'artplayer/i18n/zh-tw';
 
 var art = new Artplayer({
@@ -75,7 +75,7 @@
         },
     },
 });
- + \ No newline at end of file diff --git a/docs/document/start/option.html b/docs/document/start/option.html index 405522f25..9a7ba1d44 100644 --- a/docs/document/start/option.html +++ b/docs/document/start/option.html @@ -415,7 +415,7 @@ url: '/assets/sample/video.mp4', proxy: () => document.createElement('video') });
- + \ No newline at end of file diff --git a/packages/artplayer-plugin-liquid-glass/dist/artplayer-plugin-liquid-glass.js b/packages/artplayer-plugin-liquid-glass/dist/artplayer-plugin-liquid-glass.js new file mode 100644 index 000000000..cc61ab08e --- /dev/null +++ b/packages/artplayer-plugin-liquid-glass/dist/artplayer-plugin-liquid-glass.js @@ -0,0 +1,8 @@ + +/*! + * artplayer-plugin-liquid-glass.js v1.0.0 + * Github: https://github.com/zhw2590582/ArtPlayer + * (c) 2017-2025 Harvey Zack + * Released under the MIT License. + */ +!function(e,t,r,n,o,i,a,l){var d="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},u="function"==typeof d[n]&&d[n],s=u.i||{},c=u.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function p(t,r){if(!c[t]){if(!e[t]){if(o[t])return o[t];var i="function"==typeof d[n]&&d[n];if(!r&&i)return i(t,!0);if(u)return u(t,!0);if(f&&"string"==typeof t)return f(t);var a=Error("Cannot find module '"+t+"'");throw a.code="MODULE_NOT_FOUND",a}s.resolve=function(r){var n=e[t][1][r];return null!=n?n:r},s.cache={};var l=c[t]=new p.Module(t);e[t][0].call(l.exports,s,l,l.exports,d)}return c[t].exports;function s(e){var t=s.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var r={__esModule:!0};return t.forEach(function(e){var t=e[0],n=e[1],o=e[2]||e[0],i=p(n);"*"===t?Object.keys(i).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:function(){return i[e]}})}):"*"===o?Object.defineProperty(r,t,{enumerable:!0,value:i}):Object.defineProperty(r,t,{enumerable:!0,get:function(){return"default"===o?i.__esModule?i.default:i:i[o]}})}),r}return p(t)}}p.isParcelRequire=!0,p.Module=function(e){this.id=e,this.bundle=p,this.require=f,this.exports={}},p.modules=e,p.cache=c,p.parent=u,p.distDir=void 0,p.publicUrl=void 0,p.devServer=void 0,p.i=s,p.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(p,"root",{get:function(){return d[n]}}),d[n]=p;for(var g=0;gl);var i=e("bundle-text:./style.less"),a=o.interopDefault(i);function l(e={}){return t=>{let{constructor:r}=t,{addClass:n,append:o,createElement:i}=r.utils,{$bottom:a,$progress:l,$controls:d,$player:u}=t.template,s=i("div");return n(u,"artplayer-plugin-liquid-glass"),n(s,"art-liquid-glass"),o(a,s),o(s,l),o(s,d),t.on("control",t=>{t?(s.style.width=e.width,s.style["max-width"]=e["max-width"],s.style["min-width"]=e["min-width"]):(s.style.width="",s.style["max-width"]="",s.style["min-width"]="")}),{name:"artplayerPluginLiquidGlass"}}}if("undefined"!=typeof document){let e="artplayer-plugin-liquid-glass",t=document.getElementById(e);t||((t=document.createElement("style")).id=e,"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{document.head.appendChild(t)}):(document.head||document.documentElement).appendChild(t)),t.textContent=a.default}"undefined"!=typeof window&&(window.artplayerPluginLiquidGlass=l)},{"bundle-text:./style.less":"kzvrd","@parcel/transformer-js/src/esmodule-helpers.js":"6ykb1"}],kzvrd:[function(e,t,r,n){t.exports=".artplayer-plugin-liquid-glass.art-control-show{--art-control-height:42px;--art-control-icon-size:24px;--art-control-icon-scale:1.1}.artplayer-plugin-liquid-glass.art-control-show .art-bottom{padding-bottom:var(--art-padding);background-image:none;align-items:center}.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-liquid-glass{backdrop-filter:blur(12px);padding:var(--art-padding)calc(var(--art-padding)*1.5)5px;background-color:#00000040;border-radius:8px}.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-control-progress-inner{border-radius:5px;overflow:hidden}.artplayer-plugin-liquid-glass.art-control-show .art-settings{bottom:calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding))}.artplayer-plugin-liquid-glass.art-control-show .art-layer-auto-playback{bottom:calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding)*4 + 10px)}"},{}],"6ykb1":[function(e,t,r,n){r.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},r.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.exportAll=function(e,t){return Object.keys(e).forEach(function(r){"default"===r||"__esModule"===r||Object.prototype.hasOwnProperty.call(t,r)||Object.defineProperty(t,r,{enumerable:!0,get:function(){return e[r]}})}),t},r.export=function(e,t,r){Object.defineProperty(e,t,{enumerable:!0,get:r})}},{}]},["dOYQ3"],"dOYQ3","parcelRequire4dc0",{}); \ No newline at end of file diff --git a/packages/artplayer-plugin-liquid-glass/dist/artplayer-plugin-liquid-glass.legacy.js b/packages/artplayer-plugin-liquid-glass/dist/artplayer-plugin-liquid-glass.legacy.js new file mode 100644 index 000000000..0c8a250f3 --- /dev/null +++ b/packages/artplayer-plugin-liquid-glass/dist/artplayer-plugin-liquid-glass.legacy.js @@ -0,0 +1,8 @@ + +/*! + * artplayer-plugin-liquid-glass.js v1.0.0 + * Github: https://github.com/zhw2590582/ArtPlayer + * (c) 2017-2025 Harvey Zack + * Released under the MIT License. + */ +!function(e,t,r,n,o,a,i,l){var d="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},u="function"==typeof d[n]&&d[n],c=u.i||{},s=u.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function p(t,r){if(!s[t]){if(!e[t]){if(o[t])return o[t];var a="function"==typeof d[n]&&d[n];if(!r&&a)return a(t,!0);if(u)return u(t,!0);if(f&&"string"==typeof t)return f(t);var i=Error("Cannot find module '"+t+"'");throw i.code="MODULE_NOT_FOUND",i}c.resolve=function(r){var n=e[t][1][r];return null!=n?n:r},c.cache={};var l=s[t]=new p.Module(t);e[t][0].call(l.exports,c,l,l.exports,d)}return s[t].exports;function c(e){var t=c.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var r={__esModule:!0};return t.forEach(function(e){var t=e[0],n=e[1],o=e[2]||e[0],a=p(n);"*"===t?Object.keys(a).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:function(){return a[e]}})}):"*"===o?Object.defineProperty(r,t,{enumerable:!0,value:a}):Object.defineProperty(r,t,{enumerable:!0,get:function(){return"default"===o?a.__esModule?a.default:a:a[o]}})}),r}return p(t)}}p.isParcelRequire=!0,p.Module=function(e){this.id=e,this.bundle=p,this.require=f,this.exports={}},p.modules=e,p.cache=s,p.parent=u,p.distDir=void 0,p.publicUrl=void 0,p.devServer=void 0,p.i=c,p.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(p,"root",{get:function(){return d[n]}}),d[n]=p;for(var g=0;g0&&void 0!==arguments[0]?arguments[0]:{};return function(t){var r=t.constructor.utils,n=r.addClass,o=r.append,a=r.createElement,i=t.template,l=i.$bottom,d=i.$progress,u=i.$controls,c=i.$player,s=a("div");return n(c,"artplayer-plugin-liquid-glass"),n(s,"art-liquid-glass"),o(l,s),o(s,d),o(s,u),t.on("control",function(t){t?(s.style.width=e.width,s.style["max-width"]=e["max-width"],s.style["min-width"]=e["min-width"]):(s.style.width="",s.style["max-width"]="",s.style["min-width"]="")}),{name:"artplayerPluginLiquidGlass"}}}if("undefined"!=typeof document){var d="artplayer-plugin-liquid-glass",u=document.getElementById(d);u||((u=document.createElement("style")).id=d,"loading"===document.readyState?document.addEventListener("DOMContentLoaded",function(){document.head.appendChild(u)}):(document.head||document.documentElement).appendChild(u)),u.textContent=i.default}"undefined"!=typeof window&&(window.artplayerPluginLiquidGlass=l)},{"bundle-text:./style.less":"3gqqK","@parcel/transformer-js/src/esmodule-helpers.js":"qpMMf"}],"3gqqK":[function(e,t,r,n){t.exports=".artplayer-plugin-liquid-glass.art-control-show{--art-control-height:42px;--art-control-icon-size:24px;--art-control-icon-scale:1.1}.artplayer-plugin-liquid-glass.art-control-show .art-bottom{padding-bottom:var(--art-padding);background-image:none;align-items:center}.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-liquid-glass{backdrop-filter:blur(12px);padding:var(--art-padding)calc(var(--art-padding)*1.5)5px;background-color:rgba(0,0,0,.25);border-radius:8px}.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-control-progress-inner{border-radius:5px;overflow:hidden}.artplayer-plugin-liquid-glass.art-control-show .art-settings{bottom:calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding))}.artplayer-plugin-liquid-glass.art-control-show .art-layer-auto-playback{bottom:calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding)*4 + 10px)}"},{}],qpMMf:[function(e,t,r,n){r.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},r.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.exportAll=function(e,t){return Object.keys(e).forEach(function(r){"default"===r||"__esModule"===r||Object.prototype.hasOwnProperty.call(t,r)||Object.defineProperty(t,r,{enumerable:!0,get:function(){return e[r]}})}),t},r.export=function(e,t,r){Object.defineProperty(e,t,{enumerable:!0,get:r})}},{}]},["bMV8e"],"bMV8e","parcelRequire4dc0",{}); \ No newline at end of file diff --git a/packages/artplayer-plugin-liquid-glass/dist/artplayer-plugin-liquid-glass.mjs b/packages/artplayer-plugin-liquid-glass/dist/artplayer-plugin-liquid-glass.mjs new file mode 100644 index 000000000..c0bc33c26 --- /dev/null +++ b/packages/artplayer-plugin-liquid-glass/dist/artplayer-plugin-liquid-glass.mjs @@ -0,0 +1,8 @@ + +/*! + * artplayer-plugin-liquid-glass.js v1.0.0 + * Github: https://github.com/zhw2590582/ArtPlayer + * (c) 2017-2025 Harvey Zack + * Released under the MIT License. + */ +!function(e,t,r,n,o,i,a,l){var d="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},u="function"==typeof d[n]&&d[n],s=u.i||{},c=u.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function p(t,r){if(!c[t]){if(!e[t]){if(o[t])return o[t];var i="function"==typeof d[n]&&d[n];if(!r&&i)return i(t,!0);if(u)return u(t,!0);if(f&&"string"==typeof t)return f(t);var a=Error("Cannot find module '"+t+"'");throw a.code="MODULE_NOT_FOUND",a}s.resolve=function(r){var n=e[t][1][r];return null!=n?n:r},s.cache={};var l=c[t]=new p.Module(t);e[t][0].call(l.exports,s,l,l.exports,d)}return c[t].exports;function s(e){var t=s.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var r={__esModule:!0};return t.forEach(function(e){var t=e[0],n=e[1],o=e[2]||e[0],i=p(n);"*"===t?Object.keys(i).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:function(){return i[e]}})}):"*"===o?Object.defineProperty(r,t,{enumerable:!0,value:i}):Object.defineProperty(r,t,{enumerable:!0,get:function(){return"default"===o?i.__esModule?i.default:i:i[o]}})}),r}return p(t)}}p.isParcelRequire=!0,p.Module=function(e){this.id=e,this.bundle=p,this.require=f,this.exports={}},p.modules=e,p.cache=c,p.parent=u,p.distDir=void 0,p.publicUrl=void 0,p.devServer=void 0,p.i=s,p.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(p,"root",{get:function(){return d[n]}}),d[n]=p;for(var g=0;gl);var i=e("bundle-text:./style.less"),a=o.interopDefault(i);function l(e={}){return t=>{let{constructor:r}=t,{addClass:n,append:o,createElement:i}=r.utils,{$bottom:a,$progress:l,$controls:d,$player:u}=t.template,s=i("div");return n(u,"artplayer-plugin-liquid-glass"),n(s,"art-liquid-glass"),o(a,s),o(s,l),o(s,d),t.on("control",t=>{t?(s.style.width=e.width,s.style["max-width"]=e["max-width"],s.style["min-width"]=e["min-width"]):(s.style.width="",s.style["max-width"]="",s.style["min-width"]="")}),{name:"artplayerPluginLiquidGlass"}}}if("undefined"!=typeof document){let e="artplayer-plugin-liquid-glass",t=document.getElementById(e);t||((t=document.createElement("style")).id=e,"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{document.head.appendChild(t)}):(document.head||document.documentElement).appendChild(t)),t.textContent=a.default}"undefined"!=typeof window&&(window.artplayerPluginLiquidGlass=l)},{"bundle-text:./style.less":"8Q9di","@parcel/transformer-js/src/esmodule-helpers.js":"loqXi"}],"8Q9di":[function(e,t,r,n){t.exports=".artplayer-plugin-liquid-glass.art-control-show{--art-control-height:42px;--art-control-icon-size:24px;--art-control-icon-scale:1.1}.artplayer-plugin-liquid-glass.art-control-show .art-bottom{padding-bottom:var(--art-padding);background-image:none;align-items:center}.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-liquid-glass{backdrop-filter:blur(12px);padding:var(--art-padding)calc(var(--art-padding)*1.5)5px;background-color:#00000040;border-radius:8px}.artplayer-plugin-liquid-glass.art-control-show .art-bottom .art-control-progress-inner{border-radius:5px;overflow:hidden}.artplayer-plugin-liquid-glass.art-control-show .art-settings{bottom:calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding))}.artplayer-plugin-liquid-glass.art-control-show .art-layer-auto-playback{bottom:calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-padding)*4 + 10px)}"},{}],loqXi:[function(e,t,r,n){r.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},r.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.exportAll=function(e,t){return Object.keys(e).forEach(function(r){"default"===r||"__esModule"===r||Object.prototype.hasOwnProperty.call(t,r)||Object.defineProperty(t,r,{enumerable:!0,get:function(){return e[r]}})}),t},r.export=function(e,t,r){Object.defineProperty(e,t,{enumerable:!0,get:r})}},{}]},["d9Lrq"],"d9Lrq","parcelRequire4dc0",{});let{default:e}=parcelRequire4dc0("d9Lrq");export{e as default}; \ No newline at end of file diff --git a/packages/artplayer-plugin-liquid-glass/src/index.js b/packages/artplayer-plugin-liquid-glass/src/index.js index fb3250f98..7ae7c14a5 100644 --- a/packages/artplayer-plugin-liquid-glass/src/index.js +++ b/packages/artplayer-plugin-liquid-glass/src/index.js @@ -15,13 +15,14 @@ export default function artplayerPluginLiquidGlass(option = {}) { art.on('control', (state) => { if (state) { - $liquidGlass.style.width = option.width; - $liquidGlass.style['max-width'] = option['max-width']; - $liquidGlass.style['min-width'] = option['min-width']; - } else { - $liquidGlass.style.width = ''; - $liquidGlass.style['max-width'] = ''; - $liquidGlass.style['min-width'] = ''; + $liquidGlass.style.width = option.width + $liquidGlass.style['max-width'] = option['max-width'] + $liquidGlass.style['min-width'] = option['min-width'] + } + else { + $liquidGlass.style.width = '' + $liquidGlass.style['max-width'] = '' + $liquidGlass.style['min-width'] = '' } }) diff --git a/packages/artplayer-plugin-liquid-glass/types/artplayer-plugin-liquid-glass.d.ts b/packages/artplayer-plugin-liquid-glass/types/artplayer-plugin-liquid-glass.d.ts index ac07426c3..622fabe4b 100644 --- a/packages/artplayer-plugin-liquid-glass/types/artplayer-plugin-liquid-glass.d.ts +++ b/packages/artplayer-plugin-liquid-glass/types/artplayer-plugin-liquid-glass.d.ts @@ -1,9 +1,9 @@ import type Artplayer from 'artplayer' interface Option { - width: string; - 'max-width': string; - 'min-width': string; + 'width': string + 'max-width': string + 'min-width': string } interface Result {