mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 10:56:15 -08:00
Update HLS, FLV, and DASH player configurations
Update progress bar height in Artplayer Add dynamic layer, controller, menu, and setting item management Update Changelog_CN Update utils.js Update package.json Update built-in management in Artplayer Update i18n documentation Add support for new languages Update language import and modification
This commit is contained in:
Harvey Zack committed
1 parent
73fb04737a
commit
bbbeca6e4c
21 files changed
+931
-327
No files matched your search
@@ -1,3 +1,4 @@
|
||||
.env
|
||||
.vscode
|
||||
.DS_Store
|
||||
.parcel-cache
|
||||
|
||||
@@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
- 字幕轨添加 `label` 属性，用于在移动设备上显示字幕名字
|
||||
- 添加 `unescape`, `isBrowser`, `setStyleText` 工具函数
|
||||
- 添加 `artplayerPluginMultipleSubtitles` 插件，用于显示合并后的字幕文件: [demo](https://www.artplayer.org/?libs=./uncompiled/artplayer-plugin-multiple-subtitles/index.js&example=multiple.subtitles)
|
||||
- 修改迷你进度条的显示方式
|
||||
|
||||
## [5.0.9] - 2023-5-14
|
||||
|
||||
|
||||
@@ -242,7 +242,7 @@ class Artplayer extends (0, _emitterDefault.default) {
|
||||
return "development";
|
||||
}
|
||||
static get build() {
|
||||
return "2023-11-25 21:12:44";
|
||||
return "2023-11-26 09:39:20";
|
||||
}
|
||||
static get config() {
|
||||
return 0, _configDefault.default;
|
||||
@@ -408,7 +408,7 @@ if (_utils.isBrowser) {
|
||||
}
|
||||
|
||||
},{"bundle-text:./style/index.less":"doPnH","option-validator":"2tbdu","./utils/emitter":"8uSwy","./utils":"euhMG","./scheme":"jVxq1","./config":"1hSww","./template":"eG0JW","./i18n":"6Q0In","./player":"kmRM5","./control":"nK2ZQ","./contextmenu":"iygWX","./info":"6tuCt","./subtitle":"1kFyE","./events":"akAUN","./hotkey":"f1oWx","./layer":"bKuSu","./loading":"4AfId","./notice":"aKncc","./mask":"1R5LH","./icons":"bPpva","./setting":"i2oRN","./storage":"9ruid","./plugins":"7Fd4c","@parcel/transformer-js/src/esmodule-helpers.js":"6SDkN"}],"doPnH":[function(require,module,exports) {
|
||||
module.exports = ".art-video-player {\n --art-theme: red;\n --art-font-color: #fff;\n --art-background-color: #000;\n --art-text-shadow-color: #00000080;\n --art-transition-duration: .2s;\n --art-padding: 10px;\n --art-border-radius: 3px;\n --art-progress-height: 6px;\n --art-progress-color: #fff3;\n --art-hover-color: #fff3;\n --art-loaded-color: #fff3;\n --art-state-size: 80px;\n --art-state-opacity: .8;\n --art-bottom-height: 100px;\n --art-bottom-offset: 20px;\n --art-bottom-gap: 5px;\n --art-highlight-width: 8px;\n --art-highlight-color: #ffffff80;\n --art-control-height: 46px;\n --art-control-opacity: .75;\n --art-control-icon-size: 36px;\n --art-control-icon-scale: 1.1;\n --art-volume-height: 120px;\n --art-volume-handle-size: 14px;\n --art-lock-size: 36px;\n --art-indicator-scale: 0;\n --art-indicator-size: 16px;\n --art-fullscreen-web-index: 9999;\n --art-settings-icon-size: 24px;\n --art-settings-max-height: 300px;\n --art-selector-max-height: 300px;\n --art-contextmenus-min-width: 250px;\n --art-subtitle-font-size: 20px;\n --art-subtitle-gap: 5px;\n --art-subtitle-bottom: 15px;\n --art-subtitle-border: #000;\n --art-widget-background: #000000d9;\n --art-tip-background: #00000080;\n --art-scrollbar-size: 4px;\n --art-scrollbar-background: #ffffff40;\n --art-scrollbar-background-hover: #ffffff80;\n --art-mini-progress-height: 2px;\n}\n\n.art-bg-cover {\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.art-bottom-gradient {\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n}\n\n.art-backdrop-filter {\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.art-video-player {\n zoom: 1;\n text-align: left;\n direction: ltr;\n user-select: none;\n box-sizing: border-box;\n color: var(--art-font-color);\n background-color: var(--art-background-color);\n text-shadow: 0 0 2px var(--art-text-shadow-color);\n -webkit-tap-highlight-color: #0000;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n outline: 0;\n width: 100%;\n height: 100%;\n margin: 0 auto;\n padding: 0;\n font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n box-sizing: border-box;\n}\n\n.art-video-player ::-webkit-scrollbar {\n width: var(--art-scrollbar-size);\n height: var(--art-scrollbar-size);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: var(--art-scrollbar-background);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: var(--art-scrollbar-background-hover);\n}\n\n.art-video-player img {\n vertical-align: top;\n max-width: 100%;\n}\n\n.art-video-player svg {\n fill: var(--art-font-color);\n}\n\n.art-video-player a {\n color: var(--art-font-color);\n text-decoration: none;\n}\n\n.art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1;\n display: flex;\n}\n\n.art-video-player.art-backdrop .art-contextmenus, .art-video-player.art-backdrop .art-info, .art-video-player.art-backdrop .art-settings, .art-video-player.art-backdrop .art-layer-auto-playback, .art-video-player.art-backdrop .art-selector-list, .art-video-player.art-backdrop .art-volume-inner {\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-video {\n z-index: 10;\n cursor: pointer;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-poster {\n z-index: 11;\n pointer-events: none;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-subtitle {\n z-index: 20;\n text-align: center;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n gap: var(--art-subtitle-gap);\n bottom: var(--art-subtitle-bottom);\n font-size: var(--art-subtitle-font-size);\n transition: bottom var(--art-transition-duration) ease;\n text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) -1px 0 1px, var(--art-subtitle-border) 0 -1px 1px, var(--art-subtitle-border) 1px 1px 1px, var(--art-subtitle-border) -1px -1px 1px, var(--art-subtitle-border) 1px -1px 1px, var(--art-subtitle-border) -1px 1px 1px;\n flex-direction: column;\n width: 100%;\n padding: 0 5%;\n display: none;\n position: absolute;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: flex;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n bottom: calc(var(--art-control-height) + vLine truncated
|
||||
module.exports = ".art-video-player {\n --art-theme: red;\n --art-font-color: #fff;\n --art-background-color: #000;\n --art-text-shadow-color: #00000080;\n --art-transition-duration: .2s;\n --art-padding: 10px;\n --art-border-radius: 3px;\n --art-progress-height: 6px;\n --art-progress-color: #fff3;\n --art-hover-color: #fff3;\n --art-loaded-color: #fff3;\n --art-state-size: 80px;\n --art-state-opacity: .8;\n --art-bottom-height: 100px;\n --art-bottom-offset: 20px;\n --art-bottom-gap: 5px;\n --art-highlight-width: 8px;\n --art-highlight-color: #ffffff80;\n --art-control-height: 46px;\n --art-control-opacity: .75;\n --art-control-icon-size: 36px;\n --art-control-icon-scale: 1.1;\n --art-volume-height: 120px;\n --art-volume-handle-size: 14px;\n --art-lock-size: 36px;\n --art-indicator-scale: 0;\n --art-indicator-size: 16px;\n --art-fullscreen-web-index: 9999;\n --art-settings-icon-size: 24px;\n --art-settings-max-height: 300px;\n --art-selector-max-height: 300px;\n --art-contextmenus-min-width: 250px;\n --art-subtitle-font-size: 20px;\n --art-subtitle-gap: 5px;\n --art-subtitle-bottom: 15px;\n --art-subtitle-border: #000;\n --art-widget-background: #000000d9;\n --art-tip-background: #00000080;\n --art-scrollbar-size: 4px;\n --art-scrollbar-background: #ffffff40;\n --art-scrollbar-background-hover: #ffffff80;\n --art-mini-progress-height: 2px;\n}\n\n.art-bg-cover {\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.art-bottom-gradient {\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n}\n\n.art-backdrop-filter {\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.art-video-player {\n zoom: 1;\n text-align: left;\n direction: ltr;\n user-select: none;\n box-sizing: border-box;\n color: var(--art-font-color);\n background-color: var(--art-background-color);\n text-shadow: 0 0 2px var(--art-text-shadow-color);\n -webkit-tap-highlight-color: #0000;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n outline: 0;\n width: 100%;\n height: 100%;\n margin: 0 auto;\n padding: 0;\n font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n box-sizing: border-box;\n}\n\n.art-video-player ::-webkit-scrollbar {\n width: var(--art-scrollbar-size);\n height: var(--art-scrollbar-size);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: var(--art-scrollbar-background);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: var(--art-scrollbar-background-hover);\n}\n\n.art-video-player img {\n vertical-align: top;\n max-width: 100%;\n}\n\n.art-video-player svg {\n fill: var(--art-font-color);\n}\n\n.art-video-player a {\n color: var(--art-font-color);\n text-decoration: none;\n}\n\n.art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1;\n display: flex;\n}\n\n.art-video-player.art-backdrop .art-contextmenus, .art-video-player.art-backdrop .art-info, .art-video-player.art-backdrop .art-settings, .art-video-player.art-backdrop .art-layer-auto-playback, .art-video-player.art-backdrop .art-selector-list, .art-video-player.art-backdrop .art-volume-inner {\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-video {\n z-index: 10;\n cursor: pointer;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-poster {\n z-index: 11;\n pointer-events: none;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-subtitle {\n z-index: 20;\n text-align: center;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n gap: var(--art-subtitle-gap);\n bottom: var(--art-subtitle-bottom);\n font-size: var(--art-subtitle-font-size);\n transition: bottom var(--art-transition-duration) ease;\n text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) -1px 0 1px, var(--art-subtitle-border) 0 -1px 1px, var(--art-subtitle-border) 1px 1px 1px, var(--art-subtitle-border) -1px -1px 1px, var(--art-subtitle-border) 1px -1px 1px, var(--art-subtitle-border) -1px 1px 1px;\n flex-direction: column;\n width: 100%;\n padding: 0 5%;\n display: none;\n position: absolute;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: flex;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n bottom: calc(var(--art-control-height) + vLine truncated
|
||||
|
||||
},{}],"2tbdu":[function(require,module,exports) {
|
||||
!function(r, t) {
|
||||
|
||||
+3
-1
@@ -9,7 +9,7 @@
|
||||
"lint": "npx eslint packages/*/src",
|
||||
"build:sw": "node ./scripts/build-sw.js",
|
||||
"build:ts": "node ./scripts/build-ts.js",
|
||||
"build:docs": "node ./scripts/build-docs.js",
|
||||
"build:docs": "node ./scripts/build-docs.js && node ./scripts/trans-docs.js",
|
||||
"build:i18n": "node ./scripts/build-i18n.js",
|
||||
"dev": "npx cross-env NODE_ENV=development node ./scripts/dev.js",
|
||||
"build": "npx cross-env NODE_ENV=production node ./scripts/build.js",
|
||||
@@ -40,9 +40,11 @@
|
||||
"@parcel/reporter-cli": "2.8.3",
|
||||
"@parcel/transformer-inline-string": "2.8.3",
|
||||
"@parcel/transformer-less": "2.8.3",
|
||||
"axios": "^1.6.2",
|
||||
"cpy": "^10.1.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"cross-spawn": "^7.0.3",
|
||||
"dotenv": "^16.3.1",
|
||||
"eslint": "^8.48.0",
|
||||
"glob": "^10.3.3",
|
||||
"lerna": "^6.6.2",
|
||||
|
||||
@@ -211,8 +211,10 @@ art.on('ready', () => {
|
||||
管理播放器的层
|
||||
|
||||
- `add` 方法用于动态添加层
|
||||
- `remove` 方法用于动态删除层
|
||||
- `update` 方法用于动态更新层
|
||||
- `show` 属性用于设置是否显示全部层
|
||||
- `toggle` 属性用于切换是否显示全部层
|
||||
- `toggle` 方法用于切换是否显示全部层
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -244,8 +246,10 @@ art.on('ready', () => {
|
||||
管理播放器的控制器
|
||||
|
||||
- `add` 方法用于动态添加控制器
|
||||
- `remove` 方法用于动态删除控制器
|
||||
- `update` 方法用于动态更新控制器
|
||||
- `show` 属性用于设置是否显示全部控制器
|
||||
- `toggle` 属性用于切换是否显示全部控制器
|
||||
- `toggle` 方法用于切换是否显示全部控制器
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -278,8 +282,10 @@ art.on('ready', () => {
|
||||
管理播放器的右键菜单
|
||||
|
||||
- `add` 方法用于动态添加菜单
|
||||
- `remove` 方法用于动态删除菜单
|
||||
- `update` 方法用于动态更新菜单
|
||||
- `show` 属性用于设置是否显示全部菜单
|
||||
- `toggle` 属性用于切换是否显示全部菜单
|
||||
- `toggle` 方法用于切换是否显示全部菜单
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -415,9 +421,10 @@ art.on('ready', () => {
|
||||
管理播放器的设置面板
|
||||
|
||||
- `add` 方法用于动态添加设置项
|
||||
- `remove` 方法用于动态删除设置项
|
||||
- `update` 方法用于动态更新设置项
|
||||
- `show` 属性用于设置是否显示全部设置项
|
||||
- `toggle` 属性用于切换是否显示全部设置项
|
||||
- `update` 方法动态更新设置项
|
||||
- `toggle` 方法用于切换是否显示全部设置项
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
|
||||
@@ -2,12 +2,6 @@
|
||||
|
||||
这里的 `静态属性` 是指挂载在 `构造函数` 的 `一级属性`，非常少使用
|
||||
|
||||
:::warning 提示
|
||||
|
||||
有些属性是全大写的，说明这些属性是不稳定的，可能会在将来被更改
|
||||
|
||||
:::
|
||||
|
||||
## `instances`
|
||||
|
||||
返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性
|
||||
@@ -139,4 +133,4 @@ console.info(Artplayer.html);
|
||||
|
||||
```js
|
||||
console.info(Artplayer.option);
|
||||
```
|
||||
```
|
||||
@@ -1,12 +1,12 @@
|
||||
# Instance Property
|
||||
# 实例属性
|
||||
|
||||
The `Instance Property` here refers to the `Primary Property` attached to the `Instance`, which is more commonly used
|
||||
这里的 `实例属性` 是指挂载在 `实例` 的 `一级属性`，比较常用
|
||||
|
||||
## `play`
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Play video
|
||||
播放视频
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -26,7 +26,7 @@ art.on('ready', () => {
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Pause video
|
||||
暂停视频
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -50,7 +50,7 @@ art.on('ready', () => {
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Toggle video playback and pause
|
||||
切换视频的播放和暂停
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -75,7 +75,7 @@ art.on('ready', () => {
|
||||
- Type: `Function`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
To destroy the player, accept a parameter indicating whether to remove the player's html after destruction. The default value is `true`
|
||||
销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 `html`，默认为 `true`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -95,7 +95,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter`
|
||||
- Parameter: `Number`
|
||||
|
||||
Video time jump in seconds
|
||||
视频时间跳转，单位秒
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -115,7 +115,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter`
|
||||
- Parameter: `Number`
|
||||
|
||||
Video time fast forward in seconds
|
||||
视频时间快进，单位秒
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -135,7 +135,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter`
|
||||
- Parameter: `Number`
|
||||
|
||||
Video time rewind in seconds
|
||||
视频时间快退，单位秒
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -159,7 +159,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Number`
|
||||
|
||||
Set and get video volume, range: `[0, 1]`
|
||||
设置和获取视频音量，范围在：`[0, 1]`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -181,7 +181,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Set and get video url
|
||||
设置和获取视频地址
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -201,7 +201,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter`
|
||||
- Parameter: `String`
|
||||
|
||||
Setting the video url is similar to that of `art.url`, but some optimization operations will be performed
|
||||
设置视频地址，设置时和 `art.url` 类似，但会执行一些优化操作
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -224,7 +224,7 @@ art.on('ready', () => {
|
||||
- Type: `Function`
|
||||
- Parameter: `String`
|
||||
|
||||
Setting the video url is similar to that of `art.url`, but some optimization operations will be performed
|
||||
设置视频地址，设置时和 `art.url` 类似，但会执行一些优化操作
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -242,9 +242,9 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
The functions of `art.switch` and `art.switchUrl` are the same, except that the `art.switchUrl` method will return `Promise`, when `resolve` means that the new address can be played, and `reject` means that the new address is loaded error
|
||||
`art.switch` 和 `art.switchUrl` 的功能是一样的，只是 `art.switchUrl` 方法会返回 `Promise`，当 `resolve` 时表示新地址是可以播放，`reject` 时表示新地址加载错误
|
||||
|
||||
:::
|
||||
|
||||
@@ -253,7 +253,7 @@ The functions of `art.switch` and `art.switchUrl` are the same, except that the
|
||||
- Type: `Function`
|
||||
- Parameter: `String`
|
||||
|
||||
Set the video quality address, similar to `art.switchUrl`, but with the previous playback progress
|
||||
设置视频画质地址，和 `art.switchUrl` 类似，但会带上之前的播放进度
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -276,7 +276,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Set and get whether the video is muted
|
||||
设置和获取视频是否静音
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -298,7 +298,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Number`
|
||||
|
||||
Set and get the current time of the video. Setting the time is similar to `seek`, but it will not trigger additional events
|
||||
设置和获取视频当前时间，设置时间时和 `seek` 类似，但它不会触发额外的事件
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -319,7 +319,7 @@ art.on('ready', () => {
|
||||
|
||||
- Type: `Getter`
|
||||
|
||||
Get video duration
|
||||
获取视频时长
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -334,9 +334,9 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
Some videos have no duration, such as live videos or videos that have not been decoded. The duration obtained at this time will be `0`
|
||||
有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 `0`
|
||||
|
||||
:::
|
||||
|
||||
@@ -344,7 +344,7 @@ Some videos have no duration, such as live videos or videos that have not been d
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Download a screenshot of the current video frame
|
||||
下载当前视频帧的截图
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -363,7 +363,7 @@ art.on('ready', () => {
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Get the `base64` address of the screenshot of the current video frame, and return a `Promise`
|
||||
获取当前视频帧的截图的`base64`地址，返回的是一个 `Promise`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -383,7 +383,7 @@ art.on('ready', async () => {
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Get the `blob` address of the screenshot of the current video frame, and return a `Promise`
|
||||
获取当前视频帧的截图的`blob`地址，返回的是一个 `Promise`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -404,7 +404,7 @@ art.on('ready', async () => {
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Set and get full screen of player window
|
||||
设置和获取播放器窗口全屏
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -424,9 +424,9 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
Due to the browser security mechanism, the page must have interaction before triggering the full screen of the window (for example, the user has clicked on the page)
|
||||
由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）
|
||||
|
||||
:::
|
||||
|
||||
@@ -435,7 +435,7 @@ Due to the browser security mechanism, the page must have interaction before tri
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Set and get full screen of player web page
|
||||
设置和获取播放器网页全屏
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -460,7 +460,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Set and get the picture-in-picture mode of the player
|
||||
设置和获取播放器画中画模式
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -480,9 +480,9 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
Due to the browser security mechanism, before triggering picture-in-picture, the page must have interaction (for example, the user has clicked on the page)
|
||||
由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）
|
||||
|
||||
:::
|
||||
|
||||
@@ -491,7 +491,7 @@ Due to the browser security mechanism, before triggering picture-in-picture, the
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Set and obtain video posters. You can only see the poster effect before the video is played
|
||||
设置和获取视频海报，只有在视频播放前才能看到海报效果
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -514,7 +514,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Set and get player mini mode
|
||||
设置和获取播放器迷你模式
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -534,7 +534,7 @@ art.on('ready', () => {
|
||||
- Type: `Getter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
Get whether the video is playing
|
||||
获取视频是否正在播放中
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -552,10 +552,9 @@ art.on('ready', () => {
|
||||
|
||||
## `autoSize`
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
- Type: `Function`
|
||||
|
||||
Set whether the video is adaptive size. After setting it to `true`, it will only be executed once
|
||||
设置视频是否自适应尺寸
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -574,7 +573,7 @@ art.on('ready', () => {
|
||||
|
||||
- Type: `Getter`
|
||||
|
||||
Get the size and coordinate information of the player
|
||||
获取播放器的尺寸和坐标信息
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -589,9 +588,9 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
Dimension and coordinate information are obtained through `getBoundingClientRect`
|
||||
尺寸和坐标信息是通过 `getBoundingClientRect` 获取的
|
||||
|
||||
:::
|
||||
|
||||
@@ -600,7 +599,7 @@ Dimension and coordinate information are obtained through `getBoundingClientRect
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Set and get player rollover, support `normal`, `horizontal`, `vertical`
|
||||
设置和获取播放器翻转，支持`normal`, `horizontal`, `vertical`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -622,7 +621,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Number`
|
||||
|
||||
Set and get player playback speed
|
||||
设置和获取播放器播放速度
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -644,7 +643,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Set and obtain the player aspect ratio
|
||||
设置和获取播放器长宽比
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -663,10 +662,9 @@ art.on('ready', () => {
|
||||
|
||||
## `autoHeight`
|
||||
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `Boolean`
|
||||
- Type: `Function`
|
||||
|
||||
When the container has only width, this attribute can automatically calculate and set the height of the video. After it is set to `true`, it will only be executed once
|
||||
当容器只有宽度，该属性可以自动计算出并设置视频的高度
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -687,7 +685,7 @@ art.on('resize', () => {
|
||||
|
||||
:::warning 提示
|
||||
|
||||
This attribute is useful when your container has only width but does not know the specific height. It can automatically calculate the height of the video, but you need to determine the time to set this attribute
|
||||
当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机
|
||||
|
||||
:::
|
||||
|
||||
@@ -696,7 +694,7 @@ This attribute is useful when your container has only width but does not know th
|
||||
- Type: `Function`
|
||||
- Parameter: `String`
|
||||
|
||||
Get and set the attributes of the video element dynamically
|
||||
动态获取和设置 video 元素的属性
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -718,7 +716,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Get and set video types dynamically
|
||||
动态获取和设置视频类型
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -740,7 +738,7 @@ art.on('ready', () => {
|
||||
- Type: `Setter/Getter`
|
||||
- Parameter: `String`
|
||||
|
||||
Get and set player theme color dynamically
|
||||
动态获取和设置播放器主题颜色
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -761,7 +759,7 @@ art.on('ready', () => {
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Enable airplay
|
||||
开启隔空播放
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -785,7 +783,7 @@ var art = new Artplayer({
|
||||
|
||||
- Type: `Getter`
|
||||
|
||||
The proportion of video cache, with the range of `[0, 1]`, is often used in conjunction with the `video:timeupdate` event
|
||||
视频缓存的比例，范围是 `[0, 1]`，常配合 `video:timeupdate` 事件使用
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -804,7 +802,7 @@ art.on('video:timeupdate', () => {
|
||||
|
||||
- Type: `Getter`
|
||||
|
||||
The proportion of video playback, with the range of `[0, 1]`, is often used in conjunction with the `video:timeupdate` event
|
||||
视频播放的比例，范围是 `[0, 1]`，常配合 `video:timeupdate` 事件使用
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -823,7 +821,7 @@ art.on('video:timeupdate', () => {
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
The proxy function of DOM event essentially proxies `addEventListener` and `removeEventListener`. When `proxy` is used to process the event, the player will also automatically destroy the event when it is destroyed
|
||||
`DOM` 事件的代理函数，实质上代理了 `addEventListener` 和 `removeEventListener`, 当使用 `proxy` 来处理事件，播放器销毁时也会自动销毁该事件
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -840,9 +838,9 @@ art.proxy(container, 'click', event => {
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
If you need some DOM events only exist in the life cycle of the player, we strongly recommend using this function to avoid memory leakage
|
||||
假如你需要一些 `DOM` 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏
|
||||
|
||||
:::
|
||||
|
||||
@@ -850,7 +848,7 @@ If you need some DOM events only exist in the life cycle of the player, we stron
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
The query function of DOM is similar to `document.querySelector`, but the queried object is limited to the current player, which can avoid errors of the same class name
|
||||
`DOM` 的查询函数，类似 `document.querySelector`，但被查询的对象局限于当前播放器内，可以避免同类名的错误
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -867,7 +865,7 @@ console.info(art.query('.art-video'));
|
||||
|
||||
- Type: `Element`
|
||||
|
||||
Return the `video` element of the player
|
||||
快捷返回播放器的 `video` 元素
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -880,11 +878,33 @@ var art = new Artplayer({
|
||||
console.info(art.video);
|
||||
```
|
||||
|
||||
## `cssVar`
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
动态获取或设置 `css` 变量
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{8}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.log(art.cssVar('--art-theme'));
|
||||
art.cssVar('--art-theme', 'green');
|
||||
console.log(art.cssVar('--art-theme'));
|
||||
});
|
||||
```
|
||||
|
||||
## `quality`
|
||||
|
||||
- Type: `Setter`
|
||||
- Parameter: `Array`
|
||||
|
||||
Dynamically set the quality list
|
||||
动态设置画质列表
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
# Contextmenu
|
||||
# 右键菜单
|
||||
|
||||
## Config
|
||||
## 配置
|
||||
|
||||
| Property | Type | Describe |
|
||||
| --------- | ------------------- | ---------------------------------------------- |
|
||||
| `disable` | `Boolean` | Whether to disable the component |
|
||||
| `name` | `String` | Component unique name, used to mark class name |
|
||||
| `index` | `Number` | Component index, used for display priority |
|
||||
| `html` | `String`, `Element` | DOM element of the component |
|
||||
| `style` | `Object` | component style object |
|
||||
| `click` | `Function` | Component click event |
|
||||
| `mounted` | `Function` | Triggered after the component is mounted |
|
||||
| `tooltip` | `String` | Tooltip text for the component |
|
||||
| 属性 | 类型 | 描述 |
|
||||
| --------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`, `Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
|
||||
## Init
|
||||
## 创建
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -39,7 +39,7 @@ art.contextmenu.show = true;
|
||||
console.info(art.contextmenu['your-menu']);
|
||||
```
|
||||
|
||||
## Add
|
||||
## 添加
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -64,7 +64,7 @@ art.contextmenu.show = true;
|
||||
console.info(art.contextmenu['your-menu']);
|
||||
```
|
||||
|
||||
## Remove
|
||||
## 删除
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -94,7 +94,7 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## Update
|
||||
## 更新
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
# Controls
|
||||
# 控制器
|
||||
|
||||
## Config
|
||||
## 配置
|
||||
|
||||
| Property | Type | Describe |
|
||||
| ---------- | ------------------- | ------------------------------------------------------------------------------------ |
|
||||
| `disable` | `Boolean` | Whether to disable the component |
|
||||
| `name` | `String` | Component unique name, used to mark class name |
|
||||
| `index` | `Number` | Component index, used for display priority |
|
||||
| `html` | `String`, `Element` | DOM element of the component |
|
||||
| `style` | `Object` | component style object |
|
||||
| `click` | `Function` | Component click event |
|
||||
| `mounted` | `Function` | Triggered after the component is mounted |
|
||||
| `tooltip` | `String` | Tooltip text for the component |
|
||||
| `position` | `String` | `left` and `right` control the left and right positions where the controller appears |
|
||||
| `selector` | `Array` | Array of objects for the select list |
|
||||
| `onSelect` | `Function` | A function that is triggered when an element of the select list is clicked |
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | ------------------------------------------ |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`, `Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
| `position` | `String` | `left` 和 `right` 控制控制器出现的左右位置 |
|
||||
| `selector` | `Array` | 选择列表的对象数组 |
|
||||
| `onSelect` | `Function` | 选择列表的元素被点击时触发的函数 |
|
||||
|
||||
## Init
|
||||
## 创建
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -64,10 +64,10 @@ var art = new Artplayer({
|
||||
|
||||
// Get the Element of control by name
|
||||
console.info(art.controls['your-button']);
|
||||
console.info(art.controls.subtitle);
|
||||
console.info(art.controls['subtitle']);
|
||||
```
|
||||
|
||||
## Add
|
||||
## 添加
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -95,10 +95,10 @@ art.controls.add({
|
||||
});
|
||||
|
||||
// Get the Element of control by name
|
||||
console.info(art.controls.button1);
|
||||
console.info(art.controls['button1']);
|
||||
```
|
||||
|
||||
## Remove
|
||||
## 删除
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -128,7 +128,7 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## Update
|
||||
## 更新
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
# Layers
|
||||
# 业务层
|
||||
|
||||
## Config
|
||||
## 配置
|
||||
|
||||
| Property | Type | Describe |
|
||||
| --------- | ------------------- | ---------------------------------------------- |
|
||||
| `disable` | `Boolean` | Whether to disable the component |
|
||||
| `name` | `String` | Component unique name, used to mark class name |
|
||||
| `index` | `Number` | Component index, used for display priority |
|
||||
| `html` | `String`, `Element` | DOM element of the component |
|
||||
| `style` | `Object` | component style object |
|
||||
| `click` | `Function` | Component click event |
|
||||
| `mounted` | `Function` | Triggered after the component is mounted |
|
||||
| `tooltip` | `String` | Tooltip text for the component |
|
||||
| 属性 | 类型 | 描述 |
|
||||
| --------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`, `Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
|
||||
## Init
|
||||
## 创建
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -46,7 +46,7 @@ var art = new Artplayer({
|
||||
console.info(art.layers['potser']);
|
||||
```
|
||||
|
||||
## Add
|
||||
## 添加
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -78,7 +78,7 @@ art.layers.add({
|
||||
console.info(art.layers['potser']);
|
||||
```
|
||||
|
||||
## Remove
|
||||
## 删除
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -108,7 +108,7 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## Update
|
||||
## 更新
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
# Setting
|
||||
# 设置面板
|
||||
|
||||
## Build-in
|
||||
## 内置
|
||||
|
||||
You must open the settings panel first, and then come with four built-in items：`flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
|
||||
须先打开设置面板，然后自带四个内置项：`flip`, `playbackRate`, `aspectRatio`, `subtitleOffset`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -19,16 +19,16 @@ var art = new Artplayer({
|
||||
```
|
||||
|
||||
|
||||
## Init - Select list
|
||||
## 创建 - 选择列表
|
||||
|
||||
| Property | Type | Describe |
|
||||
| ---------- | ------------------- | ------------------- |
|
||||
| `html` | `String`, `Element` | Element DOM |
|
||||
| `icon` | `String`, `Element` | Element icon |
|
||||
| `selector` | `Array` | Element list |
|
||||
| `onSelect` | `Function` | Element click event |
|
||||
| `width` | `Number` | List width |
|
||||
| `tooltip` | `String` | Prompt text |
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | ------------ |
|
||||
| `html` | `String`, `Element` | 元素的 DOM |
|
||||
| `icon` | `String`, `Element` | 元素的图标 |
|
||||
| `selector` | `Array` | 元素列表 |
|
||||
| `onSelect` | `Function` | 元素点击事件 |
|
||||
| `width` | `Number` | 列表宽度 |
|
||||
| `tooltip` | `String` | 提示文本 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -88,7 +88,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## Init - list nesting
|
||||
## 创建 - 列表嵌套
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -139,15 +139,15 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## Init - Switch button
|
||||
## 创建 - 切换按钮
|
||||
|
||||
| Property | Type | Describe |
|
||||
| ---------- | ------------------- | -------------------- |
|
||||
| `html` | `String`, `Element` | Element DOM |
|
||||
| `icon` | `String`, `Element` | Element icon |
|
||||
| `switch` | `Boolean` | Button default state |
|
||||
| `onSwitch` | `Function` | Button toggle event |
|
||||
| `tooltip` | `String` | Prompt text |
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | --------------- |
|
||||
| `html` | `String`, `Element` | 元素的 DOM 元素 |
|
||||
| `icon` | `String`, `Element` | 元素的图标 |
|
||||
| `switch` | `Boolean` | 按钮默认状态 |
|
||||
| `onSwitch` | `Function` | 按钮切换事件 |
|
||||
| `tooltip` | `String` | 提示文本 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -174,16 +174,16 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## Init - Range slider
|
||||
## 创建 - 范围滑块
|
||||
|
||||
| Property | Type | Describe |
|
||||
| ---------- | ------------------- | ------------------------- |
|
||||
| `html` | `String`, `Element` | Element DOM |
|
||||
| `icon` | `String`, `Element` | Element icon |
|
||||
| `range` | `Array` | Default state array |
|
||||
| `onRange` | `Function` | Event fired on completion |
|
||||
| `onChange` | `Function` | Event fired on change |
|
||||
| `tooltip` | `String` | Prompt text |
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | ---------------- |
|
||||
| `html` | `String`, `Element` | 元素的 DOM 元素 |
|
||||
| `icon` | `String`, `Element` | 元素的图标 |
|
||||
| `range` | `Array` | 默认状态数组 |
|
||||
| `onRange` | `Function` | 完成时触发的事件 |
|
||||
| `onChange` | `Function` | 变化时触发的事件 |
|
||||
| `tooltip` | `String` | 提示文本 |
|
||||
|
||||
```js
|
||||
const range = [5, 1, 10, 1];
|
||||
@@ -215,7 +215,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## Add
|
||||
## 添加
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -236,7 +236,7 @@ art.setting.add({
|
||||
});
|
||||
```
|
||||
|
||||
## Remove
|
||||
## 删除
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -267,7 +267,7 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
## Update
|
||||
## 更新
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
::: danger Important Note
|
||||
The English document has not yet been completed, everything is subject to the Chinese document.
|
||||
:::
|
||||
# 安装使用
|
||||
|
||||
# Install
|
||||
|
||||
## Install
|
||||
## 安装
|
||||
|
||||
::: code-group
|
||||
|
||||
@@ -40,7 +36,7 @@ https://unpkg.com/artplayer/dist/artplayer.js
|
||||
|
||||
:::
|
||||
|
||||
## Use
|
||||
## 使用
|
||||
|
||||
::: code-group
|
||||
|
||||
@@ -73,13 +69,13 @@ const art = new Artplayer({
|
||||
|
||||
:::
|
||||
|
||||
::: warning Tip
|
||||
::: warning 提示
|
||||
|
||||
The size of the player depends on the size of the `container`, so your `container` must have a size
|
||||
播放器的尺寸依赖于容器 `container` 的尺寸，所以你的容器 `container` 必须是有尺寸的
|
||||
|
||||
:::
|
||||
|
||||
::: tip The following links can see more use examples
|
||||
::: tip 以下链接可以看到更多的使用例子
|
||||
|
||||
[/packages/artplayer-template](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template)
|
||||
|
||||
@@ -163,9 +159,9 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: warning Tip
|
||||
::: warning Artplayer 非响应式：
|
||||
|
||||
Modifying `option` directly in `Vue.js` will not change the player
|
||||
在 `Vue.js` 里直接修改 `option` 是不会改变播放器的
|
||||
|
||||
:::
|
||||
|
||||
@@ -228,15 +224,15 @@ export default App;
|
||||
|
||||
:::
|
||||
|
||||
::: warning Tip
|
||||
::: warning Artplayer 非响应式：
|
||||
|
||||
Modifying `option` directly in `React.js` will not change the player
|
||||
在 `React.js` 里直接修改 `option` 是不会改变播放器的
|
||||
|
||||
:::
|
||||
|
||||
## TypeScript
|
||||
|
||||
The `artplayer.d.ts` that is automatically imported when importing `Artplayer`, but you can also import the type of options individually
|
||||
导入 `Artplayer` 时会自动导入的 `artplayer.d.ts`，但你也可以单独导入选项的类型
|
||||
|
||||
```ts{2}
|
||||
import Artplayer from 'artplayer';
|
||||
@@ -252,18 +248,17 @@ option.volume = 0.5;
|
||||
const art = new Artplayer(option);
|
||||
```
|
||||
|
||||
::: tip All TypeScript definitions
|
||||
::: tip 全部 TypeScript 定义
|
||||
|
||||
[packages/artplayer/types](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer/types)
|
||||
|
||||
:::
|
||||
|
||||
|
||||
## JavaScript
|
||||
|
||||
Sometimes your `js` file will lose the type prompt of `TypeScript`. At this time, you can manually import the type
|
||||
有时你的 `js` 文件会丢失 `TypeScript` 的类型提示，这时候你可以手动导入类型
|
||||
|
||||
Variable:
|
||||
变量：
|
||||
|
||||
```js{1-3}
|
||||
/**
|
||||
@@ -272,7 +267,7 @@ Variable:
|
||||
let art = null;
|
||||
```
|
||||
|
||||
Parameters:
|
||||
参数：
|
||||
|
||||
```js{1-3}
|
||||
/**
|
||||
@@ -283,7 +278,7 @@ function getInstance(art) {
|
||||
}
|
||||
```
|
||||
|
||||
Properties:
|
||||
属性：
|
||||
|
||||
```js{4-6}
|
||||
export default {
|
||||
@@ -298,7 +293,7 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
Option:
|
||||
选项：
|
||||
|
||||
```js{1-3}
|
||||
/**
|
||||
@@ -315,11 +310,11 @@ option.volume = 0.5;
|
||||
const art8 = new Artplayer(option);
|
||||
```
|
||||
|
||||
## Old browsers
|
||||
## 古老的浏览器
|
||||
|
||||
Production builds of `artplayer.js` are only compatible with the last major version of `Chrome`: `last 1 Chrome version`
|
||||
生产构建的 `artplayer.js` 只兼容最新一个主版本的 `Chrome`：`last 1 Chrome version`
|
||||
|
||||
For older browsers, use the `artplayer.legacy.js` file, compatible up to: `IE 11`
|
||||
对于古老的浏览器，可以使用 `artplayer.legacy.js` 文件，可以兼容到：`IE 11`
|
||||
|
||||
```js
|
||||
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
|
||||
@@ -337,11 +332,11 @@ https://unpkg.com/artplayer/dist/artplayer.legacy.js
|
||||
|
||||
:::
|
||||
|
||||
::: tip If you want to be compatible with older browsers, please modify the following configuration and build it yourself:
|
||||
::: tip 假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：
|
||||
|
||||
Build configuration: [/scripts/build.js](https://github.com/zhw2590582/ArtPlayer/blob/master/scripts/build.js#L29)
|
||||
构建配置：[scripts/build.js](https://github.com/zhw2590582/ArtPlayer/blob/master/scripts/build.js#L29)
|
||||
|
||||
Reference documents: [browserslist](https://github.com/browserslist/browserslist#full-list)
|
||||
参考文档：[browserslist](https://github.com/browserslist/browserslist#full-list)
|
||||
|
||||
:::
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js{18-21,25}
|
||||
```js{18,23}
|
||||
function playMpd(video, url, art) {
|
||||
if (dashjs.supportsMediaSource()) {
|
||||
if (art.dash) art.dash.destroy();
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js{19-22,26}
|
||||
```js{19,24}
|
||||
function playFlv(video, url, art) {
|
||||
if (flvjs.isSupported()) {
|
||||
if (art.flv) art.flv.destroy();
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js{21-24,28}
|
||||
```js{21,26}
|
||||
function playM3u8(video, url, art) {
|
||||
if (Hls.isSupported()) {
|
||||
if (art.hls) art.hls.destroy();
|
||||
|
||||
@@ -0,0 +1,463 @@
|
||||
# 弹幕库
|
||||
|
||||
## 演示
|
||||
|
||||
👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
|
||||
|
||||
## 安装
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [npm]
|
||||
npm install artplayer-plugin-danmuku
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add artplayer-plugin-danmuku
|
||||
```
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm add artplayer-plugin-danmuku
|
||||
```
|
||||
|
||||
```html [script]
|
||||
<script src="path/to/artplayer-plugin-danmuku.js"></script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## CDN
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [jsdelivr.net]
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
|
||||
```
|
||||
|
||||
```bash [unpkg.com]
|
||||
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 选项
|
||||
|
||||
```js
|
||||
{
|
||||
danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
|
||||
speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
|
||||
opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
|
||||
fontSize: 25, // 字体大小，支持数字和百分比
|
||||
color: '#FFFFFF', // 默认字体颜色
|
||||
mode: 0, // 默认模式，0-滚动，1-静止
|
||||
margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
|
||||
antiOverlap: true, // 是否防重叠
|
||||
useWorker: true, // 是否使用 web worker
|
||||
synchronousPlayback: false, // 是否同步到播放速度
|
||||
filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
|
||||
lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
|
||||
maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
|
||||
minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
|
||||
maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
|
||||
theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
|
||||
heatmap: true, // 是否开启弹幕热度图, 默认为 false
|
||||
beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
|
||||
// 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
|
||||
mount: document.querySelector('.artplayer-danmuku'),
|
||||
}
|
||||
```
|
||||
|
||||
## 使用弹幕数组
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
// 弹幕数组
|
||||
danmuku: [
|
||||
{
|
||||
text: '111', // 弹幕文本
|
||||
time: 1, // 发送时间，单位秒
|
||||
color: '#fff', // 弹幕局部颜色
|
||||
border: false, // 是否显示描边
|
||||
mode: 0, // 弹幕模式: 0表示滚动, 1静止
|
||||
},
|
||||
{
|
||||
text: '222',
|
||||
time: 2,
|
||||
color: 'red',
|
||||
border: true,
|
||||
mode: 0,
|
||||
},
|
||||
{
|
||||
text: '333',
|
||||
time: 3,
|
||||
color: 'green',
|
||||
border: false,
|
||||
mode: 1,
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## 使用弹幕 XML
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
// 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
|
||||
danmuku: '/assets/sample/danmuku.xml',
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## 使用异步调用
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
// 使用 Promise 异步返回
|
||||
danmuku: function () {
|
||||
return new Promise((resovle) => {
|
||||
return resovle([
|
||||
{
|
||||
text: '111',
|
||||
time: 1,
|
||||
},
|
||||
{
|
||||
text: '222',
|
||||
time: 2,
|
||||
},
|
||||
{
|
||||
text: '333',
|
||||
time: 3,
|
||||
},
|
||||
]);
|
||||
});
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## `hide/show`
|
||||
|
||||
通过方法 `hide` 和 `show` 进行隐藏或者显示弹幕
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
danmuku: '/assets/sample/danmuku.xml',
|
||||
}),
|
||||
],
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: '隐藏弹幕',
|
||||
click: function () {
|
||||
art.plugins.artplayerPluginDanmuku.hide();
|
||||
},
|
||||
},
|
||||
{
|
||||
position: 'right',
|
||||
html: '显示弹幕',
|
||||
click: function () {
|
||||
art.plugins.artplayerPluginDanmuku.show();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## `isHide`
|
||||
|
||||
通过属性 `isHide` 判断当前弹幕是隐藏或者显示
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
danmuku: '/assets/sample/danmuku.xml',
|
||||
}),
|
||||
],
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: '隐藏弹幕',
|
||||
click: function (_, event) {
|
||||
if (art.plugins.artplayerPluginDanmuku.isHide) {
|
||||
art.plugins.artplayerPluginDanmuku.show();
|
||||
event.target.innerText = '隐藏弹幕';
|
||||
} else {
|
||||
art.plugins.artplayerPluginDanmuku.hide();
|
||||
event.target.innerText = '显示弹幕';
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## `emit`
|
||||
|
||||
通过方法 `emit` 发送一条实时弹幕
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
danmuku: '/assets/sample/danmuku.xml',
|
||||
}),
|
||||
],
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: '发送弹幕',
|
||||
click: function () {
|
||||
var text = prompt('请输入弹幕文本', '弹幕测试文本');
|
||||
if (!text || !text.trim()) return;
|
||||
var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
|
||||
art.plugins.artplayerPluginDanmuku.emit({
|
||||
text: text,
|
||||
color: color,
|
||||
border: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## `config`
|
||||
|
||||
通过方法 `config` 实时改变弹幕配置，支持属性有：
|
||||
|
||||
- `danmuku`
|
||||
- `speed`
|
||||
- `opacity`
|
||||
- `fontSize`
|
||||
- `color`
|
||||
- `mode`
|
||||
- `margin`
|
||||
- `antiOverlap`
|
||||
- `synchronousPlayback`
|
||||
- `filter`
|
||||
- `lockTime`
|
||||
- `beforeEmit`
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
danmuku: '/assets/sample/danmuku.xml',
|
||||
}),
|
||||
],
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
|
||||
style: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
mounted: function ($setting) {
|
||||
const $range = $setting.querySelector('input[type=range]');
|
||||
$range.addEventListener('change', () => {
|
||||
art.plugins.artplayerPluginDanmuku.config({
|
||||
fontSize: Number($range.value),
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## `load`
|
||||
|
||||
通过 load 方法可以重载弹幕源，或者切换新弹幕
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
danmuku: '/assets/sample/danmuku.xml',
|
||||
}),
|
||||
],
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: '重载弹幕',
|
||||
click: function () {
|
||||
art.plugins.artplayerPluginDanmuku.load();
|
||||
},
|
||||
},
|
||||
{
|
||||
position: 'right',
|
||||
html: '切换弹幕',
|
||||
click: function () {
|
||||
art.plugins.artplayerPluginDanmuku.config({
|
||||
danmuku: '/assets/sample/danmuku-v2.xml',
|
||||
});
|
||||
art.plugins.artplayerPluginDanmuku.load();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## `reset`
|
||||
|
||||
用于清空当前显示的弹幕
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
danmuku: '/assets/sample/danmuku.xml',
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
art.on('resize', () => {
|
||||
art.plugins.artplayerPluginDanmuku.reset();
|
||||
});
|
||||
```
|
||||
|
||||
## `option`
|
||||
|
||||
用于获取当前弹幕配置
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-danmuku/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
danmuku: '/assets/sample/danmuku.xml',
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.plugins.artplayerPluginDanmuku.option);
|
||||
});
|
||||
```
|
||||
|
||||
## 事件
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
plugins: [
|
||||
artplayerPluginDanmuku({
|
||||
danmuku: '/assets/sample/danmuku.xml',
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
art.on('artplayerPluginDanmuku:emit', (danmu) => {
|
||||
console.info('新增弹幕', danmu);
|
||||
});
|
||||
|
||||
art.on('artplayerPluginDanmuku:loaded', (danmus) => {
|
||||
console.info('加载弹幕', danmus.length);
|
||||
});
|
||||
|
||||
art.on('artplayerPluginDanmuku:error', (error) => {
|
||||
console.info('加载错误', error);
|
||||
});
|
||||
|
||||
art.on('artplayerPluginDanmuku:config', (option) => {
|
||||
console.info('配置变化', option);
|
||||
});
|
||||
|
||||
art.on('artplayerPluginDanmuku:stop', () => {
|
||||
console.info('弹幕停止');
|
||||
});
|
||||
|
||||
art.on('artplayerPluginDanmuku:start', () => {
|
||||
console.info('弹幕开始');
|
||||
});
|
||||
|
||||
art.on('artplayerPluginDanmuku:hide', () => {
|
||||
console.info('弹幕隐藏');
|
||||
});
|
||||
|
||||
art.on('artplayerPluginDanmuku:show', () => {
|
||||
console.info('弹幕显示');
|
||||
});
|
||||
|
||||
art.on('artplayerPluginDanmuku:destroy', () => {
|
||||
console.info('弹幕销毁');
|
||||
});
|
||||
```
|
||||
@@ -1,20 +1,20 @@
|
||||
# Language
|
||||
# 语言设置
|
||||
|
||||
::: danger
|
||||
|
||||
In view of the fact that more and more languages are bundled, starting from version 5.1.0, the core code of `artplayer.js` will no longer bundle other languages except `Simplified Chinese` and `English`, and you need to import the required language.
|
||||
鉴于捆绑的多国语言越来越多, 从 `5.1.0` 版本开始, `artplayer.js` 核心代码除了包含 `简体中文` 和 `英文` 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。
|
||||
|
||||
:::
|
||||
|
||||
:::warning
|
||||
|
||||
When the language cannot be matched, English will be displayed by default, i18n writing reference: [artplayer/types/i18n.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/i18n.d.ts)
|
||||
当无法匹配到语言时, 会默认显示英文, i18n 写法参考: [artplayer/types/i18n.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/i18n.d.ts)
|
||||
|
||||
:::
|
||||
|
||||
## Default language
|
||||
## 默认语言
|
||||
|
||||
The default languages are: `en`, `zh-cn`, no need to import manually
|
||||
默认语言有: `en`, `zh-cn`, 无需手动导入
|
||||
|
||||
```js{4}
|
||||
var art = new Artplayer({
|
||||
@@ -24,13 +24,13 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## Import language
|
||||
## 导入语言
|
||||
|
||||
The language files before packaging are stored in: `artplayer/src/i18n/*.js`, welcome to add your language
|
||||
打包前的语言文件存放于: `artplayer/src/i18n/*.js`, 欢迎来添加你的语言
|
||||
|
||||
The packaged language files are stored in: `artplayer/dist/i18n/*.js`
|
||||
打包后的语言文件存放于: `artplayer/dist/i18n/*.js`
|
||||
|
||||
Manually imported languages are: `cs`, `es`, `fa`, `fr`, `id`, `pl`, `ru`, `zh-tw`
|
||||
手动导入的语言有: `cs`, `es`, `fa`, `fr`, `id`, `pl`, `ru`, `zh-tw`
|
||||
|
||||
::: code-group
|
||||
|
||||
@@ -66,7 +66,7 @@ var art = new Artplayer({
|
||||
|
||||
:::
|
||||
|
||||
## New language
|
||||
## 新增语言
|
||||
|
||||
```js{4-9}
|
||||
var art = new Artplayer({
|
||||
@@ -81,7 +81,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
## Change language
|
||||
## 修改语言
|
||||
|
||||
```js
|
||||
import zhTw from 'artplayer/i18n/zh-tw.js';
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
# Option
|
||||
# 基础选项
|
||||
|
||||
## `container`
|
||||
|
||||
- Type: `String, Element`
|
||||
- Default: `#artplayer`
|
||||
|
||||
The `DOM` container attached to the player
|
||||
播放器挂载的 `DOM` 容器
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -17,7 +17,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
You may need to initialize the size of container elements, such as:
|
||||
您可能需要初始化容器元素的大小，如:
|
||||
|
||||
```css{2-3}
|
||||
.artplayer-app {
|
||||
@@ -26,7 +26,7 @@ You may need to initialize the size of container elements, such as:
|
||||
}
|
||||
```
|
||||
|
||||
Or use `aspect-ratio`：
|
||||
或者使用 `aspect-ratio`：
|
||||
|
||||
```css{2}
|
||||
.artplayer-app {
|
||||
@@ -34,9 +34,9 @@ Or use `aspect-ratio`：
|
||||
}
|
||||
```
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
Of all options, only `container` is required
|
||||
全部选项里，只有 `container` 是必填的
|
||||
|
||||
:::
|
||||
|
||||
@@ -45,7 +45,7 @@ Of all options, only `container` is required
|
||||
- Type: `String`
|
||||
- Default: `''`
|
||||
|
||||
Video source address
|
||||
视频源地址
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -56,7 +56,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
Sometimes the `url` address is not known so quickly. At this time, you can set the `url` asynchronously
|
||||
有时候 `url` 地址没那么快知道，这时候你可以异步设置 `url`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -70,11 +70,11 @@ setTimeout(() => {
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
Three video file formats are supported by default: `.mp4`, `.ogg`, and `.webm`
|
||||
默认支持三种视频文件格式：`.mp4`, `.ogg`, `.webm`
|
||||
|
||||
If you need to play `.m3u8` or `.flv` or other formats, please refer to the `Libraries` on the left
|
||||
如需要播放 `.m3u8` 或者 `.flv` 等其它格式，请参考左侧的 `第三方库`
|
||||
|
||||
:::
|
||||
|
||||
@@ -84,7 +84,7 @@ If you need to play `.m3u8` or `.flv` or other formats, please refer to the `Lib
|
||||
- Type: `String`
|
||||
- Default: `''`
|
||||
|
||||
The unique identifier of the player, currently only used for `autoplayback`
|
||||
播放器的唯一标识，目前只用于记忆播放 `autoplayback`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -101,7 +101,7 @@ var art = new Artplayer({
|
||||
- Type: `Function`
|
||||
- Default: `undefined`
|
||||
|
||||
The constructor accepts a function as the second parameter, which is triggered when the player is initialized successfully and the video can be played, just like the `ready` event
|
||||
构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和`ready`事件一样
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -118,7 +118,7 @@ var art = new Artplayer(
|
||||
);
|
||||
```
|
||||
|
||||
Equivalent to:
|
||||
等同于:
|
||||
|
||||
```js{7-9}
|
||||
var art = new Artplayer({
|
||||
@@ -132,9 +132,9 @@ art.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
The `this` in the callback function is the player instance, but if the callback function uses the arrow function, the `this` will not point to the player instance
|
||||
回调函数里的`this`就是播放器实例，但回调函数假如使用了箭头函数，`this`则不会指向播放器实例
|
||||
|
||||
:::
|
||||
|
||||
@@ -143,7 +143,7 @@ The `this` in the callback function is the player instance, but if the callback
|
||||
- Type: `String`
|
||||
- Default: `''`
|
||||
|
||||
Video posters will only appear when the player is initialized and not played
|
||||
视频的海报，只会出现在播放器初始化且未播放的状态下
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -160,7 +160,7 @@ var art = new Artplayer({
|
||||
- Type: `String`
|
||||
- Default: `#f00`
|
||||
|
||||
The player theme color is currently used on the `progress bar` and `highlighted element`
|
||||
播放器主题颜色，目前用于 `进度条` 和 `高亮元素` 上
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -177,7 +177,7 @@ var art = new Artplayer({
|
||||
- Type: `Number`
|
||||
- Default: `0.7`
|
||||
|
||||
Default volume of player
|
||||
播放器的默认音量
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -189,9 +189,9 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
The player will cache the size of the last volume, and the player will read the cache value at the next initialization (such as refreshing the page)
|
||||
播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值
|
||||
|
||||
:::
|
||||
|
||||
@@ -200,7 +200,7 @@ The player will cache the size of the last volume, and the player will read the
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
When using live mode, the progress bar and playback time will be hidden
|
||||
使用直播模式，会隐藏进度条和播放时间
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -217,7 +217,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to mute by default
|
||||
是否默认静音
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -234,7 +234,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to play automatically
|
||||
是否自动播放
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -247,9 +247,9 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
If you want to enter the page by default to automatically play the video, `muted` must be `true`. For more information, please read [Autoplay Policy Changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
|
||||
假如希望默认进入页面就能自动播放视频，`muted` 必需为 `true`，更多信息请阅读 [Autoplay Policy Changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
|
||||
|
||||
:::
|
||||
|
||||
@@ -258,7 +258,7 @@ If you want to enter the page by default to automatically play the video, `muted
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
The size of the player will fill the entire `container` size by default, so black edges often appear. This value can automatically adjust the size of the player to hide the black edges, similar to the `object-fit: contain` of `css`
|
||||
播放器的尺寸默认会填充整个 `container` 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边，类似 `css` 的 `object-fit: cover;`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -275,7 +275,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
When the player scrolls outside the viewport, it automatically enters the `mini mode`
|
||||
当播放器滚动到浏览器视口以外时，自动进入 `迷你播放` 模式
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -292,7 +292,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to play in a loop
|
||||
是否循环播放
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -309,7 +309,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to display the video flip function currently only appears in the `Setting` and `Contextmenu`
|
||||
是否显示视频翻转功能，目前只出现在 `设置面板` 和 `右键菜单` 里
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -327,7 +327,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to display the video playback speed function will appear in the `Setting` and `Contextmenu`
|
||||
是否显示视频播放速度功能，会出现在 `设置面板` 和 `右键菜单` 里
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -345,7 +345,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to display the video aspect ratio function will appear in the `Setting` and `Contextmenu`
|
||||
是否显示视频长宽比功能，会出现在 `设置面板` 和 `右键菜单` 里
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -363,7 +363,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to display the `video screenshot` function in the bottom control bar
|
||||
是否在底部控制栏里显示 `视频截图` 功能
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -375,9 +375,9 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
Due to the browser security policy, if the video source address and website are cross-domain, the screenshot may fail
|
||||
由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败
|
||||
|
||||
:::
|
||||
|
||||
@@ -386,7 +386,7 @@ Due to the browser security policy, if the video source address and website are
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to display the switch button of `Setting` in the bottom control bar
|
||||
是否在底部控制栏里显示 `设置面板` 的开关按钮
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -403,7 +403,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `true`
|
||||
|
||||
Whether to use shortcut keys
|
||||
是否使用快捷键
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -415,17 +415,17 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
| Hotkeys | Sescribe |
|
||||
| ------- | ----------------- |
|
||||
| `↑` | Volume Up |
|
||||
| `↓` | Volume Down |
|
||||
| `←` | Fast forward |
|
||||
| `→` | Fast rewind |
|
||||
| `space` | Toggle play/pause |
|
||||
| 热键 | 描述 |
|
||||
| ------- | ------------- |
|
||||
| `↑` | 增加音量 |
|
||||
| `↓` | 降低音量 |
|
||||
| `←` | 视频快进 |
|
||||
| `→` | 视频快退 |
|
||||
| `space` | 切换播放/暂停 |
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
These shortcut keys will only take effect after the player gets the focus (such as clicking the player)
|
||||
只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
|
||||
|
||||
:::
|
||||
|
||||
@@ -434,7 +434,7 @@ These shortcut keys will only take effect after the player gets the focus (such
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to display the `picture in picture` switch button in the bottom control bar
|
||||
是否在底部控制栏里显示 `画中画` 的开关按钮
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -451,7 +451,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `true`
|
||||
|
||||
If there are multiple players in the page at the same time, can only one player play
|
||||
假如页面里同时存在多个播放器，是否只能让一个播放器播放
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -468,7 +468,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to display the player `window full screen` button in the bottom control bar
|
||||
是否在底部控制栏里显示播放器 `窗口全屏` 按钮
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -485,7 +485,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to display the player `full screen web page` button in the bottom control bar
|
||||
是否在底部控制栏里显示播放器 `网页全屏` 按钮
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -502,7 +502,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Subtitle time offset, with the range of `[-5s, 5s]`, appears in the `Settings`
|
||||
字幕时间偏移，范围在 `[-5s, 5s]`，出现在 `设置面板` 里
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -523,7 +523,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Mini progress bar, only appears when the player loses focus and is playing
|
||||
迷你进度条，只在播放器失去焦点后且正在播放时出现
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -540,9 +540,9 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to use the `SSR` mount mode is useful if you want to render the `HTML` required by the player in advance before the player is mounted
|
||||
是否使用 `SSR` 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的 `HTML` 时有用
|
||||
|
||||
You can access the `HTML` required by the player through `Artplayer.html`
|
||||
你可以通过 `Artplayer.html` 访问到播放器所需的 `HTML`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -562,7 +562,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `true`
|
||||
|
||||
Whether to use the `playsInline` mode on the mobile end
|
||||
在移动端是否使用 `playsInline` 模式
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -579,7 +579,7 @@ var art = new Artplayer({
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Initialize the customized `layers`
|
||||
初始化自定义的 `层`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -610,7 +610,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Please refer to the following address for `Component`:
|
||||
:::warning `组件配置` 请参考以下地址：
|
||||
|
||||
[/component/layers.html](/component/layers.html)
|
||||
|
||||
@@ -621,7 +621,7 @@ var art = new Artplayer({
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Initialize the customized `Setting`
|
||||
初始化自定义的 `设置面板`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -663,7 +663,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Please refer to the following address for `Setting`
|
||||
:::warning `设置面板` 请参考以下地址
|
||||
|
||||
[/component/setting.html](/component/setting.html)
|
||||
|
||||
@@ -674,7 +674,7 @@ var art = new Artplayer({
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Initialize the customized `Contextmenu`
|
||||
初始化自定义的 `右键菜单`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -694,9 +694,9 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Please refer to the following address for `Component`:
|
||||
:::warning `组件配置` 请参考以下地址：
|
||||
|
||||
[/component/contextmenu.html](/component/contextmenu.html)
|
||||
[/component/contextmenu.html](/component/contextmenu.html)- Type:
|
||||
|
||||
:::
|
||||
|
||||
@@ -705,7 +705,7 @@ var art = new Artplayer({
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Initialize the customized `Controls`
|
||||
初始化自定义的底部 `控制栏`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -729,7 +729,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Please refer to the following address for `Setting`
|
||||
:::warning `组件配置` 请参考以下地址：
|
||||
|
||||
[/component/controls.html](/component/controls.html)
|
||||
|
||||
@@ -740,13 +740,13 @@ var art = new Artplayer({
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Whether to display the `Quality` list in the bottom control bar
|
||||
是否在底部控制栏里显示 `画质选择` 列表
|
||||
|
||||
| Property | Type | Describe |
|
||||
| --------- | --------- | --------------- |
|
||||
| `default` | `Boolean` | Default quality |
|
||||
| `html` | `String` | Quality name |
|
||||
| `url` | `String` | Quality name |
|
||||
| 属性 | 类型 | 描述 |
|
||||
| --------- | --------- | -------- |
|
||||
| `default` | `Boolean` | 默认画质 |
|
||||
| `html` | `String` | 画质名字 |
|
||||
| `url` | `String` | 画质地址 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -773,12 +773,12 @@ var art = new Artplayer({
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Display `highlight` on the progress bar
|
||||
在进度条上显示 `高亮信息`
|
||||
|
||||
| Property | Type | Describe |
|
||||
| -------- | -------- | -------------- |
|
||||
| `time` | `Number` | Highlight time |
|
||||
| `text` | `String` | Highlight text |
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ------ | -------- | ------------------ |
|
||||
| `time` | `Number` | 高亮时间（单位秒） |
|
||||
| `text` | `String` | 高亮文本 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -816,7 +816,7 @@ var art = new Artplayer({
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Initialize customized `plugins`
|
||||
初始化自定义的 `插件`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -844,15 +844,15 @@ var art = new Artplayer({
|
||||
- Type: `Object`
|
||||
- Default: `{}`
|
||||
|
||||
Set the thumbnails image on the progress bar
|
||||
在进度条上设置 `预览图`
|
||||
|
||||
| Property | Type | Describe |
|
||||
| -------- | -------- | ---------------- |
|
||||
| `url` | `String` | Thumbnail url |
|
||||
| `number` | `Number` | Thumbnail number |
|
||||
| `column` | `Number` | Thumbnail column |
|
||||
| `width` | `Number` | Thumbnail width |
|
||||
| `height` | `Number` | Thumbnail height |
|
||||
| 属性 | 类型 | 描述 |
|
||||
| -------- | -------- | ---------- |
|
||||
| `url` | `String` | 预览图地址 |
|
||||
| `number` | `Number` | 预览图数量 |
|
||||
| `column` | `Number` | 预览图列数 |
|
||||
| `width` | `Number` | 预览图宽度 |
|
||||
| `height` | `Number` | 预览图高度 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -868,7 +868,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Generate preview thumbnails online
|
||||
:::warning 在线生成预览图
|
||||
|
||||
[artplayer-tool-thumbnail](https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=thumbnail)
|
||||
|
||||
@@ -879,16 +879,17 @@ var art = new Artplayer({
|
||||
- Type: `Object`
|
||||
- Default: `{}`
|
||||
|
||||
Set the subtitle of the video and support the subtitle format: `vtt`, `srt`, `ass`
|
||||
设置视频的字幕，支持字幕格式：`vtt`, `srt`, `ass`
|
||||
|
||||
| Property | Type | Describe |
|
||||
| ----------- | ---------- | ------------------------------------------------ |
|
||||
| `url` | `String` | Subtitle url |
|
||||
| `type` | `String` | Subtitle type: `vtt`, `srt`, `ass` |
|
||||
| `style` | `Object` | Subtitle style |
|
||||
| `encoding` | `String` | Subtitle code, Default: `utf-8` |
|
||||
| `escape` | `Boolean` | Whether to escape the `html` tag,Default: `true` |
|
||||
| `onVttLoad` | `Function` | Functions for modifying `vtt` text |
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ----------- | ---------- | ----------------------------------- |
|
||||
| `name` | `String` | 字幕名字 |
|
||||
| `url` | `String` | 字幕地址 |
|
||||
| `type` | `String` | 字幕类型，可选 `vtt`, `srt`, `ass` |
|
||||
| `style` | `Object` | 字幕样式 |
|
||||
| `encoding` | `String` | 字幕编码，默认 `utf-8` |
|
||||
| `escape` | `Boolean` | 是否转义 `html` 标签，默认为 `true` |
|
||||
| `onVttLoad` | `Function` | 用于修改 `vtt` 文本的函数 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -914,7 +915,7 @@ var art = new Artplayer({
|
||||
- Type: `Object`
|
||||
- Default: `{'controls': false,'preload': 'metadata'}`
|
||||
|
||||
More video attributes, which will be directly written into the video element
|
||||
更多视频属性，这些属性将直接写入视频元素里
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -934,7 +935,7 @@ var art = new Artplayer({
|
||||
- Type: `Object`
|
||||
- Default: `{}`
|
||||
|
||||
It is used to replace the default icon and supports `Html String` and `HTMLElement`
|
||||
用于替换默认图标，支持 `Html` 字符串和 `HTMLElement`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -949,7 +950,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Definition of all icons
|
||||
:::warning 全部图标的定义
|
||||
|
||||
[artplayer/types/icons.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/icons.d.ts)
|
||||
|
||||
@@ -960,7 +961,7 @@ var art = new Artplayer({
|
||||
- Type: `String`
|
||||
- Default: `''`
|
||||
|
||||
It is used to indicate the format of the video. It needs to be used together with the `customType`. The default format of the video is the suffix of the video address (such as `.m3u8`, `.mkv`, `.ts`). But sometimes the video address does not have the correct suffix, so it needs to be specially specified
|
||||
用于指明视频的格式，需要配合 `customType` 一起使用，默认视频的格式就是视频地址的后缀（如 `.m3u8`, `.mkv`, `.ts`），但有时候视频地地址没有正确的后缀，所以需要特别指明
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -972,13 +973,13 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Identification of suffix
|
||||
:::warning 后缀的识别
|
||||
|
||||
The player can only resolve this suffix: `/assets/sample/video.m3u8`
|
||||
播放器只能解析这种后缀：`/assets/sample/video.m3u8`
|
||||
|
||||
However, this suffix cannot be resolved: `/assets/sample/video?type=m3u8`
|
||||
但无法解析这种后缀：`/assets/sample/video?type=m3u8`
|
||||
|
||||
So if you use `customType`, it is better to specify `type` at the same time
|
||||
所以假如你使用了 `customType`，最好同时要指明 `type`
|
||||
|
||||
:::
|
||||
|
||||
@@ -987,11 +988,11 @@ So if you use `customType`, it is better to specify `type` at the same time
|
||||
- Type: `Object`
|
||||
- Default: `{}`
|
||||
|
||||
By matching the video's `type`, the video decoding right is handed over to a third-party program for processing. The processing function can receive three parameters
|
||||
通过视频的 `type` 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数
|
||||
|
||||
- `video` : Video `DOM` element
|
||||
- `url` : Video url
|
||||
- `art` : Player instance
|
||||
- `video` : 视频 `DOM` 元素
|
||||
- `url` : 视频地址
|
||||
- `art` : 当前实例
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -1012,7 +1013,7 @@ var art = new Artplayer({
|
||||
- Type: `String`
|
||||
- Default: `navigator.language.toLowerCase()`
|
||||
|
||||
The default display language currently supports: `en`, `zh-cn`
|
||||
默认显示语言，目前支持：`en`, `zh-cn`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -1024,9 +1025,9 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning More language setting
|
||||
:::warning 更多的语言设置
|
||||
|
||||
[/en/start/i18n.html](/en/start/i18n.html)
|
||||
[/start/i18n.html](/start/i18n.html)
|
||||
|
||||
:::
|
||||
|
||||
@@ -1035,9 +1036,9 @@ var art = new Artplayer({
|
||||
- Type: `Object`
|
||||
- Default: `{}`
|
||||
|
||||
Customize the `i18n` configuration, which will be deeply merged with the built-in `i18n`
|
||||
自定义 `i18n` 配置，该配置会和自带的 `i18n` 进行深度合并
|
||||
|
||||
Add your language:
|
||||
新增你的语言:
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -1054,7 +1055,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
Modify existing language:
|
||||
修改现有的语言
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -1073,9 +1074,9 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning More language setting
|
||||
:::warning 更多的语言设置
|
||||
|
||||
[/en/start/i18n.html](/en/start/i18n.html)
|
||||
[/start/i18n.html](/start/i18n.html)
|
||||
|
||||
:::
|
||||
|
||||
@@ -1084,7 +1085,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to display a `lock button` on the mobile end to hide the bottom control bar
|
||||
是否在移动端显示一个 `锁定按钮` ，用于隐藏底部 `控制栏`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -1101,7 +1102,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to add long-press video fast-forward function on the mobile terminal
|
||||
是否在移动端添加长按视频快进功能
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -1118,7 +1119,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to use automatic playback function
|
||||
是否使用自动 `回放功能`
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -1131,11 +1132,11 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning Tip
|
||||
:::warning 提示
|
||||
|
||||
Because the player uses `url` as `key` by default to cache the playback progress
|
||||
因为播放器默认使用 `url` 作为 `key` 来缓存播放进度的
|
||||
|
||||
But if your `url` of the same video is different, you need to use `id` to identify the unique `key` of the video
|
||||
但假如你的同一个视频的 `url` 是不同的话，那么你需要使用 `id` 来标识视频的唯一 `key`
|
||||
|
||||
:::
|
||||
|
||||
@@ -1144,7 +1145,7 @@ But if your `url` of the same video is different, you need to use `id` to identi
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to rotate the player according to the video size and viewport size when the mobile page is full screen
|
||||
是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -1161,7 +1162,7 @@ var art = new Artplayer({
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to display the `airplay` button. Currently, only some browsers support this function
|
||||
是否显示 `airplay` 按钮，当前只有部分浏览器支持该功能
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -1178,7 +1179,7 @@ var art = new Artplayer({
|
||||
- Type: `Object`
|
||||
- Default: `{}`
|
||||
|
||||
Used to change built-in CSS variables
|
||||
用于改变内置的css变量
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -1192,7 +1193,7 @@ var art = new Artplayer({
|
||||
});
|
||||
```
|
||||
|
||||
:::warning cssVar definitions
|
||||
:::warning cssVar 写法参考
|
||||
|
||||
[artplayer/types/cssVar.d.d.ts](https://github.com/zhw2590582/ArtPlayer/blob/master/packages/artplayer/types/cssVar.d.ts)
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 75%;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
transition: height var(--art-transition-duration) ease;
|
||||
background-color: var(--art-progress-color);
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
import fs from 'fs';
|
||||
import cpy from 'cpy';
|
||||
import path from 'path';
|
||||
import axios from 'axios';
|
||||
import { glob } from 'glob';
|
||||
import dotenv from 'dotenv';
|
||||
import { removeDir } from './utils.js';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
function splitMarkdown(text, maxChars) {
|
||||
const parts = [];
|
||||
let currentPart = '';
|
||||
let buffer = '';
|
||||
let inCodeBlock = false;
|
||||
|
||||
const lines = text.split('\n');
|
||||
|
||||
for (let line of lines) {
|
||||
if (line.startsWith('```')) {
|
||||
inCodeBlock = !inCodeBlock;
|
||||
}
|
||||
|
||||
buffer += line + '\n';
|
||||
|
||||
if (!inCodeBlock && buffer.length > maxChars) {
|
||||
// 如果当前不在代码块内，且缓冲区字符数超过限制，进行分割
|
||||
let splitPoint = buffer.lastIndexOf('\n\n', maxChars);
|
||||
if (splitPoint === -1) splitPoint = maxChars;
|
||||
|
||||
currentPart += buffer.substring(0, splitPoint);
|
||||
parts.push(currentPart);
|
||||
currentPart = '';
|
||||
buffer = buffer.substring(splitPoint).trimStart() + '\n';
|
||||
}
|
||||
}
|
||||
|
||||
// 处理剩余的缓冲区
|
||||
currentPart += buffer;
|
||||
if (currentPart.trim() !== '') {
|
||||
parts.push(currentPart);
|
||||
}
|
||||
|
||||
return parts;
|
||||
}
|
||||
|
||||
const translateContent = async (content, targetLanguage, openAIKey) => {
|
||||
try {
|
||||
const response = await axios.post(
|
||||
'https://api.openai.com/v1/engines/gpt-3.5-turbo/completions',
|
||||
{
|
||||
prompt: `Translate the following text to ${targetLanguage}:\n\n${content}`,
|
||||
max_tokens: 1024,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${openAIKey}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
return response.data.choices[0].text;
|
||||
} catch (error) {
|
||||
console.error('Error during translation:', error);
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
const translateMarkdownFiles = async (filePaths, targetLanguage, openAIKey, maxCharsPerRequest) => {
|
||||
for (const filePath of filePaths) {
|
||||
const content = fs.readFileSync(filePath, 'utf-8');
|
||||
const parts = splitMarkdown(content, maxCharsPerRequest);
|
||||
console.log('Translating:', filePath);
|
||||
console.log('Parts:', parts.length);
|
||||
const translatedParts = [];
|
||||
for (const part of parts) {
|
||||
const translatedPart = await translateContent(part, targetLanguage, openAIKey);
|
||||
translatedParts.push(translatedPart);
|
||||
}
|
||||
const translatedContent = translatedParts.join('');
|
||||
fs.writeFileSync(filePath, translatedContent);
|
||||
}
|
||||
};
|
||||
|
||||
(async () => {
|
||||
const basePath = 'packages/artplayer-vitepress/docs';
|
||||
const enPath = 'packages/artplayer-vitepress/docs/en';
|
||||
removeDir(enPath);
|
||||
cpy(path.resolve(basePath, 'index.md'), path.resolve(enPath));
|
||||
const dirs = ['advanced', 'component', 'library', 'plugin', 'start'];
|
||||
for (let index = 0; index < dirs.length; index++) {
|
||||
const dir = dirs[index];
|
||||
await cpy(path.resolve(basePath, dir), path.resolve(enPath, dir), { flat: true });
|
||||
}
|
||||
const mdsPaths = glob.sync(path.resolve(enPath, '**/*.md'));
|
||||
const openAIKey = process.env.OPENAI_KEY;
|
||||
const maxCharsPerRequest = 1000;
|
||||
if (openAIKey) {
|
||||
await translateMarkdownFiles(mdsPaths, 'English', openAIKey, maxCharsPerRequest);
|
||||
} else {
|
||||
console.log('OPENAI_KEY is not set');
|
||||
}
|
||||
})();
|
||||
@@ -1,3 +1,4 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { glob } from 'glob';
|
||||
|
||||
@@ -22,3 +23,18 @@ export function getProjects() {
|
||||
return result;
|
||||
}, {});
|
||||
}
|
||||
|
||||
export function removeDir(dir) {
|
||||
if (fs.existsSync(dir)) {
|
||||
const files = fs.readdirSync(dir);
|
||||
files.forEach((file) => {
|
||||
const curPath = path.join(dir, file);
|
||||
if (fs.statSync(curPath).isDirectory()) {
|
||||
removeDir(curPath);
|
||||
} else {
|
||||
fs.unlinkSync(curPath);
|
||||
}
|
||||
});
|
||||
fs.rmdirSync(dir);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user