From 35fcbfe853bec8438b5cbb15bf5c8d048d698e01 Mon Sep 17 00:00:00 2001 From: zhw2590582 Date: Sun, 28 Nov 2021 15:26:35 +0800 Subject: [PATCH] update docs --- .../artplayer-document/docs/en/Advance.md | 656 +++++++++++ packages/artplayer-document/docs/en/Class.md | 135 +++ .../artplayer-document/docs/en/Events.mdx | 310 +++++ .../artplayer-document/docs/en/Libraries.md | 123 ++ .../artplayer-document/docs/en/Options.md | 1028 +++++++++++++++++ .../artplayer-document/docs/en/Overview.md | 281 ++++- .../artplayer-document/docs/en/Properties.md | 702 +++++++++++ .../Create button in the controls.md | 27 + .../Create selector in the controls.md | 38 + .../docs/en/Questions/_category_.json | 5 + .../artplayer-document/docs/zh-cn/Overview.md | 2 +- 11 files changed, 3253 insertions(+), 54 deletions(-) create mode 100644 packages/artplayer-document/docs/en/Advance.md create mode 100644 packages/artplayer-document/docs/en/Class.md create mode 100644 packages/artplayer-document/docs/en/Events.mdx create mode 100644 packages/artplayer-document/docs/en/Libraries.md create mode 100644 packages/artplayer-document/docs/en/Options.md create mode 100644 packages/artplayer-document/docs/en/Properties.md create mode 100644 packages/artplayer-document/docs/en/Questions/Create button in the controls.md create mode 100644 packages/artplayer-document/docs/en/Questions/Create selector in the controls.md create mode 100644 packages/artplayer-document/docs/en/Questions/_category_.json diff --git a/packages/artplayer-document/docs/en/Advance.md b/packages/artplayer-document/docs/en/Advance.md new file mode 100644 index 000000000..688b9cb51 --- /dev/null +++ b/packages/artplayer-document/docs/en/Advance.md @@ -0,0 +1,656 @@ +--- +title: 高级属性 +sidebar_position: 4 +slug: /advance +--- + +:::tip 提示 + +这页面是对常用属性的一些额外补充，需要深入开发自定义功能时才需要阅读 + +::: + +## id + +- 类型: `Number` + +播放器实例的一个自增编号 + +## option + +- 类型: `Object` + +播放器实例经合并后的参数对象 + +## isFocus + +- 类型: `Boolean` + +播放器实例是否获得了焦点，如最后被用户点击过 + +## isDestroy + +- 类型: `Boolean` + +播放器实例是否被销毁 + +## userAgent + +- 类型: `Boolean` + +等于 `window.navigator.userAgent` + +## isMobile + +- 类型: `Boolean` + +当前环境是否移动设备 + +## isWechat + +- 类型: `Boolean` + +当前环境是否微信设备 + +## whitelist + +- 类型: `Object` + +管理白名单的对象 + +## template + +- 类型: `Object` + +管理播放器 `Html` 的对象 + +方法 `query` 可以查找当前播放器实例内的 dom 元素，等同于 `document.querySelector('.artplayer-app').querySelector` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + var $video = art.template.query('.art-video'); + console.info($video); +}); +``` + +## query + +- 类型: `Function` + +等于 `art.template.query` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + var $video = art.query('.art-video'); + console.info($video); +}); +``` + +## storage + +- 类型: `Object` + +管理持久化存储的对象 + +播放器会自动添加一个名为 `artplayer_settings` 的 JSON 对象到的 `localStorage` 里 + +| 属性 | 类型 | 描述 | +| ------- | ---------- | -------- | +| `get` | `Function` | 获取值 | +| `set` | `Function` | 设置值 | +| `del` | `Function` | 删除值 | +| `clean` | `Function` | 清空对象 | + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.storage.set('your-key', 'your-value'); +art.storage.get('your-key'); +art.storage.del('your-key'); +art.storage.clean(); +``` + +## icons + +- 类型: `Object` + +管理图标的对象 + +## i18n + +- 类型: `Object` + +管理多语言的对象 + +方法 `get` 可以获取到对应的语言的值 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(art.i18n.get('Play')); +}); +``` + +方法 `update` 可以动态添加更多语言 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + lang: 'jp', +}); + +art.i18n.update({ + 'zh-cn': { + Language: '简体', + }, + 'zh-tw': { + Language: '繁體', + }, + en: { + Language: 'English', + }, + jp: { + Language: '日文', + }, + fr: { + Language: 'Français', + }, + ru: { + Language: 'Russe', + }, +}); +``` + +## player + +- 类型: `Object` + +管理核心功能的对象，所以属性和方法都代理到播放器实例上了 + +## subtitle + +- 类型: `Object` + +管理字幕的对象 + +方法 `style` 可以动态修改字幕样式 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + subtitle: { + url: '/assets/sample/subtitle.srt', + encoding: 'utf-8', + bilingual: true, + style: { + color: '#03A9F4', + 'font-size': '30px', + }, + }, +}); + +art.on('ready', () => { + art.seek = 20; + setTimeout(() => { + art.subtitle.style({ + color: 'red', + 'font-size': '40px', + }); + }, 3000); +}); +``` + +方法 `switch` 可以动态修改字幕地址 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + subtitle: { + url: '/assets/sample/subtitle.srt', + encoding: 'utf-8', + bilingual: true, + style: { + color: '#03A9F4', + 'font-size': '30px', + }, + }, +}); + +art.on('ready', () => { + art.seek = 20; + setTimeout(() => { + art.subtitle.switch('/assets/sample/subtitle.srt'); + }, 3000); +}); +``` + +## info + +- 类型: `Object` + +管理统计信息的对象 + +## layers + +- 类型: `Object` + +管理业务层的对象 + +属性 `show` 可以控制全部图层是否显示 + +
▶ Run Code
+ +```js +var img = '/assets/sample/layer.png'; +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + layers: [ + { + html: ``, + style: { + position: 'absolute', + top: '20px', + right: '20px', + opacity: '.9', + }, + }, + ], +}); + +art.on('ready', () => { + setTimeout(() => { + art.layers.show = false; + }, 3000); +}); +``` + +方法 `add` 可以动态添加业务层 + +| 属性 | 类型 | 描述 | +| --------- | ------------------- | -------------------------- | +| `disable` | `Boolean` | 是否禁用组件 | +| `name` | `String` | 组件唯一名称，用于标记类名 | +| `index` | `Number` | 组件索引，用于显示的优先级 | +| `html` | `String`、`Element` | 组件的 DOM 元素 | +| `style` | `Object` | 组件样式对象 | +| `click` | `Function` | 组件点击事件 | +| `mounted` | `Function` | 组件挂载后触发 | +| `tooltip` | `String` | 组件的提示文本 | + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +var img = '/assets/sample/layer.png'; +art.on('ready', () => { + setTimeout(() => { + art.layers.add({ + html: ``, + style: { + position: 'absolute', + top: '20px', + right: '20px', + opacity: '.9', + }, + }); + }, 3000); +}); +``` + +## notice + +- 类型: `Object` + +管理提示信息的对象 + +属性 `show` 输出自定义提示信息，默认停留时间为两秒，且新的信息会马上覆盖旧的信息 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.notice.show = '自定义提示信息1'; + art.notice.show = '自定义提示信息2'; +}); +``` + +## controls + +- 类型: `Object` + +管理业务层的对象 + +属性 `show` 可以控制控制栏是否显示 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + setTimeout(() => { + art.controls.show = false; + }, 3000); +}); +``` + +方法 `add` 可以动态添加控制器 + +| 属性 | 类型 | 描述 | +| ---------- | ------------------- | -------------------------- | +| `disable` | `Boolean` | 是否禁用组件 | +| `name` | `String` | 组件唯一名称，用于标记类名 | +| `index` | `Number` | 组件索引，用于显示的优先级 | +| `html` | `String`、`Element` | 组件的 DOM 元素 | +| `style` | `Object` | 组件样式对象 | +| `click` | `Function` | 组件点击事件 | +| `mounted` | `Function` | 组件挂载后触发 | +| `tooltip` | `String` | 组件的提示文本 | +| `position` | `String` | 位置在 `left` 或者 `right` | + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + setTimeout(() => { + art.controls.add({ + position: 'right', + index: 10, + html: '自定义按钮', + tooltip: '自定义按钮的提示', + click: function () { + console.log('你点击了自定义按钮'); + }, + }); + }, 3000); +}); +``` + +## contextmenu + +- 类型: `Object` + +管理右键菜单的对象 + +属性 `show` 可以控制菜单是否显示 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.contextmenu.show = true; + setTimeout(() => { + art.contextmenu.show = false; + }, 3000); +}); +``` + +方法 `add` 可以动态添加菜单项 + +| 属性 | 类型 | 描述 | +| --------- | ------------------- | -------------------------- | +| `disable` | `Boolean` | 是否禁用组件 | +| `name` | `String` | 组件唯一名称，用于标记类名 | +| `index` | `Number` | 组件索引，用于显示的优先级 | +| `html` | `String`、`Element` | 组件的 DOM 元素 | +| `style` | `Object` | 组件样式对象 | +| `click` | `Function` | 组件点击事件 | +| `mounted` | `Function` | 组件挂载后触发 | +| `tooltip` | `String` | 组件的提示文本 | + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.contextmenu.show = true; + setTimeout(() => { + art.contextmenu.add({ + html: '自定义菜单', + click: function () { + console.info('你点击了自定义菜单'); + art.contextmenu.show = false; + }, + }); + }, 3000); +}); +``` + +## loading + +- 类型: `Object` + +管理提示信息的对象 + +属性 `show` 可以控制菜单是否加载层 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.loading.show = true; + setTimeout(() => { + art.loading.show = false; + }, 3000); +}); +``` + +## mask + +- 类型: `Object` + +管理遮罩层的对象 + +属性 `show` 可以控制遮罩层是否加载层 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.mask.show = true; + setTimeout(() => { + art.mask.show = false; + }, 3000); +}); +``` + +## hotkey + +- 类型: `Object` + +管理快捷键的对象 + +方法 `add` 可以动态添加快捷键，第一个参数是 `key code` 数字，第二个参数是回调函数 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.hotkey.add(65, () => { + console.info('你点击了 A 键'); + }); + + art.hotkey.add(66, () => { + console.info('你点击了 B 键'); + }); +}); +``` + +:::tip 提示 + +只在播放器获得焦点后（如点击了播放器后），该快捷键才会生效 + +::: + +## setting + +- 类型: `Object` + +管理设置面板的对象 + +属性 `show` 可以控制设置面板是否显示 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + autoSize: true, +}); + +art.on('ready', () => { + art.seek = 20; + art.setting.show = true; + setTimeout(() => { + art.setting.show = false; + }, 3000); +}); +``` + +方法 `add` 可以动态添加设置项 + +| 属性 | 类型 | 描述 | +| --------- | ------------------- | -------------------------- | +| `disable` | `Boolean` | 是否禁用组件 | +| `name` | `String` | 组件唯一名称，用于标记类名 | +| `index` | `Number` | 组件索引，用于显示的优先级 | +| `html` | `String`、`Element` | 组件的 DOM 元素 | +| `style` | `Object` | 组件样式对象 | +| `click` | `Function` | 组件点击事件 | +| `mounted` | `Function` | 组件挂载后触发 | +| `tooltip` | `String` | 组件的提示文本 | + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + autoSize: true, +}); + +art.on('ready', () => { + art.seek = 20; + art.setting.show = true; + art.setting.add({ + html: '自定义设置', + click: function () { + console.info('你点击了自定义设置'); + art.setting.show = false; + }, + }); +}); +``` + +## plugins + +- 类型: `Object` + +管理插件的对象 + +方法 `add` 可以动态添加插件 + +
▶ Run Code
+ +```js +function myPlugin(art) { + console.info('你可以在插件里访问到播放器的实例'); + return { + name: 'myPlugin', + something: '自定义导出的属性', + doSomething: function () { + console.info('自定义导出的方法'); + }, + }; +} + +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.plugins.add(myPlugin); + console.info(art.plugins.myPlugin.something); + console.info(art.plugins.myPlugin.doSomething()); +}); +``` diff --git a/packages/artplayer-document/docs/en/Class.md b/packages/artplayer-document/docs/en/Class.md new file mode 100644 index 000000000..9ae4a13b4 --- /dev/null +++ b/packages/artplayer-document/docs/en/Class.md @@ -0,0 +1,135 @@ +--- +title: 静态属性 +sidebar_position: 5 +slug: /class +--- + +:::tip 提示 + +静态属性存在于构造函数 `Artplayer` 上，和播放器实例没有直接关联 + +::: + +## instances + +- 类型: `Array` + +一个保存了所有播放器实例的数组，当单个页面同时存在多个播放器时，可以通过这个属性进行管理多个实例 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(Artplayer.instances.length) +}) +``` + +## version + +- 类型: `String` + +当前播放器版本号 + +
▶ Run Code
+ +```js +console.info(Artplayer.version) +``` + +## env + +- 类型: `String` + +当前播放器环境变量 + +
▶ Run Code
+ +```js +console.info(Artplayer.env) +``` + +## utils + +- 类型: `Object` + +播放器的常用工具集 + +
▶ Run Code
+ +```js +console.info(Object.keys(Artplayer.utils)) +``` + +## config + +- 类型: `Object` + +存放了播放器的原生属性和方法 + +
▶ Run Code
+ +```js +console.info(Artplayer.config) +``` + +## scheme + +- 类型: `Object` + +播放器参数的校验方案 + +
▶ Run Code
+ +```js +console.info(Artplayer.scheme) +``` + +## validator + +- 类型: `Function` + +播放器参数的校验器 + +## option + +- 类型: `Object` + +播放器默认参数 + +
▶ Run Code
+ +```js +console.info(Artplayer.option) +``` + +## html + +- 类型: `String` + +播放器默认 `Html` 字符串，通常用于 `SSR` 的提前渲染，更多信息请访问 [配合SSR使用](/document/zh-cn/Questions/ssr) + +
▶ Run Code
+ +```js +console.info(Artplayer.html) +``` + +## kindOf + +- 类型: `Function` + +JS类型识别函数 + +
▶ Run Code
+ +```js +console.info(Artplayer.kindOf('0')) +console.info(Artplayer.kindOf(0)) +console.info(Artplayer.kindOf({})) +console.info(Artplayer.kindOf([])) +``` \ No newline at end of file diff --git a/packages/artplayer-document/docs/en/Events.mdx b/packages/artplayer-document/docs/en/Events.mdx new file mode 100644 index 000000000..970efc1c1 --- /dev/null +++ b/packages/artplayer-document/docs/en/Events.mdx @@ -0,0 +1,310 @@ +--- +title: 实例事件 +sidebar_position: 6 +slug: /events +--- + +播放器的事件分为两种，一种视频的原生事件，另外一种是自定义的事件。原生事件来自 `video` 元素，是直接监听`video`元素的原始事件，为了让它和自定义事件区分，原生事件添加了前缀 `video:` + +## 原生事件 + +更多信息请阅读 [Mozilla Video Events](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events) + +| 事件名字 | 触发时间 | +| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `video:canplay` | The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. | +| `video:canplaythrough` | The browser estimates it can play the media up to its end without stopping for content buffering. | +| `video:complete` | The rendering of an OfflineAudioContext is terminated. | +| `video:durationchange` | The duration attribute has been updated. | +| `video:emptied` | The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. | +| `video:ended` | Playback has stopped because the end of the media was reached. | +| `video:loadeddata` | The first frame of the media has finished loading. | +| `video:loadedmetadata` | The metadata has been loaded. | +| `video:pause` | Playback has been paused. | +| `video:play` | Playback has begun. | +| `video:playing` | Playback is ready to start after having been paused or delayed due to lack of data. | +| `video:progress` | Fired periodically as the browser loads a resource. | +| `video:ratechange` | The playback rate has changed. | +| `video:seeked` | A seek operation completed. | +| `video:seeking` | A seek operation began. | +| `video:stalled` | The user agent is trying to fetch media data, but data is unexpectedly not forthcoming. | +| `video:suspend` | Media data loading has been suspended. | +| `video:timeupdate` | The time indicated by the currentTime attribute has been updated. | +| `video:volumechange` | The volume has changed. | +| `video:waiting` | Playback has stopped because of a temporary lack of data | + +## 自定义事件 + +### ready + +当实例初始化完成，并视频可以被播放时触发，只会触发一个，哪怕视频地址变化了 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', (...args) => { + console.info(args); +}); +``` + +### play + +在视频被播放后触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('play', (...args) => { + console.info(args); +}); +``` + +### pause + +在视频被暂停后触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('pause', (...args) => { + console.info(args); +}); +``` + +### seek + +在视频进行时间跳转时触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('seek', (...args) => { + console.info(args); +}); + +art.on('ready', (...args) => { + art.seek = 5; +}); +``` + +### volume + +在视频音量变化时触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('volume', (...args) => { + console.info(args); +}); + +art.on('ready', (...args) => { + art.volume = 0.5; +}); +``` + +### destroy + +在播放器实例被销毁时触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('destroy', (...args) => { + console.info(args); +}); + +art.on('ready', (...args) => { + art.destroy(); +}); +``` + +### focus + +在播放器获得焦点时触发，如点击了播放器 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('focus', (...args) => { + console.info(args); +}); +``` + +### blur + +在播放器失去焦点时触发，如点击播放器以外的区域 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('blur', (...args) => { + console.info(args); +}); +``` + +### hover + +在鼠标移动进播放器时触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('hover', (...args) => { + console.info(args); +}); +``` + +### resize + +在播放器尺寸变化时触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoSize: true, +}); + +art.on('resize', (...args) => { + console.info(args); +}); +``` + +### mousemove + +在鼠标经过播放器时触发，和`hover`不一样，它会触发多次 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('mousemove', (...args) => { + console.info(args); +}); +``` + +### url + +在视频地址变化时触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('url', (...args) => { + console.info(args); +}); + +art.on('ready', (...args) => { + art.url = '/assets/sample/video.mp4?t=0'; +}); +``` + +### fullscreen + +在播放器窗口全屏时触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreen: true, +}); + +art.on('fullscreen', (...args) => { + console.info(args); +}); +``` + +### fullscreenWeb + +在播放器网页全屏时触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreenWeb: true, +}); + +art.on('fullscreenWeb', (...args) => { + console.info(args); +}); +``` + +### hotkey + +在快捷键被使用时触发 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('hotkey', (...args) => { + console.info(args); +}); +``` diff --git a/packages/artplayer-document/docs/en/Libraries.md b/packages/artplayer-document/docs/en/Libraries.md new file mode 100644 index 000000000..8f5104c22 --- /dev/null +++ b/packages/artplayer-document/docs/en/Libraries.md @@ -0,0 +1,123 @@ +--- +title: 第三方库 +sidebar_position: 7 +slug: /libraries +--- + +## flv.js + +- 主页: [https://github.com/Bilibili/flv.js](https://github.com/Bilibili/flv.js) + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + autoplay: true, + url: '/assets/sample/video.flv', + customType: { + flv: function (video, url) { + const flvPlayer = flvjs.createPlayer({ + type: 'flv', + url: url, + }); + flvPlayer.attachMediaElement(video); + flvPlayer.load(); + }, + }, +}); +``` + +## hls.js + +- 主页: [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js) + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + autoplay: true, + url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', + customType: { + m3u8: function (video, url) { + var hls = new Hls(); + hls.loadSource(url); + hls.attachMedia(video); + }, + }, +}); +``` + +## dash.js + +- 主页: [https://github.com/Dash-Industry-Forum/dash.js](https://github.com/Dash-Industry-Forum/dash.js) + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + autoplay: true, + url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd', + customType: { + mpd: function (video, url) { + var player = dashjs.MediaPlayer().create(); + player.initialize(video, url, true); + }, + }, +}); +``` + +## shaka-player + +- 主页: [https://github.com/google/shaka-player](https://github.com/google/shaka-player) + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + autoplay: true, + url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd', + customType: { + mpd: function (video, url) { + shaka.polyfill.installAll(); + var player = new shaka.Player(video); + player.load(url); + }, + }, +}); +``` + +## webtorrent + +- 主页: [https://github.com/webtorrent/webtorrent](https://github.com/webtorrent/webtorrent) + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + autoplay: true, + url: + 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4', + type: 'torrent', + customType: { + torrent: function (video, url, art) { + var client = new WebTorrent(); + art.loading.show = true; + client.add(url, function (torrent) { + var file = torrent.files[0]; + file.renderTo(video, { + autoplay: true, + }); + }); + }, + }, +}); + +art.on('ready', () => { + art.template.$video.controls = false; +}); +``` diff --git a/packages/artplayer-document/docs/en/Options.md b/packages/artplayer-document/docs/en/Options.md new file mode 100644 index 000000000..6487ad03b --- /dev/null +++ b/packages/artplayer-document/docs/en/Options.md @@ -0,0 +1,1028 @@ +--- +title: Basic options +sidebar_position: 2 +slug: /options +--- + +## container + +- Type: `String、Element` +- Default: `#artplayer` +- Required: `Yes` + +The dom container mounted by the player must have a size, otherwise the player cannot display + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + // container: document.querySelector('.artplayer-app'), + url: '/assets/sample/video.mp4', +}); +``` + +You may need to initialize the size of the container element, such as: + +```css +.artplayer-app { + width: 400px; + height: 300px; +} +``` + +## url + +- Type: `String` +- Default: `''` +- Required: `Yes` + +Video source address, default support three video file formats: `.mp4`、`.ogg`、`.webm` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); +``` + +## poster + +- Type: `String` +- Default: `''` + +The poster of the video will only appear in a state in which the player is initialized and not played. + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + poster: '/assets/sample/poster.jpg', +}); +``` + +## title + +- Type: `String` +- Default: `''` + +Video headings, currently appear in video screenshots and mini mode + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + title: '【新海诚动画】『秒速5センチメートル』', + screenshot: true, +}); +``` + +## theme + +- Type: `String` +- Default: `#f00` + +Player theme color, currently only on the progress bar + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + theme: '#ffad00', +}); +``` + +## volume + +- Type: `Number` +- Default: `0.7` + +Default volume of the player + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + volume: 0.5, +}); +``` + +:::tip Tip + +The player caches the size of the last volume, when the next initialization (such as refreshing the page) player reads the cache value + +::: + +## isLive + +- Type: `Boolean` +- Default: `false` + +Use live mode, hide progress bar and play time + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + isLive: true, +}); +``` + +## muted + +- Type: `Boolean` +- Default: `false` + +Whether the default mute + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + muted: true, +}); +``` + +## autoplay + +- Type: `Boolean` +- Default: `false` + +Whether automatic play + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoplay: true, + muted: true, +}); +``` + +:::tip Tip + +If you want the default to enter the page, you can automatically play the video, `muted` must be `true`, more information, please read [Autoplay Policy Changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes) + +::: + +## autoSize + +- Type: `Boolean` +- Default: `false` + +The size of the player will populate the entire `container` size, so there is often a black edge, the option can automatically adjust the player size to hide the black side. + +
▶ Run Code
+ +```js +// Zoom browser window View effect +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoSize: true, +}); +``` + +## autoMini + +- Type: `Boolean` +- Default: `false` + +When the player scrolls outside the browser viewport, automatically enter the mini play mode + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoMini: true, +}); +``` + +## loop + +- Type: `Boolean` +- Default: `false` + +Whether loop playing + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + loop: true, +}); +``` + +## flip + +- Type: `Boolean` +- Default: `false` + +Whether to display a video flip function, currently appear in the `setting panel`, so you need to set up `setting` is True + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + flip: true, + setting: true, +}); +``` + +## rotate + +- Type: `Boolean` +- Default: `false` + +Whether to display a video rotation function, you need to set the `setting` and `autoSize` for `true` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + rotate: true, + setting: true, + autoSize: true, +}); +``` + +## playbackRate + +- Type: `Boolean` +- Default: `false` + +Whether the video playback speed function is displayed, it will appear in the setting panel and contextmenu + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + playbackRate: true, + setting: true, +}); +``` + +## aspectRatio + +- Type: `Boolean` +- Default: `false` + +Whether to display video long aspect ratio, it will appear in the setting panel and contextmenu + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + aspectRatio: true, + setting: true, +}); +``` + +## screenshot + +- Type: `Boolean` +- Default: `false` + +Whether to display video screenshots in the bottom control bar + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + screenshot: true, + // Optional + moreVideoAttr: { + crossOrigin: 'anonymous', + }, +}); +``` + +:::tip Tip + +Because browser security mechanisms, if video source addresses and websites are cross-domain, screenshot failed + +::: + +## setting + +- Type: `Boolean` +- Default: `false` + +Whether to display the setting panel of the switch button in the bottom control bar + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, +}); +``` + +## hotkey + +- Type: `Boolean` +- Default: `true` + +Whether to use shortcut keys + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + hotkey: true, +}); +``` + +| hotkey | describe | +| ------- | ----------------------- | +| `↑` | Increasing volume | +| `↓` | lower the volume | +| `←` | Fast forward 5 seconds | +| `→` | Fast backward 5 seconds | +| `space` | Switch play / pause | + +:::tip Tip + +This hotkey will take effect only after the player gets the focus (if you click on the player). + +::: + +## pip + +- Type: `Boolean` +- Default: `false` + +Whether to display the PIP switch button in the bottom control bar + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + pip: true, +}); +``` + +## mutex + +- Type: `Boolean` +- Default: `true` + +If there are multiple players on the page at the same time, can only one player be allowed to play + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + mutex: true, +}); +``` + +## fullscreen + +- Type: `Boolean` +- Default: `false` + +Whether to display the full screen button of the player window in the bottom control bar + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreen: true, +}); +``` + +## fullscreenWeb + +- Type: `Boolean` +- Default: `false` + +Whether to display the full screen button of the player webpage in the bottom control bar + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreenWeb: true, +}); +``` + +## subtitleOffset + +- Type: `Boolean` +- Default: `false` + +Subtitle time offset, in the range `[-5s, 5s]` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + subtitle: { + url: '/assets/sample/subtitle.srt', + }, + setting: true, + subtitleOffset: true, +}); +``` + +## miniProgressBar + +- Type: `Boolean` +- Default: `false` + +Mini progress bar, only appears when the player loses focus and is playing + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + miniProgressBar: true, +}); +``` + +## localVideo + +- Type: `Boolean` +- Default: `false` + +To open a local video, you need to use the `art.plugins.localVideo.attach` method to mount the open video button + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + localVideo: true, + controls: [ + { + name: 'preview', + position: 'right', + html: 'Open video', + mounted: ($preview) => { + art.plugins.localVideo.attach($preview); + }, + }, + ], +}); +``` + +## localSubtitle + +- Type: `Boolean` +- Default: `false` + +To open local subtitles, you need to use the `art.plugins.localSubtitle.attach` method to mount the open subtitle button + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + localSubtitle: true, + controls: [ + { + name: 'preview', + position: 'right', + html: 'Open subtitle', + mounted: ($preview) => { + art.plugins.localSubtitle.attach($preview); + }, + }, + ], +}); +``` + +## useSSR + +- Type: `Boolean` +- Default: `false` + +Whether to use SSR mounting mode, it is useful if you want to render the HTML required by the player in advance before mounting the player + +You can access the HTML required by the player through Artplayer.html + +
▶ Run Code
+ +```js +var $container = document.querySelector('.artplayer-app'); +$container.innerHTML = Artplayer.html; + +var art = new Artplayer({ + container: $container, + url: '/assets/sample/video.mp4', + useSSR: true, +}); +``` + +:::tip Tip + +SSR is the abbreviation of Server Side Render. The content on the page is generated by server side rendering, and the browser directly displays the HTML returned by the server side. + +::: + +## layers + +- Type: `Array` +- Default: `[]` + +Initialize a custom layers + +| Property | Type | Description | +| --------- | ------------------- | ------------------------------------------------------------- | +| `disable` | `Boolean` | Whether to disable the component | +| `name` | `String` | The unique name of the component, used to mark the class name | +| `index` | `Number` | Component index, priority for display | +| `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` | Prompt text of the component | + +
▶ Run Code
+ +```js +var img = '/assets/sample/layer.png'; +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + layers: [ + { + index: 1, + name: 'potser', + disable: false, + html: ``, + style: { + position: 'absolute', + top: '20px', + right: '20px', + opacity: '.9', + }, + click: function (...args) { + console.info('You click on the component'); + art.layers.show = false; + }, + mounted: function (...args) { + console.info('Component mount completion'); + }, + }, + ], +}); +``` + +## contextmenu + +- Type: `Array` +- Default: `[]` + +Initialize custom contextmenu + +| Property | Type | Description | +| --------- | ------------------- | ------------------------------------------------------------- | +| `disable` | `Boolean` | Whether to disable the component | +| `name` | `String` | The unique name of the component, used to mark the class name | +| `index` | `Number` | Component index, priority for display | +| `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` | Prompt text of the component | + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + contextmenu: [ + { + html: 'Custom menu', + click: function () { + console.info('You clicked the custom menu'); + art.contextmenu.show = false; + }, + }, + ], +}); + +art.on('ready', () => { + art.contextmenu.show = true; +}); +``` + +## controls + +- Type: `Array` +- Default: `[]` + +Initialize the customized bottom control bar + +| Property | Type | Description | +| ---------- | ------------------- | ------------------------------------------------------------- | +| `disable` | `Boolean` | Whether to disable the component | +| `name` | `String` | The unique name of the component, used to mark the class name | +| `index` | `Number` | Component index, priority for display | +| `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` | Prompt text of the component | +| `position` | `String` | Location at `left` or `right` | + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + controls: [ + { + disable: false, + name: 'button', + index: 10, + position: 'right', + html: 'Custom button1', + tooltip: 'Custom button1', + style: { + color: 'red', + }, + click: function () { + console.log('You clicked custom button 1'); + }, + mounted: function () { + console.log('Custom button mounting is complete 1'); + }, + }, + { + position: 'left', + html: 'Custom button2', + tooltip: 'Custom button2', + style: { + color: 'green', + }, + click: function () { + console.log('You clicked custom button 2'); + }, + }, + ], +}); +``` + +## quality + +- Type: `Array` +- Default: `[]` + +Whether to display the quality selection list in the bottom control bar + +| Property | Type | Description | +| --------- | --------- | --------------- | +| `default` | `Boolean` | Default quality | +| `html` | `String` | Quality name | +| `url` | `String` | Quality address | + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + quality: [ + { + default: true, + html: 'SD 480P', + url: '/assets/sample/video.mp4', + }, + { + html: 'HD 720P', + url: '/assets/sample/video.mp4', + }, + ], +}); +``` + +## highlight + +- Type: `Array` +- Default: `[]` + +Show highlighted information points on the progress bar + +| Property | Type | Description | +| -------- | -------- | ----------------------------- | +| `time` | `Number` | Highlight time (unit seconds) | +| `text` | `String` | Highlight text | + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + highlight: [ + { + time: 60, + text: 'One more chance', + }, + { + time: 120, + text: '谁でもいいはずなのに', + }, + { + time: 180, + text: '夏の想い出がまわる', + }, + { + time: 240, + text: 'こんなとこにあるはずもないのに', + }, + { + time: 300, + text: '－－终わり－－', + }, + ], +}); +``` + +## plugins + +- Type: `Array` +- Default: `[]` + +Initialization custom plugins + +
▶ Run Code
+ +```js +function myPlugin(art) { + console.info('You can access an instance of a player in the plugin'); + return { + name: 'myPlugin', + something: 'Custom export properties', + doSomething: function () { + console.info('Custom export method'); + }, + }; +} + +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + plugins: [myPlugin], +}); + +art.on('ready', () => { + console.info(art.plugins.myPlugin.something); + console.info(art.plugins.myPlugin.doSomething()); +}); +``` + +## whitelist + +- Type: `Array` +- Default: `[]` + +Because there are a variety of differences and restrictions in different mobile devices, this player is mount video by default on mobile devices. If you want to use this player on mobile devices, you need to manually open white list. + +The whitelist is an array type, which matches the `window.navigator.userAgent`, as long as one of the match is successful, enable the player + +Support `string` match, `function` match, `regular` match + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + whitelist: ['iPhone OS 11'], + // whitelist: ['*'], + // whitelist: [(ua) => /iPhone OS 11/gi.test(ua)], + // whitelist: [/iPhone OS 11/gi] +}); +``` + +:::tip Tip + +If you want all types of mobile devices to enable players, set the whitelist to wildcard: `['*']` + +::: + +## thumbnails + +- Type: `Object` +- Default: `{}` + +Set a preview map on the progress bar + +| Property | Type | Description | +| -------- | -------- | -------------- | +| `url` | `String` | Preview url | +| `number` | `Number` | Preview number | +| `width` | `Number` | Preview width | +| `height` | `Number` | Preview height | +| `column` | `Number` | Preview column | + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + thumbnails: { + url: '/assets/sample/thumbnails.png', + number: 100, + width: 160, + height: 90, + column: 10, + }, +}); +``` + +## subtitle + +- Type: `Object` +- Default: `{}` + +Set the subtitles of the video, support subtitles format: `vtt`、`srt`、`ass` + +| Property | Type | Description | +| ----------- | --------- | ------------------------------------------------------ | +| `url` | `String` | Subtitle url | +| `style` | `Object` | Subtitle style | +| `encoding` | `String` | Subtitle encoding, default `utf-8` | +| `bilingual` | `Boolean` | Whether the double subtitle style is divided by a wrap | + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + subtitle: { + url: '/assets/sample/subtitle.srt', + encoding: 'utf-8', + bilingual: true, + style: { + color: '#03A9F4', + 'font-size': '30px', + }, + }, +}); +``` + +## moreVideoAttr + +- Type: `Object` +- Default: `{'controls': false,'preload': 'metadata'}` + +More video properties, these properties will be written directly into video elements + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + moreVideoAttr: { + 'webkit-playsinline': true, + playsInline: true, + }, +}); +``` + +## icons + +- Type: `Object` +- Default: `{}` + +Used to replace the default icon, support `HTML` string + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + icons: { + loading: '', + state: '', + play: '', + pause: '', + volume: '', + volumeClose: '', + subtitle: '', + screenshot: '', + setting: '', + fullscreen: '', + fullscreenWeb: '', + pip: '', + }, +}); +``` + +## type + +- Type: `String` +- Default: `''` + +Used to specify the format of the video, you need to use the CustomType to use, please visit [Libraries](/document/libraries) + +The default video format is the suffix of video addresses (such as .flv,.mkv, .ts), but sometimes video address does not have the correct suffix, so it is necessary to specify + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.flv', + type: 'flv', +}); +``` + +## customType + +- Type: `Object` +- Default: `{}` + +Match by the format of the video, hand over video decoding to third party programs, please visit [Libraries](/document/libraries) + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.flv', + customType: { + flv: function (video, url, art) { + // video: Video DOM element + // url: Video url + // art: Current instance + }, + }, +}); +``` + +## lang + +- Type: `String` +- Default: `navigator.language.toLowerCase()` + +Default display language, currently support: `en`、`zh-cn`、`zh-tw` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + lang: 'en', +}); +``` diff --git a/packages/artplayer-document/docs/en/Overview.md b/packages/artplayer-document/docs/en/Overview.md index eaf2ee917..f65b2f6fb 100644 --- a/packages/artplayer-document/docs/en/Overview.md +++ b/packages/artplayer-document/docs/en/Overview.md @@ -1,72 +1,247 @@ --- -title: Overview +title: Quick start sidebar_position: 1 slug: / --- -## Integration Guides +## Install -- Require confirmation from AWDA to implement to production after complete UAT for all services. +### Install by `npm`: -- You can use API tools to test some services during your development。 +```bash +$ npm install artplayer +``` -- You can check the response code or contact us when you have problems during the testing +### Install by `yarn`: -- All services using POST method to send request（Including Inquiry） +```bash +$ yarn add artplayer +``` -- All requests and responses are JSON format. NOTE: Header Content-Type -> application/json UTF-8 encoding +Then load the `Artplayer` module: -- All requests require signature +```js +// ES6 +import Artplayer from 'artplayer'; -## Document Change Control +// CommonJS +const Artplayer = require('artplayer'); +``` -| Version | Date | Authors | Summary of changes | -| ------- | ---------- | ------- | -------------------- | -| 1.0.0 | 2019.06.03 | ZHIBO | Thumbnails image url | +### Install by `script`: -## API Summary +```html + + -| **Service name** | **Description** | -| -----------------| --------------- | -| user registration|

