diff --git a/packages/artplayer-vitepress/docs/advanced/built-in.md b/packages/artplayer-vitepress/docs/advanced/built-in.md index 9da74b551..fc67c7576 100644 --- a/packages/artplayer-vitepress/docs/advanced/built-in.md +++ b/packages/artplayer-vitepress/docs/advanced/built-in.md @@ -335,6 +335,30 @@ art.on('ready', () => { }); ``` +## `info` + +管理播放器的信息面板,常用于查看当前播放器和视频的运行状态,例如版本号、分辨率、时长等。 + +- 通过 `art.info.show` 控制面板的显示与隐藏 +- 触发的事件名为 `info`(详见事件文档) + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.info.show = true; + + setTimeout(() => { + art.info.show = false; + }, 3000); +}); +``` + ## `loading` 管理播放器的加载层 diff --git a/packages/artplayer-vitepress/docs/advanced/global.md b/packages/artplayer-vitepress/docs/advanced/global.md index 6780177ac..a12710f9a 100644 --- a/packages/artplayer-vitepress/docs/advanced/global.md +++ b/packages/artplayer-vitepress/docs/advanced/global.md @@ -546,4 +546,24 @@ var art = new Artplayer({ url: '/assets/sample/video.mp4', miniProgressBar: true, }); -``` \ No newline at end of file +``` + +## REMOVE_SRC_WHEN_DESTROY + +在销毁播放器时,是否同时移除视频的 `src` 属性并调用 `load()` 以主动释放媒体资源,默认为 `true`。 + +开启后可以在单页应用或频繁创建/销毁播放器的场景下,减少视频资源占用;如果你希望保留 video 元素的状态,仅移除界面,可将其设置为 `false`。 + +
▶ Run Code
+ +```js +Artplayer.REMOVE_SRC_WHEN_DESTROY = false; + +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +// 只销毁界面,不主动清空 src +art.destroy(); +``` diff --git a/packages/artplayer-vitepress/docs/advanced/property.md b/packages/artplayer-vitepress/docs/advanced/property.md index 413daed07..730cceb59 100644 --- a/packages/artplayer-vitepress/docs/advanced/property.md +++ b/packages/artplayer-vitepress/docs/advanced/property.md @@ -90,6 +90,28 @@ art.on('ready', () => { }); ``` +## `reset` + +- Type: `Function` + +重置播放器的视频元素:会移除当前 `src` 并调用一次 `load()`,常用于在单页应用中手动释放媒体资源或重新初始化视频标签。 + +> 注意:全局配置 `Artplayer.REMOVE_SRC_WHEN_DESTROY` 也会在调用 `destroy()` 时自动执行类似逻辑。 + +
▶ Run Code
+ +```js{9} +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + // 仅重置 video,不移除界面 + art.reset(); +}); +``` + ## `seek` - Type: `Setter` @@ -550,6 +572,27 @@ art.on('ready', () => { }); ``` +## `state` + +- Type: `Setter/Getter` +- Parameter: `String` + +获取或设置播放器当前状态,支持:`standard`(正常)、`mini`(迷你窗)、`pip`(画中画)、`fullscreen`(窗口全屏)、`fullscreenWeb`(网页全屏)。 + +
▶ Run Code
+ +```js{8} +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(art.state); // 默认 standard + art.state = 'mini'; +}); +``` + ## `autoSize` - Type: `Function` @@ -594,6 +637,28 @@ art.on('ready', () => { ::: +## `bottom` / `top` / `left` / `right` / `x` / `y` / `width` / `height` + +- Type: `Getter` + +这些属性是对 `rect` 的快捷访问: + +- `bottom`, `top`, `left`, `right`, `x`, `y`:对应 `DOMRect` 的同名字段 +- `width`, `height`:播放器当前可见宽高 + +
▶ Run Code
+ +```js{7} +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(art.width, art.height, art.left, art.top); +}); +``` + ## `flip` - Type: `Setter/Getter` @@ -798,6 +863,25 @@ art.on('video:timeupdate', () => { }); ``` +## `loadedTime` + +- Type: `Getter` + +已缓存的媒体时长,单位为秒。通常与 `loaded` 一起使用,用于展示缓冲进度细节。 + +
▶ Run Code
+ +```js{7} +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('video:timeupdate', () => { + console.info(art.loadedTime); +}); +``` + ## `played` - Type: `Getter` diff --git a/packages/artplayer-vitepress/docs/start/option.md b/packages/artplayer-vitepress/docs/start/option.md index 22a1e1d59..8be159da6 100644 --- a/packages/artplayer-vitepress/docs/start/option.md +++ b/packages/artplayer-vitepress/docs/start/option.md @@ -463,6 +463,23 @@ var art = new Artplayer({ }); ``` +## `backdrop` + +- Type: `Boolean` +- Default: `true` + +是否开启播放器 UI 的背景虚化效果。开启后,设置面板、右键菜单、音量条等浮层会应用 `backdrop-filter` 毛玻璃效果,看起来更通透,但在部分低性能设备或老旧浏览器上可能会有性能或兼容性问题。 + +
▶ Run Code
+ +```js{4} +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + backdrop: false, // 关闭毛玻璃效果 +}); +``` + ## `fullscreen` - Type: `Boolean` @@ -696,7 +713,7 @@ var art = new Artplayer({ :::warning `组件配置` 请参考以下地址: -[/component/contextmenu.html](/component/contextmenu.html)- Type: +[/component/contextmenu.html](/component/contextmenu.html) ::: @@ -914,7 +931,7 @@ var art = new Artplayer({ ## `moreVideoAttr` - Type: `Object` -- Default: `{'controls': false,'preload': 'metadata'}` +- Default: `{'controls': false, 'preload': 'metadata'}`(Safari 中会自动调整为 `preload: 'auto'` 以提升加载体验) 更多视频属性,这些属性将直接写入视频元素里 @@ -1213,7 +1230,7 @@ var art = new Artplayer({ :::warning cssVar 写法参考 -[artplayer/types/cssVar.d.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/cssVar.d.ts) +[artplayer/types/cssVar.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/cssVar.d.ts) :::