From ea34eda07b9fdb37e247c67d984d514059da2618 Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Sun, 17 Aug 2025 10:30:12 +0800 Subject: [PATCH] feat: add danmuku plugin documentation and i18n setup guide - Created a new documentation file for the danmuku plugin with code examples. - Added comprehensive language settings documentation, including default languages, import methods, and how to add or modify languages. - Updated the i18n setup guide to reflect changes in language handling and provide code snippets for implementation. --- docs/assets/ts/artplayer.d.ts | 198 +++++++++++++----- docs/document/404.html | 2 +- docs/document/advanced/built-in.html | 2 +- docs/document/advanced/class.html | 2 +- docs/document/advanced/event.html | 2 +- docs/document/advanced/global.html | 2 +- docs/document/advanced/plugin.html | 2 +- docs/document/advanced/property.html | 2 +- ...md.IotpMJZn.js => en_index.md.C-lmXk5u.js} | 8 +- ...n.lean.js => en_index.md.C-lmXk5u.lean.js} | 0 ...HwAA1h.js => en_start_i18n.md.Bj-iw6Bo.js} | 2 +- ...n.js => en_start_i18n.md.Bj-iw6Bo.lean.js} | 0 ...ex.md.mlCRfznW.js => index.md.xi7dw2mq.js} | 8 +- ...fznW.lean.js => index.md.xi7dw2mq.lean.js} | 0 ...eVf0k.js => plugin_danmuku.md.BYfVi5ow.js} | 2 +- ....js => plugin_danmuku.md.BYfVi5ow.lean.js} | 0 ....ByCeLmpX.js => start_i18n.md.SWgTwNO6.js} | 2 +- ...lean.js => start_i18n.md.SWgTwNO6.lean.js} | 0 docs/document/component/contextmenu.html | 2 +- docs/document/component/controls.html | 2 +- docs/document/component/layers.html | 2 +- docs/document/component/setting.html | 2 +- docs/document/en/advanced/built-in.html | 2 +- docs/document/en/advanced/class.html | 2 +- docs/document/en/advanced/event.html | 2 +- docs/document/en/advanced/global.html | 2 +- docs/document/en/advanced/plugin.html | 2 +- docs/document/en/advanced/property.html | 2 +- docs/document/en/component/contextmenu.html | 2 +- docs/document/en/component/controls.html | 2 +- docs/document/en/component/layers.html | 2 +- docs/document/en/component/setting.html | 2 +- docs/document/en/index.html | 12 +- docs/document/en/start/i18n.html | 6 +- docs/document/en/start/option.html | 2 +- docs/document/hashmap.json | 2 +- docs/document/index.html | 12 +- docs/document/plugin/danmuku.html | 6 +- docs/document/start/i18n.html | 6 +- docs/document/start/option.html | 2 +- packages/artplayer/types/artplayer.d.ts | 58 +++-- packages/artplayer/types/component.d.ts | 4 +- packages/artplayer/types/config.d.ts | 3 - packages/artplayer/types/events.d.ts | 28 ++- packages/artplayer/types/option.d.ts | 20 +- packages/artplayer/types/player.d.ts | 36 +++- packages/artplayer/types/setting.d.ts | 4 +- packages/artplayer/types/utils.d.ts | 45 ++-- test/types.plugin.test.ts | 4 + 49 files changed, 342 insertions(+), 170 deletions(-) rename docs/document/assets/{en_index.md.IotpMJZn.js => en_index.md.C-lmXk5u.js} (98%) rename docs/document/assets/{en_index.md.IotpMJZn.lean.js => en_index.md.C-lmXk5u.lean.js} (100%) rename docs/document/assets/{en_start_i18n.md.BYHwAA1h.js => en_start_i18n.md.Bj-iw6Bo.js} (98%) rename docs/document/assets/{en_start_i18n.md.BYHwAA1h.lean.js => en_start_i18n.md.Bj-iw6Bo.lean.js} (100%) rename docs/document/assets/{index.md.mlCRfznW.js => index.md.xi7dw2mq.js} (98%) rename docs/document/assets/{index.md.mlCRfznW.lean.js => index.md.xi7dw2mq.lean.js} (100%) rename docs/document/assets/{plugin_danmuku.md.B2keVf0k.js => plugin_danmuku.md.BYfVi5ow.js} (99%) rename docs/document/assets/{plugin_danmuku.md.B2keVf0k.lean.js => plugin_danmuku.md.BYfVi5ow.lean.js} (100%) rename docs/document/assets/{start_i18n.md.ByCeLmpX.js => start_i18n.md.SWgTwNO6.js} (98%) rename docs/document/assets/{start_i18n.md.ByCeLmpX.lean.js => start_i18n.md.SWgTwNO6.lean.js} (100%) diff --git a/docs/assets/ts/artplayer.d.ts b/docs/assets/ts/artplayer.d.ts index d609e993a..4a5f83ab7 100644 --- a/docs/assets/ts/artplayer.d.ts +++ b/docs/assets/ts/artplayer.d.ts @@ -4,53 +4,60 @@ export interface Utils { isSafari: boolean isIOS: boolean isIOS13: boolean + query: (selector: string, parent?: HTMLElement) => HTMLElement queryAll: (selector: string, parent?: HTMLElement) => HTMLElement[] addClass: (target: HTMLElement, className: string) => void removeClass: (target: HTMLElement, className: string) => void hasClass: (target: HTMLElement, className: string) => boolean - append: (target: HTMLElement, className: HTMLElement) => HTMLElement + append: (target: HTMLElement, child: HTMLElement) => HTMLElement remove: (target: HTMLElement) => void + replaceElement: (newChild: HTMLElement, oldChild: HTMLElement) => HTMLElement + siblings: (target: HTMLElement) => HTMLElement[] + inverseClass: (target: HTMLElement, className: string) => void + createElement: (tag: K) => HTMLElementTagNameMap[K] setStyle: ( element: HTMLElement, key: T, value: CSSStyleDeclaration[T], ) => HTMLElement setStyles: (element: HTMLElement, styles: Partial) => HTMLElement - getStyle: ( + getStyle: ( element: HTMLElement, key: K, - numberType?: T, - ) => T extends true ? number : string - siblings: (target: HTMLElement) => HTMLElement[] - inverseClass: (target: HTMLElement, className: string) => void + numberType?: boolean, + ) => boolean extends true ? number : string + setStyleText: (element: HTMLElement, text: string) => void + getRect: (el: HTMLElement) => { top: number, left: number, width: number, height: number } tooltip: (target: HTMLElement, msg: string, pos?: string) => void isInViewport: (target: HTMLElement, offset?: number) => boolean includeFromEvent: (event: Event, target: HTMLElement) => boolean - replaceElement: (newChild: HTMLElement, oldChild: HTMLElement) => HTMLElement - createElement: (tag: keyof HTMLElementTagNameMap) => HTMLElement - errorHandle: (condition: T, msg: string) => T extends true ? T : never + srtToVtt: (srtText: string) => string vttToBlob: (vttText: string) => string assToVtt: (assText: string) => string + getExt: (url: string) => string download: (url: string, name: string) => void - def: (obj: object, name: string, value: any) => void - has: (obj: object, name: string) => boolean - get: (obj: object, name: string) => PropertyDescriptor - mergeDeep: (...args: T[]) => T - sleep: (ms: number) => Promise - debounce: (func: (...arg: any[]) => any, wait: number, context?: object) => (...arg: any[]) => any - throttle: (func: (...arg: any[]) => any, wait: number) => (...arg: any[]) => any + loadImg: (url: string, scale?: number) => Promise + + errorHandle: (condition: T, msg: string) => T extends true ? T : never + def: (obj: object, name: string, value: unknown) => void + has: (obj: object, name: PropertyKey) => boolean + get: (obj: object, name: PropertyKey) => PropertyDescriptor | undefined + mergeDeep: (...args: T) => T[number] + + sleep: (ms: number) => Promise + debounce: any>(func: F, wait: number, context?: object) => (...args: Parameters) => ReturnType + throttle: any>(func: F, wait: number) => (...args: Parameters) => ReturnType + clamp: (num: number, a: number, b: number) => number secondToTime: (second: number) => string escape: (str: string) => string capitalize: (str: string) => string + getIcon: (key: string, html: string | HTMLElement) => HTMLElement supportsFlex: () => boolean - setStyleText: (element: HTMLElement, text: string) => void - getRect: (el: HTMLElement) => { top: number, left: number, width: number, height: number } - loadImg: (url: string, scale?: number) => Promise } export interface Template { @@ -132,7 +139,7 @@ type Props = { $parent: Setting $parents: Setting[] $option: Setting[] - $events: Array<(...args: any[]) => any> + $events: Array<(...args: unknown[]) => unknown> $formatted: boolean } & Omit @@ -209,7 +216,7 @@ export interface Setting { */ onClick?: (this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event) => void - [key: string]: any + [key: string]: unknown } export interface Quality { @@ -241,31 +248,44 @@ export type State = 'standard' | 'mini' | 'pip' | 'fullscreen' | 'fullscreenWeb' export declare class Player { get aspectRatio(): AspectRatio set aspectRatio(ratio: AspectRatio) + get state(): State set state(state: State) + get type(): CustomType set type(name: CustomType) + get playbackRate(): PlaybackRate set playbackRate(rate: PlaybackRate) + get currentTime(): number set currentTime(time: number) + get duration(): number get played(): number get playing(): boolean + get flip(): Flip set flip(state: Flip) + get fullscreen(): boolean set fullscreen(state: boolean) + get fullscreenWeb(): boolean set fullscreenWeb(state: boolean) + get loaded(): number get loadedTime(): number + get mini(): boolean set mini(state: boolean) + get pip(): boolean set pip(state: boolean) + get poster(): string set poster(url: string) + get rect(): DOMRect get bottom(): number get height(): number @@ -275,40 +295,57 @@ export declare class Player { get width(): number get x(): number get y(): number + set seek(time: number) get seek(): number + set forward(time: number) get forward(): number + set backward(time: number) get backward(): number + get url(): string set url(url: string) + get volume(): number set volume(percentage: number) + get muted(): boolean set muted(state: boolean) + get title(): string set title(title: string) + get theme(): string set theme(theme: string) + get subtitleOffset(): number set subtitleOffset(time: number) - set switch(url: string) + get switch(): string - set quality(quality: Quality[]) + set switch(url: string) + get quality(): Quality[] + set quality(quality: Quality[]) + get thumbnails(): Thumbnails set thumbnails(thumbnails: Thumbnails) + pause(): void play(): Promise toggle(): void - attr(key: string, value?: any): unknown + + attr(key: string, value?: unknown): unknown cssVar(key: T, value?: CssVar[T]): CssVar[T] + switchUrl(url: string): Promise switchQuality(url: string): Promise + getDataURL(): Promise getBlobUrl(): Promise screenshot(name?: string): Promise + airplay(): void autoSize(): void autoHeight(): void @@ -323,7 +360,14 @@ export declare class Player { -export type CustomType = 'flv' | 'm3u8' | 'hls' | 'ts' | 'mpd' | 'torrent' | (string & Record) +export type CustomType + = | 'flv' + | 'm3u8' + | 'hls' + | 'ts' + | 'mpd' + | 'torrent' + | (string & Record) export interface Thumbnails { /** @@ -597,7 +641,9 @@ export interface Option { * Other video attribute */ moreVideoAttr?: Partial<{ - [key in keyof HTMLVideoElement as HTMLVideoElement[key] extends (...args: any[]) => any ? never : key]: HTMLVideoElement[key]; + [key in keyof HTMLVideoElement as HTMLVideoElement[key] extends (...args: unknown[]) => unknown + ? never + : key]: HTMLVideoElement[key] }> /** @@ -609,7 +655,7 @@ export interface Option { * Custom default icons */ icons?: { - [key in keyof Icons]?: HTMLElement | string; + [key in keyof Icons]?: HTMLElement | string } /** @@ -621,8 +667,11 @@ export interface Option { * Custom video type function */ customType?: Partial< - Record any> + Record< + CustomType, + (this: Artplayer, video: HTMLVideoElement, url: string, art: Artplayer) => unknown > + > } export interface Icons { @@ -719,13 +768,29 @@ export type I18n = Partial>> export type Bar = 'loaded' | 'played' | 'hover' export interface Events { + 'document:click': [event: Event] + 'document:mouseup': [event: Event] + 'document:keydown': [event: Event] + 'document:touchend': [event: Event] + 'document:touchmove': [event: Event] + 'document:mousemove': [event: Event] + 'document:pointerup': [event: Event] + 'document:contextmenu': [event: Event] + 'document:pointermove': [event: Event] + 'document:visibilitychange': [event: Event] + 'document:webkitfullscreenchange': [event: Event] + + 'window:resize': [event: Event] + 'window:scroll': [event: Event] + 'window:orientationchange': [event: Event] + 'video:canplay': [event: Event] 'video:canplaythrough': [event: Event] 'video:complete': [event: Event] 'video:durationchange': [event: Event] 'video:emptied': [event: Event] 'video:ended': [event: Event] - 'video:error': [event: Error] + 'video:error': [error: Error] 'video:loadeddata': [event: Event] 'video:loadedmetadata': [event: Event] 'video:pause': [event: Event] @@ -740,8 +805,7 @@ export interface Events { 'video:timeupdate': [event: Event] 'video:volumechange': [event: Event] 'video:waiting': [event: Event] - 'document:mousemove': [event: Event] - 'document:mouseup': [event: Event] + 'info': [state: boolean] 'layer': [state: boolean] 'loading': [state: boolean] @@ -751,17 +815,21 @@ export interface Events { 'control': [state: boolean] 'setting': [state: boolean] 'hotkey': [event: Event] + 'destroy': [] + 'subtitleOffset': [offset: number] 'subtitleBeforeUpdate': [cue: VTTCue] 'subtitleAfterUpdate': [cue: VTTCue] 'subtitleLoad': [cues: VTTCue[], option: Subtitle] + 'focus': [event: Event] 'blur': [event: Event] 'dblclick': [event: Event] 'click': [event: Event] 'hover': [state: boolean, event: Event] 'mousemove': [event: Event] + 'resize': [] 'view': [state: boolean] 'lock': [state: boolean] @@ -769,6 +837,7 @@ export interface Events { 'autoHeight': [height: number] 'autoSize': [] 'ready': [] + 'error': [error: Error, reconnectTime: number] 'flip': [flip: Flip] 'fullscreen': [state: boolean] @@ -782,7 +851,7 @@ export interface Events { 'seek': [currentTime: number] 'restart': [url: string] 'muted': [state: boolean] - 'setBar': [type: Bar, percentage: number, event?: Event] + 'setBar': [type: Bar, percentage: number, event?: Event | undefined] 'keydown': [event: KeyboardEvent] } @@ -832,9 +901,6 @@ export interface CssVar { } export interface Config { - /** - * Supported video properties - */ properties: [ 'audioTracks', 'autoplay', @@ -939,12 +1005,12 @@ export interface Component { /** * Component parent name */ - readonly name: string | void + readonly name: string | undefined /** * Component parent element */ - readonly $parent: HTMLElement | void + readonly $parent: HTMLElement | undefined /** * Whether to show component parent @@ -1051,7 +1117,19 @@ export interface ComponentOption { -export type { Config, Events, I18n, Icons, Option, Player, Setting, SettingOption, Subtitle, Template, Utils } +export type { + Config, + Events, + I18n, + Icons, + Option, + Player, + Setting, + SettingOption, + Subtitle, + Template, + Utils, +} export default class Artplayer extends Player { constructor(option: Option, readyCallback?: (this: Artplayer, art: Artplayer) => unknown) @@ -1076,9 +1154,9 @@ export default class Artplayer extends Player { static readonly config: Config static readonly utils: Utils static readonly scheme: Record - static readonly Emitter: (...args: any[]) => any + static readonly Emitter: new (...args: any[]) => any static readonly validator: (option: T, scheme: object) => T - static readonly kindOf: (item: any) => string + static readonly kindOf: (item: unknown) => string static readonly html: Artplayer['template']['html'] static readonly option: Option @@ -1125,23 +1203,32 @@ export default class Artplayer extends Player { readonly isRotate: boolean readonly isDestroy: boolean - flv: any - m3u8: any - hls: any - ts: any - mpd: any - torrent: any + flv?: unknown + m3u8?: unknown + hls?: unknown + ts?: unknown + mpd?: unknown + torrent?: unknown - on(name: T, fn: (...args: Events[T]) => unknown, ctx?: object): unknown - once(name: T, fn: (...args: Events[T]) => unknown, ctx?: object): unknown - emit(name: T, ...args: unknown[]): unknown - off(name: T, callback?: ((...args: Events[T]) => unknown)): unknown + on(name: T, fn: (...args: Events[T]) => unknown, ctx?: object): this + on(name: string, fn: (...args: any[]) => unknown, ctx?: object): this + + once(name: T, fn: (...args: Events[T]) => unknown, ctx?: object): this + once(name: string, fn: (...args: any[]) => unknown, ctx?: object): this + + emit(name: T, ...args: Events[T]): this + emit(name: string, ...args: any[]): this + + off(name: T, callback?: (...args: Events[T]) => unknown): this + off(name: string, callback?: (...args: any[]) => unknown): this query: Artplayer['template']['query'] proxy: Artplayer['events']['proxy'] video: Artplayer['template']['$video'] - e: Record any, ctx: unknown }[]> + e: { + [K in keyof Events]?: { fn: (...args: Events[K]) => any, ctx: unknown }[] + } destroy(removeHtml?: boolean): void @@ -1164,9 +1251,9 @@ export default class Artplayer extends Player { readonly storage: { name: string - settings: Record - get: (key: string) => any - set: (key: string, value: any) => void + settings: Record + get: (key: string) => unknown + set: (key: string, value: unknown) => void del: (key: string) => boolean clear: () => void } @@ -1185,9 +1272,7 @@ export default class Artplayer extends Player { } readonly layers: Record & Component - readonly controls: Record & Component - readonly contextmenu: Record & Component readonly subtitle: { @@ -1201,7 +1286,6 @@ export default class Artplayer extends Player { } & Component readonly info: Component - readonly loading: Component readonly hotkey: { diff --git a/docs/document/404.html b/docs/document/404.html index bdd55018d..07246c3ae 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 1bd3f2b04..4096e387b 100644 --- a/docs/document/advanced/built-in.html +++ b/docs/document/advanced/built-in.html @@ -206,7 +206,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 de5016b4f..00bb4da69 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 642a8c6d2..08463587b 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 401d38f0a..38d037200 100644 --- a/docs/document/advanced/global.html +++ b/docs/document/advanced/global.html @@ -240,7 +240,7 @@ url: '/assets/sample/video.mp4', miniProgressBar: true, }); - + \ No newline at end of file diff --git a/docs/document/advanced/plugin.html b/docs/document/advanced/plugin.html index 4dedb0b3d..c827bbed2 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 fd16e00c0..3f614b70a 100644 --- a/docs/document/advanced/property.html +++ b/docs/document/advanced/property.html @@ -427,7 +427,7 @@ art.on('ready', () => { art.subtitleOffset = 1; }); - + \ No newline at end of file diff --git a/docs/document/assets/en_index.md.IotpMJZn.js b/docs/document/assets/en_index.md.C-lmXk5u.js similarity index 98% rename from docs/document/assets/en_index.md.IotpMJZn.js rename to docs/document/assets/en_index.md.C-lmXk5u.js index f3352fe64..e9191dfbc 100644 --- a/docs/document/assets/en_index.md.IotpMJZn.js +++ b/docs/document/assets/en_index.md.C-lmXk5u.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 and Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1754013470000}'),p={name:"en/index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`

Installation and 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 and Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1754013470000}'),p={name:"en/index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`
Installation and 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>
Warning
The player's size depends on the size of the container container, so your container container must have a size.
You can find more usage examples at the link below
/packages/artplayer-template
Vue.js ​
vue
<template>
+</html>
Warning
The player's size depends on the size of the container container, so your container container must have a size.
You can find more usage examples at the link below
/packages/artplayer-template
Vue.js ​
vue
<template>
   <div ref="artRef"></div>
 </template>
 
@@ -83,7 +83,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
     },
   },
 };
-</script>
Artplayer Not Responsive：
Modifying option directly in Vue.js will not change the player
React.js ​
jsx
import { useEffect, useRef } from 'react';
+</script>
Artplayer Not Responsive：
Modifying option directly in Vue.js will not change the player
React.js ​
jsx
import { useEffect, useRef } from 'react';
 import Artplayer from 'artplayer';
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -171,7 +171,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);
Ancient Browsers ​
The production build of artplayer.js is only compatible with the latest major version of Chrome: last 1 Chrome version
For ancient browsers, you can use the artplayer.legacy.js file, which is compatible up to: IE 11
js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
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, please modify the following configuration and then build it yourself:
Build configuration: scripts/build.js
Refer to documentation: browserslist
ECMAScript Module ​
ESM Demo:
https://artplayer.org/esm.html
Starting from 5.2.4, artplayer and all plugins will also provide an ESM version of js, such as:
  • artplayer/dist/artplayer.esm.js
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.esm.js
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);
Ancient Browsers ​
The production build of artplayer.js is only compatible with the latest major version of Chrome: last 1 Chrome version
For ancient browsers, you can use the artplayer.legacy.js file, which is compatible up to: IE 11
js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
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, please modify the following configuration and then build it yourself:
Build configuration: scripts/build.js
Refer to documentation: browserslist
ECMAScript Module ​
ESM Demo:
https://artplayer.org/esm.html
Starting from 5.2.4, artplayer and all plugins will also provide an ESM version of js, such as:
  • artplayer/dist/artplayer.esm.js
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.esm.js
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
diff --git a/docs/document/assets/en_index.md.IotpMJZn.lean.js b/docs/document/assets/en_index.md.C-lmXk5u.lean.js
similarity index 100%
rename from docs/document/assets/en_index.md.IotpMJZn.lean.js
rename to docs/document/assets/en_index.md.C-lmXk5u.lean.js
diff --git a/docs/document/assets/en_start_i18n.md.BYHwAA1h.js b/docs/document/assets/en_start_i18n.md.Bj-iw6Bo.js
similarity index 98%
rename from docs/document/assets/en_start_i18n.md.BYHwAA1h.js
rename to docs/document/assets/en_start_i18n.md.Bj-iw6Bo.js
index b23c448a0..42882246d 100644
--- a/docs/document/assets/en_start_i18n.md.BYHwAA1h.js
+++ b/docs/document/assets/en_start_i18n.md.Bj-iw6Bo.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 packaging are located in: artplayer/src/i18n/*.js. You are welcome to add your language. Packaged language files are located at: artplayer/dist/i18n/*.js
js
import id from 'artplayer/dist/i18n/id.js';
+});
Importing Languages ​
Language files before packaging are located in: artplayer/src/i18n/*.js. You are welcome to add your language. Packaged language files are located at: artplayer/dist/i18n/*.js
js
import id from 'artplayer/dist/i18n/id.js';
 import zhTw from 'artplayer/dist/i18n/zh-tw.js';
 
 var art = new Artplayer({
diff --git a/docs/document/assets/en_start_i18n.md.BYHwAA1h.lean.js b/docs/document/assets/en_start_i18n.md.Bj-iw6Bo.lean.js
similarity index 100%
rename from docs/document/assets/en_start_i18n.md.BYHwAA1h.lean.js
rename to docs/document/assets/en_start_i18n.md.Bj-iw6Bo.lean.js
diff --git a/docs/document/assets/index.md.mlCRfznW.js b/docs/document/assets/index.md.xi7dw2mq.js
similarity index 98%
rename from docs/document/assets/index.md.mlCRfznW.js
rename to docs/document/assets/index.md.xi7dw2mq.js
index 0bba57857..e142eaff3 100644
--- a/docs/document/assets/index.md.mlCRfznW.js
+++ b/docs/document/assets/index.md.xi7dw2mq.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":1754013470000}'),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":1754013470000}'),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="artRef"></div>
 </template>
 
@@ -83,7 +83,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
     },
   },
 };
-</script>
Artplayer 非响应式：
在 Vue.js 里直接修改 option 是不会改变播放器的
React.js ​
jsx
import { useEffect, useRef } from 'react';
+</script>
Artplayer 非响应式：
在 Vue.js 里直接修改 option 是不会改变播放器的
React.js ​
jsx
import { useEffect, useRef } from 'react';
 import Artplayer from 'artplayer';
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -171,7 +171,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/dist/artplayer.legacy.js';
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 ​
ESM Demo:
https://artplayer.org/esm.html
从 5.2.4 开始，artplayer和所有插件还会提供一个ESM版本的js，如：
  • artplayer/dist/artplayer.esm.js
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.esm.js
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/dist/artplayer.legacy.js';
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 ​
ESM Demo:
https://artplayer.org/esm.html
从 5.2.4 开始，artplayer和所有插件还会提供一个ESM版本的js，如：
  • artplayer/dist/artplayer.esm.js
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.esm.js
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
diff --git a/docs/document/assets/index.md.mlCRfznW.lean.js b/docs/document/assets/index.md.xi7dw2mq.lean.js
similarity index 100%
rename from docs/document/assets/index.md.mlCRfznW.lean.js
rename to docs/document/assets/index.md.xi7dw2mq.lean.js
diff --git a/docs/document/assets/plugin_danmuku.md.B2keVf0k.js b/docs/document/assets/plugin_danmuku.md.BYfVi5ow.js
similarity index 99%
rename from docs/document/assets/plugin_danmuku.md.B2keVf0k.js
rename to docs/document/assets/plugin_danmuku.md.BYfVi5ow.js
index 966bfb06a..4ae04f163 100644
--- a/docs/document/assets/plugin_danmuku.md.B2keVf0k.js
+++ b/docs/document/assets/plugin_danmuku.md.BYfVi5ow.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.B2keVf0k.lean.js b/docs/document/assets/plugin_danmuku.md.BYfVi5ow.lean.js
similarity index 100%
rename from docs/document/assets/plugin_danmuku.md.B2keVf0k.lean.js
rename to docs/document/assets/plugin_danmuku.md.BYfVi5ow.lean.js
diff --git a/docs/document/assets/start_i18n.md.ByCeLmpX.js b/docs/document/assets/start_i18n.md.SWgTwNO6.js
similarity index 98%
rename from docs/document/assets/start_i18n.md.ByCeLmpX.js
rename to docs/document/assets/start_i18n.md.SWgTwNO6.js
index 6eed8cd3b..41e38076b 100644
--- a/docs/document/assets/start_i18n.md.ByCeLmpX.js
+++ b/docs/document/assets/start_i18n.md.SWgTwNO6.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/dist/i18n/id.js';
+});
导入语言 ​
打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言
打包后的语言文件存放于: artplayer/dist/i18n/*.js
js
import id from 'artplayer/dist/i18n/id.js';
 import zhTw from 'artplayer/dist/i18n/zh-tw.js';
 
 var art = new Artplayer({
diff --git a/docs/document/assets/start_i18n.md.ByCeLmpX.lean.js b/docs/document/assets/start_i18n.md.SWgTwNO6.lean.js
similarity index 100%
rename from docs/document/assets/start_i18n.md.ByCeLmpX.lean.js
rename to docs/document/assets/start_i18n.md.SWgTwNO6.lean.js
diff --git a/docs/document/component/contextmenu.html b/docs/document/component/contextmenu.html
index 8a185da27..9ea4dac85 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 9c5939393..27be4ecec 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 d8b924f73..9c0cda2d2 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 fa2a00793..a4c08b39e 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 8b00bdb4f..2afc924c0 100644 --- a/docs/document/en/advanced/built-in.html +++ b/docs/document/en/advanced/built-in.html @@ -206,7 +206,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 ea7dc9121..1d50fccba 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 of the video

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

utils ​

Returns a collection of utility functions for the player

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

For the full list of utility functions, please refer to the following address:

artplayer/types/utils.d.ts

scheme ​

Returns the validation scheme for the player options

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

Emitter ​

Returns the constructor for the event dispatcher

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

validator ​

Returns the validation function for options

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

kindOf ​

Returns the function tool for type checking

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

html ​

Returns the html string required for the player

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

option ​

Returns the player's default options

▶ 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 1b0bb1954..46b040da4 100644 --- a/docs/document/en/advanced/event.html +++ b/docs/document/en/advanced/event.html @@ -385,7 +385,7 @@ art.on('keydown', (event) => { console.log(event.code); });

video:canplay ​

The browser can play the media file, but estimates there is not 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 for content buffering

video:complete ​

OfflineAudioContext rendering is complete

video:durationchange ​

Triggered when the value of the duration property changes

video:emptied ​

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

video:ended ​

The video has stopped because the media reached the 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 started

video:playing ​

Playback is ready to start following a pause or delay due to lack of data

video:progress ​

Periodically triggered while the browser is loading resources

video:ratechange ​

The playback rate has changed

video:seeked ​

A seek (frame skipping) operation has completed

video:seeking ​

A seek (frame skipping) operation has started

video:stalled ​

The user agent is trying to fetch media data, but the data unexpectedly has not appeared

video:suspend ​

Media data loading has been suspended

video:timeupdate ​

The time specified by the currentTime attribute has changed

video:volumechange ​

Volume changed

video:waiting ​

Playback has stopped due to temporarily missing data

- + \ No newline at end of file diff --git a/docs/document/en/advanced/global.html b/docs/document/en/advanced/global.html index f3f3a6f8c..53f529098 100644 --- a/docs/document/en/advanced/global.html +++ b/docs/document/en/advanced/global.html @@ -245,7 +245,7 @@ url: '/assets/sample/video.mp4', miniProgressBar: true, }); - + \ No newline at end of file diff --git a/docs/document/en/advanced/plugin.html b/docs/document/en/advanced/plugin.html index 184a0eca4..6207b15f8 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 ecdc70c81..a7927f302 100644 --- a/docs/document/en/advanced/property.html +++ b/docs/document/en/advanced/property.html @@ -428,7 +428,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 159a851b9..c416c8cfe 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 363e1c45d..9a883e56a 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 bce93dfbf..b0f108018 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 014e72e00..3a524a446 100644 --- a/docs/document/en/component/setting.html +++ b/docs/document/en/component/setting.html @@ -245,7 +245,7 @@ }); }, 3000); }); - + \ No newline at end of file diff --git a/docs/document/en/index.html b/docs/document/en/index.html index 29b7ea82e..c96168550 100644 --- a/docs/document/en/index.html +++ b/docs/document/en/index.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Artplayer.js

Appearance

Installation and 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>
+    
Artplayer.js
Appearance
Installation and 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>
Warning
The player's size depends on the size of the container container, so your container container must have a size.
You can find more usage examples at the link below
/packages/artplayer-template
Vue.js ​
vue
<template>
+</html>
Warning
The player's size depends on the size of the container container, so your container container must have a size.
You can find more usage examples at the link below
/packages/artplayer-template
Vue.js ​
vue
<template>
   <div ref="artRef"></div>
 </template>
 
@@ -108,7 +108,7 @@
     },
   },
 };
-</script>
Artplayer Not Responsive：
Modifying option directly in Vue.js will not change the player
React.js ​
jsx
import { useEffect, useRef } from 'react';
+</script>
Artplayer Not Responsive：
Modifying option directly in Vue.js will not change the player
React.js ​
jsx
import { useEffect, useRef } from 'react';
 import Artplayer from 'artplayer';
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -196,7 +196,7 @@
 
 option.volume = 0.5;
 
-const art8 = new Artplayer(option);
Ancient Browsers ​
The production build of artplayer.js is only compatible with the latest major version of Chrome: last 1 Chrome version
For ancient browsers, you can use the artplayer.legacy.js file, which is compatible up to: IE 11
js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
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, please modify the following configuration and then build it yourself:
Build configuration: scripts/build.js
Refer to documentation: browserslist
ECMAScript Module ​
ESM Demo:
https://artplayer.org/esm.html
Starting from 5.2.4, artplayer and all plugins will also provide an ESM version of js, such as:
  • artplayer/dist/artplayer.esm.js
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.esm.js
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);
Ancient Browsers ​
The production build of artplayer.js is only compatible with the latest major version of Chrome: last 1 Chrome version
For ancient browsers, you can use the artplayer.legacy.js file, which is compatible up to: IE 11
js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
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, please modify the following configuration and then build it yourself:
Build configuration: scripts/build.js
Refer to documentation: browserslist
ECMAScript Module ​
ESM Demo:
https://artplayer.org/esm.html
Starting from 5.2.4, artplayer and all plugins will also provide an ESM version of js, such as:
  • artplayer/dist/artplayer.esm.js
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.esm.js
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -254,7 +254,7 @@
         </script>
     </body>
 </html>
Warning
You need to modify it before import the Artplayer 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 86e53e324..6a27f0566 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 packaging are located in: artplayer/src/i18n/*.js. You are welcome to add your language. Packaged language files are located at: artplayer/dist/i18n/*.js

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

Importing Languages ​

Language files before packaging are located in: artplayer/src/i18n/*.js. You are welcome to add your language. Packaged language files are located at: artplayer/dist/i18n/*.js

js
import id from 'artplayer/dist/i18n/id.js';
 import zhTw from 'artplayer/dist/i18n/zh-tw.js';
 
 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 d3a2f7daf..9525825de 100644 --- a/docs/document/en/start/option.html +++ b/docs/document/en/start/option.html @@ -411,7 +411,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 065792dca..238757671 100644 --- a/docs/document/hashmap.json +++ b/docs/document/hashmap.json @@ -1 +1 @@ -{"advanced_built-in.md":"B5ccy6gK","advanced_class.md":"Da3aE0pP","advanced_event.md":"mrsB0MsK","advanced_global.md":"C-56tmUD","advanced_plugin.md":"B3Pobmcq","advanced_property.md":"D59FnDH1","component_contextmenu.md":"ClKmcIKr","component_controls.md":"Cl62yW1F","component_layers.md":"Cys52VMi","component_setting.md":"BP5674ir","en_advanced_built-in.md":"CY71IZlq","en_advanced_class.md":"C3V-LDO3","en_advanced_event.md":"D5Yv5LYW","en_advanced_global.md":"BbhNIAMt","en_advanced_plugin.md":"hspsx5uD","en_advanced_property.md":"COS94_z7","en_component_contextmenu.md":"DgD64wIy","en_component_controls.md":"Bj2oItzY","en_component_layers.md":"BNGRBNoB","en_component_setting.md":"Dqvlpr4j","en_index.md":"IotpMJZn","en_start_i18n.md":"BYHwAA1h","en_start_option.md":"6JX4hU8Q","index.md":"mlCRfznW","plugin_danmuku.md":"B2keVf0k","start_i18n.md":"ByCeLmpX","start_option.md":"B5CHO-We"} +{"advanced_built-in.md":"B5ccy6gK","advanced_class.md":"Da3aE0pP","advanced_event.md":"mrsB0MsK","advanced_global.md":"C-56tmUD","advanced_plugin.md":"B3Pobmcq","advanced_property.md":"D59FnDH1","component_contextmenu.md":"ClKmcIKr","component_controls.md":"Cl62yW1F","component_layers.md":"Cys52VMi","component_setting.md":"BP5674ir","en_advanced_built-in.md":"CY71IZlq","en_advanced_class.md":"C3V-LDO3","en_advanced_event.md":"D5Yv5LYW","en_advanced_global.md":"BbhNIAMt","en_advanced_plugin.md":"hspsx5uD","en_advanced_property.md":"COS94_z7","en_component_contextmenu.md":"DgD64wIy","en_component_controls.md":"Bj2oItzY","en_component_layers.md":"BNGRBNoB","en_component_setting.md":"Dqvlpr4j","en_index.md":"C-lmXk5u","en_start_i18n.md":"Bj-iw6Bo","en_start_option.md":"6JX4hU8Q","index.md":"xi7dw2mq","plugin_danmuku.md":"BYfVi5ow","start_i18n.md":"SWgTwNO6","start_option.md":"B5CHO-We"} diff --git a/docs/document/index.html b/docs/document/index.html index 510274d67..46c358eec 100644 --- a/docs/document/index.html +++ b/docs/document/index.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Artplayer.js

Appearance

安装使用 ​

安装 ​

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>
+    
Artplayer.js
Appearance
安装使用 ​
安装 ​
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="artRef"></div>
 </template>
 
@@ -108,7 +108,7 @@
     },
   },
 };
-</script>
Artplayer 非响应式：
在 Vue.js 里直接修改 option 是不会改变播放器的
React.js ​
jsx
import { useEffect, useRef } from 'react';
+</script>
Artplayer 非响应式：
在 Vue.js 里直接修改 option 是不会改变播放器的
React.js ​
jsx
import { useEffect, useRef } from 'react';
 import Artplayer from 'artplayer';
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -196,7 +196,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/dist/artplayer.legacy.js';
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 ​
ESM Demo:
https://artplayer.org/esm.html
从 5.2.4 开始，artplayer和所有插件还会提供一个ESM版本的js，如：
  • artplayer/dist/artplayer.esm.js
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.esm.js
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/dist/artplayer.legacy.js';
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 ​
ESM Demo:
https://artplayer.org/esm.html
从 5.2.4 开始，artplayer和所有插件还会提供一个ESM版本的js，如：
  • artplayer/dist/artplayer.esm.js
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.esm.js
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -254,7 +254,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 74a50c829..d931fd5da 100644
--- a/docs/document/plugin/danmuku.html
+++ b/docs/document/plugin/danmuku.html
@@ -13,7 +13,7 @@
     
     
     
-    
+    
     
     
     
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
弹幕库 ​
演示 ​
👉 查看完整演示
安装 ​
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
{
+    
Artplayer.js
Appearance
弹幕库 ​
演示 ​
👉 查看完整演示
安装 ​
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 be8e222d0..aa20cc98e 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/dist/i18n/id.js';
+});
导入语言 ​
打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言
打包后的语言文件存放于: artplayer/dist/i18n/*.js
js
import id from 'artplayer/dist/i18n/id.js';
 import zhTw from 'artplayer/dist/i18n/zh-tw.js';
 
 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 750f7d939..de0dd3c06 100644
--- a/docs/document/start/option.html
+++ b/docs/document/start/option.html
@@ -411,7 +411,7 @@
     url: '/assets/sample/video.mp4',
     proxy: () => document.createElement('video')
 });
- + \ No newline at end of file diff --git a/packages/artplayer/types/artplayer.d.ts b/packages/artplayer/types/artplayer.d.ts index f0720652b..56161c08f 100644 --- a/packages/artplayer/types/artplayer.d.ts +++ b/packages/artplayer/types/artplayer.d.ts @@ -10,7 +10,19 @@ import type { Subtitle } from './subtitle' import type { Template } from './template' import type { Utils } from './utils' -export type { Config, Events, I18n, Icons, Option, Player, Setting, SettingOption, Subtitle, Template, Utils } +export type { + Config, + Events, + I18n, + Icons, + Option, + Player, + Setting, + SettingOption, + Subtitle, + Template, + Utils, +} export default class Artplayer extends Player { constructor(option: Option, readyCallback?: (this: Artplayer, art: Artplayer) => unknown) @@ -35,9 +47,9 @@ export default class Artplayer extends Player { static readonly config: Config static readonly utils: Utils static readonly scheme: Record - static readonly Emitter: (...args: any[]) => any + static readonly Emitter: new (...args: any[]) => any static readonly validator: (option: T, scheme: object) => T - static readonly kindOf: (item: any) => string + static readonly kindOf: (item: unknown) => string static readonly html: Artplayer['template']['html'] static readonly option: Option @@ -84,23 +96,32 @@ export default class Artplayer extends Player { readonly isRotate: boolean readonly isDestroy: boolean - flv: any - m3u8: any - hls: any - ts: any - mpd: any - torrent: any + flv?: unknown + m3u8?: unknown + hls?: unknown + ts?: unknown + mpd?: unknown + torrent?: unknown - on(name: T, fn: (...args: Events[T]) => unknown, ctx?: object): unknown - once(name: T, fn: (...args: Events[T]) => unknown, ctx?: object): unknown - emit(name: T, ...args: unknown[]): unknown - off(name: T, callback?: ((...args: Events[T]) => unknown)): unknown + on(name: T, fn: (...args: Events[T]) => unknown, ctx?: object): this + on(name: string, fn: (...args: any[]) => unknown, ctx?: object): this + + once(name: T, fn: (...args: Events[T]) => unknown, ctx?: object): this + once(name: string, fn: (...args: any[]) => unknown, ctx?: object): this + + emit(name: T, ...args: Events[T]): this + emit(name: string, ...args: any[]): this + + off(name: T, callback?: (...args: Events[T]) => unknown): this + off(name: string, callback?: (...args: any[]) => unknown): this query: Artplayer['template']['query'] proxy: Artplayer['events']['proxy'] video: Artplayer['template']['$video'] - e: Record any, ctx: unknown }[]> + e: { + [K in keyof Events]?: { fn: (...args: Events[K]) => any, ctx: unknown }[] + } destroy(removeHtml?: boolean): void @@ -123,9 +144,9 @@ export default class Artplayer extends Player { readonly storage: { name: string - settings: Record - get: (key: string) => any - set: (key: string, value: any) => void + settings: Record + get: (key: string) => unknown + set: (key: string, value: unknown) => void del: (key: string) => boolean clear: () => void } @@ -144,9 +165,7 @@ export default class Artplayer extends Player { } readonly layers: Record & Component - readonly controls: Record & Component - readonly contextmenu: Record & Component readonly subtitle: { @@ -160,7 +179,6 @@ export default class Artplayer extends Player { } & Component readonly info: Component - readonly loading: Component readonly hotkey: { diff --git a/packages/artplayer/types/component.d.ts b/packages/artplayer/types/component.d.ts index 9ccdf01a3..e4a82c1df 100644 --- a/packages/artplayer/types/component.d.ts +++ b/packages/artplayer/types/component.d.ts @@ -21,12 +21,12 @@ export interface Component { /** * Component parent name */ - readonly name: string | void + readonly name: string | undefined /** * Component parent element */ - readonly $parent: HTMLElement | void + readonly $parent: HTMLElement | undefined /** * Whether to show component parent diff --git a/packages/artplayer/types/config.d.ts b/packages/artplayer/types/config.d.ts index 406d4205a..901416d88 100644 --- a/packages/artplayer/types/config.d.ts +++ b/packages/artplayer/types/config.d.ts @@ -1,7 +1,4 @@ export interface Config { - /** - * Supported video properties - */ properties: [ 'audioTracks', 'autoplay', diff --git a/packages/artplayer/types/events.d.ts b/packages/artplayer/types/events.d.ts index 96ab94dc6..c9cf7af1a 100644 --- a/packages/artplayer/types/events.d.ts +++ b/packages/artplayer/types/events.d.ts @@ -4,13 +4,29 @@ import type { Subtitle } from './subtitle' export type Bar = 'loaded' | 'played' | 'hover' export interface Events { + 'document:click': [event: Event] + 'document:mouseup': [event: Event] + 'document:keydown': [event: Event] + 'document:touchend': [event: Event] + 'document:touchmove': [event: Event] + 'document:mousemove': [event: Event] + 'document:pointerup': [event: Event] + 'document:contextmenu': [event: Event] + 'document:pointermove': [event: Event] + 'document:visibilitychange': [event: Event] + 'document:webkitfullscreenchange': [event: Event] + + 'window:resize': [event: Event] + 'window:scroll': [event: Event] + 'window:orientationchange': [event: Event] + 'video:canplay': [event: Event] 'video:canplaythrough': [event: Event] 'video:complete': [event: Event] 'video:durationchange': [event: Event] 'video:emptied': [event: Event] 'video:ended': [event: Event] - 'video:error': [event: Error] + 'video:error': [error: Error] 'video:loadeddata': [event: Event] 'video:loadedmetadata': [event: Event] 'video:pause': [event: Event] @@ -25,8 +41,7 @@ export interface Events { 'video:timeupdate': [event: Event] 'video:volumechange': [event: Event] 'video:waiting': [event: Event] - 'document:mousemove': [event: Event] - 'document:mouseup': [event: Event] + 'info': [state: boolean] 'layer': [state: boolean] 'loading': [state: boolean] @@ -36,17 +51,21 @@ export interface Events { 'control': [state: boolean] 'setting': [state: boolean] 'hotkey': [event: Event] + 'destroy': [] + 'subtitleOffset': [offset: number] 'subtitleBeforeUpdate': [cue: VTTCue] 'subtitleAfterUpdate': [cue: VTTCue] 'subtitleLoad': [cues: VTTCue[], option: Subtitle] + 'focus': [event: Event] 'blur': [event: Event] 'dblclick': [event: Event] 'click': [event: Event] 'hover': [state: boolean, event: Event] 'mousemove': [event: Event] + 'resize': [] 'view': [state: boolean] 'lock': [state: boolean] @@ -54,6 +73,7 @@ export interface Events { 'autoHeight': [height: number] 'autoSize': [] 'ready': [] + 'error': [error: Error, reconnectTime: number] 'flip': [flip: Flip] 'fullscreen': [state: boolean] @@ -67,6 +87,6 @@ export interface Events { 'seek': [currentTime: number] 'restart': [url: string] 'muted': [state: boolean] - 'setBar': [type: Bar, percentage: number, event?: Event] + 'setBar': [type: Bar, percentage: number, event?: Event | undefined] 'keydown': [event: KeyboardEvent] } diff --git a/packages/artplayer/types/option.d.ts b/packages/artplayer/types/option.d.ts index 464cddc61..05bbbbecb 100644 --- a/packages/artplayer/types/option.d.ts +++ b/packages/artplayer/types/option.d.ts @@ -7,7 +7,14 @@ import type { Quality } from './quality' import type { Setting } from './setting' import type { Subtitle } from './subtitle' -export type CustomType = 'flv' | 'm3u8' | 'hls' | 'ts' | 'mpd' | 'torrent' | (string & Record) +export type CustomType + = | 'flv' + | 'm3u8' + | 'hls' + | 'ts' + | 'mpd' + | 'torrent' + | (string & Record) export interface Thumbnails { /** @@ -281,7 +288,9 @@ export interface Option { * Other video attribute */ moreVideoAttr?: Partial<{ - [key in keyof HTMLVideoElement as HTMLVideoElement[key] extends (...args: any[]) => any ? never : key]: HTMLVideoElement[key]; + [key in keyof HTMLVideoElement as HTMLVideoElement[key] extends (...args: unknown[]) => unknown + ? never + : key]: HTMLVideoElement[key] }> /** @@ -293,7 +302,7 @@ export interface Option { * Custom default icons */ icons?: { - [key in keyof Icons]?: HTMLElement | string; + [key in keyof Icons]?: HTMLElement | string } /** @@ -305,6 +314,9 @@ export interface Option { * Custom video type function */ customType?: Partial< - Record any> + Record< + CustomType, + (this: Artplayer, video: HTMLVideoElement, url: string, art: Artplayer) => unknown > + > } diff --git a/packages/artplayer/types/player.d.ts b/packages/artplayer/types/player.d.ts index b741282e2..c6a17c797 100644 --- a/packages/artplayer/types/player.d.ts +++ b/packages/artplayer/types/player.d.ts @@ -10,31 +10,44 @@ export type State = 'standard' | 'mini' | 'pip' | 'fullscreen' | 'fullscreenWeb' export declare class Player { get aspectRatio(): AspectRatio set aspectRatio(ratio: AspectRatio) + get state(): State set state(state: State) + get type(): CustomType set type(name: CustomType) + get playbackRate(): PlaybackRate set playbackRate(rate: PlaybackRate) + get currentTime(): number set currentTime(time: number) + get duration(): number get played(): number get playing(): boolean + get flip(): Flip set flip(state: Flip) + get fullscreen(): boolean set fullscreen(state: boolean) + get fullscreenWeb(): boolean set fullscreenWeb(state: boolean) + get loaded(): number get loadedTime(): number + get mini(): boolean set mini(state: boolean) + get pip(): boolean set pip(state: boolean) + get poster(): string set poster(url: string) + get rect(): DOMRect get bottom(): number get height(): number @@ -44,40 +57,57 @@ export declare class Player { get width(): number get x(): number get y(): number + set seek(time: number) get seek(): number + set forward(time: number) get forward(): number + set backward(time: number) get backward(): number + get url(): string set url(url: string) + get volume(): number set volume(percentage: number) + get muted(): boolean set muted(state: boolean) + get title(): string set title(title: string) + get theme(): string set theme(theme: string) + get subtitleOffset(): number set subtitleOffset(time: number) - set switch(url: string) + get switch(): string - set quality(quality: Quality[]) + set switch(url: string) + get quality(): Quality[] + set quality(quality: Quality[]) + get thumbnails(): Thumbnails set thumbnails(thumbnails: Thumbnails) + pause(): void play(): Promise toggle(): void - attr(key: string, value?: any): unknown + + attr(key: string, value?: unknown): unknown cssVar(key: T, value?: CssVar[T]): CssVar[T] + switchUrl(url: string): Promise switchQuality(url: string): Promise + getDataURL(): Promise getBlobUrl(): Promise screenshot(name?: string): Promise + airplay(): void autoSize(): void autoHeight(): void diff --git a/packages/artplayer/types/setting.d.ts b/packages/artplayer/types/setting.d.ts index af2c45211..0ee4054a0 100644 --- a/packages/artplayer/types/setting.d.ts +++ b/packages/artplayer/types/setting.d.ts @@ -13,7 +13,7 @@ type Props = { $parent: Setting $parents: Setting[] $option: Setting[] - $events: Array<(...args: any[]) => any> + $events: Array<(...args: unknown[]) => unknown> $formatted: boolean } & Omit @@ -90,5 +90,5 @@ export interface Setting { */ onClick?: (this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event) => void - [key: string]: any + [key: string]: unknown } diff --git a/packages/artplayer/types/utils.d.ts b/packages/artplayer/types/utils.d.ts index 10861d8b8..1ae7950e0 100644 --- a/packages/artplayer/types/utils.d.ts +++ b/packages/artplayer/types/utils.d.ts @@ -4,51 +4,58 @@ export interface Utils { isSafari: boolean isIOS: boolean isIOS13: boolean + query: (selector: string, parent?: HTMLElement) => HTMLElement queryAll: (selector: string, parent?: HTMLElement) => HTMLElement[] addClass: (target: HTMLElement, className: string) => void removeClass: (target: HTMLElement, className: string) => void hasClass: (target: HTMLElement, className: string) => boolean - append: (target: HTMLElement, className: HTMLElement) => HTMLElement + append: (target: HTMLElement, child: HTMLElement) => HTMLElement remove: (target: HTMLElement) => void + replaceElement: (newChild: HTMLElement, oldChild: HTMLElement) => HTMLElement + siblings: (target: HTMLElement) => HTMLElement[] + inverseClass: (target: HTMLElement, className: string) => void + createElement: (tag: K) => HTMLElementTagNameMap[K] setStyle: ( element: HTMLElement, key: T, value: CSSStyleDeclaration[T], ) => HTMLElement setStyles: (element: HTMLElement, styles: Partial) => HTMLElement - getStyle: ( + getStyle: ( element: HTMLElement, key: K, - numberType?: T, - ) => T extends true ? number : string - siblings: (target: HTMLElement) => HTMLElement[] - inverseClass: (target: HTMLElement, className: string) => void + numberType?: boolean, + ) => boolean extends true ? number : string + setStyleText: (element: HTMLElement, text: string) => void + getRect: (el: HTMLElement) => { top: number, left: number, width: number, height: number } tooltip: (target: HTMLElement, msg: string, pos?: string) => void isInViewport: (target: HTMLElement, offset?: number) => boolean includeFromEvent: (event: Event, target: HTMLElement) => boolean - replaceElement: (newChild: HTMLElement, oldChild: HTMLElement) => HTMLElement - createElement: (tag: keyof HTMLElementTagNameMap) => HTMLElement - errorHandle: (condition: T, msg: string) => T extends true ? T : never + srtToVtt: (srtText: string) => string vttToBlob: (vttText: string) => string assToVtt: (assText: string) => string + getExt: (url: string) => string download: (url: string, name: string) => void - def: (obj: object, name: string, value: any) => void - has: (obj: object, name: string) => boolean - get: (obj: object, name: string) => PropertyDescriptor - mergeDeep: (...args: T[]) => T - sleep: (ms: number) => Promise - debounce: (func: (...arg: any[]) => any, wait: number, context?: object) => (...arg: any[]) => any - throttle: (func: (...arg: any[]) => any, wait: number) => (...arg: any[]) => any + loadImg: (url: string, scale?: number) => Promise + + errorHandle: (condition: T, msg: string) => T extends true ? T : never + def: (obj: object, name: string, value: unknown) => void + has: (obj: object, name: PropertyKey) => boolean + get: (obj: object, name: PropertyKey) => PropertyDescriptor | undefined + mergeDeep: (...args: T) => T[number] + + sleep: (ms: number) => Promise + debounce: any>(func: F, wait: number, context?: object) => (...args: Parameters) => ReturnType + throttle: any>(func: F, wait: number) => (...args: Parameters) => ReturnType + clamp: (num: number, a: number, b: number) => number secondToTime: (second: number) => string escape: (str: string) => string capitalize: (str: string) => string + getIcon: (key: string, html: string | HTMLElement) => HTMLElement supportsFlex: () => boolean - setStyleText: (element: HTMLElement, text: string) => void - getRect: (el: HTMLElement) => { top: number, left: number, width: number, height: number } - loadImg: (url: string, scale?: number) => Promise } diff --git a/test/types.plugin.test.ts b/test/types.plugin.test.ts index dd934c0fb..3a6300b6b 100644 --- a/test/types.plugin.test.ts +++ b/test/types.plugin.test.ts @@ -18,3 +18,7 @@ art.plugins.add( margin: [0, '10%'], }), ) + +art.on('artplayerPluginDanmuku:load', () => { + // +})