Provider : AWDA

User : Third party

Mandatory : YES

Description : All other services can be used only after user registration success

| -| Authorization list inquiry|

Provider : AWDA

User : Third party

Mandatory : NO

Description : Get the authorization list and check the authorization status

| -| Get the authorization detail page|

Provider : AWDA

User : Third party

Mandatory : NO

Description : Customer complete the authorization in the pages

-| Call back for authorization status|

Provider : AWDA

User : Third party

Mandatory : NO

Description : To receive the authorization status

| -| Bank card inquiry|

Provider : AWDA

User : Third party

Mandatory : YES

Description : To inquiry bank card status

| -| Get bank list|

Provider : AWDA

User : Third party

Mandatory : YES

Description : Get the bank list for bank card input

| -| Bank card verification|

Provider : AWDA

User : Third party

Mandatory : YES

Description : Verify and submit bank card

| -| Submit loan|

Provider : AWDA

User : Third party

Mandatory : YES

Description : Submit loan info, including (personal info, work info and emergency contact)

| -| Loan agreement inquiry|

Provider : AWDA

User : Third party

Mandatory : YES

Description : Get loan agreement

| -| Sign agreement|

Provider : AWDA

User : Third party

Mandatory : YES

Description : Sign agreement (Confirm disbursement)

| -| Get loan information|

Provider : AWDA

User : Third party

Mandatory : YES

Description : Get loan info based on loan number (include repayment schedule if disbursed)

| -| Get repayment VA|

Provider : AWDA

User : Third party

Mandatory : YES

Description : Get the repayment VA

| -| Push notification|

Provider: Third party

User : AWDA

Mandatory: NO

Description : Push the loan status update to Third party

| -| Eligible Check|

Provider : AWDA

User : Third party

Mandatory : YES

Description : Verify Customer

| -| Get the token for uploading image|

Provider : AWDA

User : Third party

Mandatory : NO

Description : To get the token which used for api Upload Image (1)

| -| Upload Image (1)|

Provider : AWDA

User : Third party

Mandatory : NO

Description : By sending file stream with token

| -| Upload Image (2)|

Provider : AWDA

User : Third party

Mandatory : NO

Description : By sending base64 or url format

| -| Get the redirect url
(For H5 pages of Digital Signature, Loan detail and Repayment detail) |

Provider : AWDA

User : Third party

Mandatory : NO

Description : Redirect to the specific H5 pages

| + + -## Environment information + + +``` -- Testing environment：`https://sea-staging.wolaidai.com` -- Production environment：`https://japi.maucash.id` -- Note: All APIs URL will be environment `url` + `service url` +Then you can access the constructor via `window.ArtPlayer` -## List Of Response Code -| Code|Description| -| ----|----| -| 0 | Success| -| 1000| System is busy| -| 1001| Repeat request| -| 1002| Unvalid token| -| 1003| Timestamp error or expired (only valid within 60s)| -| 1004| Signature error| -| 1005| appId invalid| -| 1006| Parameters cannot be empty| -| 1007| Parameters error| -| 1008| User already existed| -| 1009| User not found| -| 1010| Loan not found| -| 1012| Authorization info not found| \ No newline at end of file +## Use + +:::danger Tip + +The size of the player depends on the size of the `container`, so your `container` must have a size. + +::: + +### Use in `Html` + +```html + + + + ArtPlayer Demo + + + + +
+ + + + +``` + +### Use in `Vue` + +Create component: `Artplayer.vue` + +```js +import Artplayer from 'artplayer'; + +export default { + data() { + return { + instance: null, + }; + }, + props: { + option: { + type: Object, + required: true, + }, + getInstance: Function, + }, + mounted() { + this.instance = new Artplayer({ + ...this.option, + container: this.$refs.artRef, + }); + + this.$nextTick(() => { + this.$emit('getInstance', this.instance); + }); + }, + beforeDestroy() { + if (this.instance && this.instance.destroy) { + this.instance.destroy(); + } + }, + render(h) { + return h('div', { + ref: 'artRef', + }); + }, +}; +``` + +Import the `Artplayer.vue` component + +```jsx + + + +``` + +### Use in `React` + +Create component: `Artplayer.jsx` + +```jsx +import React from 'react'; +import Artplayer from 'artplayer'; + +export default class ArtplayerReact extends React.Component { + constructor(props) { + super(props); + this.instance = null; + this.artRef = React.createRef(); + } + + componentDidMount() { + const { option, getInstance } = this.props; + this.instance = new Artplayer({ + ...option, + container: this.artRef.current, + }); + + if (getInstance && typeof getInstance === 'function') { + getInstance(this.instance); + } + } + + componentWillUnmount() { + if (this.instance && this.instance.destroy) { + this.instance.destroy(); + } + } + + render() { + const { option, getInstance, ...rest } = this.props; + return React.createElement('div', { + ref: this.artRef, + ...rest, + }); + } +} +``` + +Import the `Artplayer.jsx` component + +```jsx +import Artplayer from "./Artplayer.jsx"; + +function App() { + return ( + console.log(ins)} + /> + ); +} +``` + +:::caution Tip + +Modifying `option` not dynamically modified ArtPlayer instances in `Vue` and `React` + +::: + +## Demo + +:::tip Tip + +In this document, by clicking the `Run Code` button before the code block, you can immediately enter the demo. + +::: + +---------------------------------------------- + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); +``` diff --git a/packages/artplayer-document/docs/en/Properties.md b/packages/artplayer-document/docs/en/Properties.md new file mode 100644 index 000000000..cba733f3f --- /dev/null +++ b/packages/artplayer-document/docs/en/Properties.md @@ -0,0 +1,702 @@ +--- +title: 常用属性 +sidebar_position: 3 +slug: /propertie +--- + +## play + +- 类型: `Function` + +播放视频 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + muted: true, +}); + +art.on('ready', () => { + art.play(); +}) +``` + +## pause + +- 类型: `Function` + +暂停视频 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + muted: true, +}); + +art.on('ready', () => { + art.play(); + + setTimeout(() => { + art.pause(); + }, 3000); +}) +``` + +## toggle + +- 类型: `Function` + +切换视频的播放和暂停 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + muted: true, +}); + +art.on('ready', () => { + art.toggle(); + + setTimeout(() => { + art.toggle(); + }, 3000); +}) +``` + +## seek + +- 类型: `Setter` +- 参数: `Number` + +视频时间跳转，单位秒 + + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.seek = 5; +}) +``` + +## forward + +- 类型: `Setter` +- 参数: `Number` + +视频时间快进，单位秒 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.forward = 5; +}) +``` + +## backward + +- 类型: `Setter` +- 参数: `Number` + +视频时间快退，单位秒 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.seek = 5; + + setTimeout(() => { + art.backward = 2; + }, 3000); +}) +``` + +## volume + +- 类型: `Setter/Getter` +- 参数: `Number` + +设置和获取视频音量，范围在：`[0, 1]` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(art.volume); + art.volume = 0.5; + console.info(art.volume); +}) +``` + +## url + +- 类型: `Setter/Getter` +- 参数: `String` + +设置和获取视频地址 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(art.url); + art.url = '/assets/sample/video.mp4?t=0'; + console.info(art.url); +}) +``` + +## switchUrl + +- 类型: `Function` +- 参数: `String` + +设置视频地址，设置时和 `url` 类似，但会执行一些优化操作 + +函数支持两个参数，第一个为新的视频地址，第二个为新的视频名字 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.seek = 10; + setTimeout(() => { + art.switchUrl('/assets/sample/video.mp4?t=0', '新视频地址'); + }, 3000); +}) +``` + +## switchQuality + +- 类型: `Function` +- 参数: `String` + +设置视频画质地址，和 `switchQuality` 类似，但会带上之前的播放进度 + +函数支持两个参数，第一个为新的视频地址，第二个为新的视频名字 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.seek = 10; + setTimeout(() => { + art.switchQuality('/assets/sample/video.mp4?t=0', '新视频地址'); + }, 3000); +}) +``` + +## muted + +- 类型: `Setter/Getter` +- 参数: `Boolean` + +设置和获取视频是否静音 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(art.muted); + art.muted = true; + console.info(art.muted); +}) +``` + +## currentTime + +- 类型: `Setter/Getter` +- 参数: `Number` + +设置和获取视频当前时间，设置时间时和 `seek` 类似，但它不会触发额外的事件 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(art.currentTime); + art.currentTime = 5; + console.info(art.currentTime); +}) +``` + +## duration + +- 类型: `Getter` + +获取视频时长 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(art.duration); +}) +``` + +:::tip 提示 + +有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 `0` + +::: + +## screenshot + +- 类型: `Function` + +下载当前视频帧的截图 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.seek = 10; + art.screenshot(); +}) +``` + +## getDataURL + +- 类型: `Function` + +获取当前视频帧的截图的`base64`地址，返回的是一个 `Promise` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.seek = 10; + art.getDataURL().then(url => console.info(url)); +}) +``` + +## getBlobUrl + +- 类型: `Function` + +获取当前视频帧的截图的`Blob`地址，返回的是一个 `Promise` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.seek = 10; + art.getBlobUrl().then(url => console.info(url)); +}) +``` + +## fullscreen + +- 类型: `Setter/Getter` +- 参数: `Boolean` + +设置和获取播放器窗口全屏 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreen: true, +}); + +art.on('ready', () => { + art.fullscreen = true; + + setTimeout(() => { + art.fullscreen = false; + }, 3000); +}) +``` + +:::tip 提示 + +由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面） + +::: + +## fullscreenWeb + +- 类型: `Setter/Getter` +- 参数: `Boolean` + +设置和获取播放器网页全屏 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreenWeb: true, +}); + +art.on('ready', () => { + art.fullscreenWeb = true; + + setTimeout(() => { + art.fullscreenWeb = false; + }, 3000); +}) +``` + +## pip + +- 类型: `Setter/Getter` +- 参数: `Boolean` + +设置和获取播放器画中画模式 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreenWeb: true, +}); + +art.on('ready', () => { + art.pip = true; + + setTimeout(() => { + art.pip = false; + }, 3000); +}) +``` + +:::tip 提示 + +由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面） + +::: + +## poster + +- 类型: `Setter/Getter` +- 参数: `String` + +设置和获取视频海报，只有在视频播放前才能看到海报效果 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + poster: '/assets/sample/poster.jpg', +}); + +art.on('ready', () => { + console.info(art.poster); + art.poster = '/assets/sample/poster.jpg?t=0'; + console.info(art.poster); +}) +``` + +## mini + +- 类型: `Setter/Getter` +- 参数: `Boolean` + +设置和获取播放器迷你模式 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.mini = true; + + setTimeout(() => { + art.mini = false; + }, 3000); +}) +``` + +## playing + +- 类型: `Getter` +- 参数: `Boolean` + +获取视频是否正在播放中 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + muted: true, +}); + +art.on('ready', () => { + console.info(art.playing); + art.play(); + console.info(art.playing); +}) +``` + +## autoSize + +- 类型: `Setter/Getter` +- 参数: `Boolean` + +设置视频是否自适应尺寸，设置为 `true` 之后它会只执行一次 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(art.autoSize); + art.autoSize = true; + console.info(art.autoSize); +}) +``` + +## rect + +- 类型: `Getter` + +获取播放器的尺寸和坐标信息 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(JSON.stringify(art.rect)); +}) +``` + +:::tip 提示 + +尺寸和坐标信息是通过 `getBoundingClientRect` 获取的 + +::: + +## flip + +- 类型: `Setter/Getter` +- 参数: `String` + +设置和获取播放器翻转，支持`normal`、 `horizontal`、 `vertical` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(art.flip) + art.flip = 'horizontal' + console.info(art.flip) +}) +``` + +## rotate + +- 类型: `Setter/Getter` +- 参数: `Number` + +设置和获取播放器旋转，支持 `-270`、`-180`、`-90`、`0`、`90`、`180`、`270` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoSize: true, +}); + +art.on('ready', () => { + console.info(art.rotate) + art.rotate = 90 + console.info(art.rotate) +}) +``` + +## playbackRate + +- 类型: `Setter/Getter` +- 参数: `Number` + +设置和获取播放器播放速度，支持`0.5`、`0.75`、`1.0`、`1.25`、`1.5`、`1.75`、`2.0` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(art.playbackRate) + art.playbackRate = 2 + console.info(art.playbackRate) +}) +``` + +## aspectRatio + +- 类型: `Setter/Getter` +- 参数: `String` + +设置和获取播放器长宽比，支持`default`、`4:3`、`16:9` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(art.aspectRatio) + art.aspectRatio = '16:9' + console.info(art.aspectRatio) +}) +``` + +## loop + +- 类型: `Setter/Getter` +- 参数: `Array` + +设置和获取区间循序播放，单位秒 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + console.info(art.loop) + art.loop = [5, 10]; + console.info(art.loop) +}) +``` + +:::tip 提示 + +删除区间循环播放，只需要设置 `loop` 为 `[]` 即可 + +::: + +## destroy + +- 类型: `Function` +- 参数: `Boolean` + +销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 `html`，默认为 `true` + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', +}); + +art.on('ready', () => { + art.destroy(); +}) +``` \ No newline at end of file diff --git a/packages/artplayer-document/docs/en/Questions/Create button in the controls.md b/packages/artplayer-document/docs/en/Questions/Create button in the controls.md new file mode 100644 index 000000000..742cc79b8 --- /dev/null +++ b/packages/artplayer-document/docs/en/Questions/Create button in the controls.md @@ -0,0 +1,27 @@ +--- +title: 在控制栏添加按钮 +sidebar_position: 2 +--- + +有时你需要在控制栏添加按钮，如开关按钮或者单选按钮等等，你甚至可以使用第三方的样式库如 `bootstrap` + +
▶ Run Code
+ +```js +var time = 0; +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + controls: [ + { + position: 'right', + html: '', + click: function (_, event) { + // 第二个参数是事件对象 + time += 1; + event.target.innerText = 'You Click ' + time; + }, + }, + ], +}); +``` diff --git a/packages/artplayer-document/docs/en/Questions/Create selector in the controls.md b/packages/artplayer-document/docs/en/Questions/Create selector in the controls.md new file mode 100644 index 000000000..25c4ff083 --- /dev/null +++ b/packages/artplayer-document/docs/en/Questions/Create selector in the controls.md @@ -0,0 +1,38 @@ +--- +title: 在控制栏添加列表 +sidebar_position: 1 +--- + +有时你需要在控制栏添加列表，那么你可以在添加控件的时候使用 `selector` 和 `onSelect` 属性 + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + controls: [ + { + position: 'right', + html: 'Subtitle 01', + selector: [ + { + html: 'Subtitle 01', + url: '/assets/sample/subtitle.srt?id=1', + }, + { + html: 'Subtitle 02', + url: '/assets/sample/subtitle.srt?id=2', + }, + ], + onSelect: function (item, $dom) { + art.subtitle.switch(item.url, { + name: $dom.innerText, + }); + + return '你点击了' + item.html; + }, + }, + ], +}); +``` diff --git a/packages/artplayer-document/docs/en/Questions/_category_.json b/packages/artplayer-document/docs/en/Questions/_category_.json new file mode 100644 index 000000000..278c94e5c --- /dev/null +++ b/packages/artplayer-document/docs/en/Questions/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "常见问题", + "position": 7, + "collapsed": true +} diff --git a/packages/artplayer-document/docs/zh-cn/Overview.md b/packages/artplayer-document/docs/zh-cn/Overview.md index f33ce2575..00e162761 100644 --- a/packages/artplayer-document/docs/zh-cn/Overview.md +++ b/packages/artplayer-document/docs/zh-cn/Overview.md @@ -12,7 +12,7 @@ slug: /zh-cn $ npm install artplayer ``` -### 通过 `yarn` 安装： +### 通过 `yarn` 安装： ```bash $ yarn add artplayer