diff --git a/packages/artplayer-document/docs/zh-cn/Options.md b/packages/artplayer-document/docs/zh-cn/Options.md index 75a0cea72..b8518c2f8 100644 --- a/packages/artplayer-document/docs/zh-cn/Options.md +++ b/packages/artplayer-document/docs/zh-cn/Options.md @@ -593,16 +593,168 @@ var art = new Artplayer({ }); ``` +:::tip 提示 + +SSR 是 Server Side Render 简称,页面上的内容是通过服务端渲染生成的,浏览器直接显示服务端返回的 HTML 就可以了。 + +::: + ## layers +- 类型: `Array` +- 默认: `[]` + +初始化自定义的业务图层,更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component) + +
▶ 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', + }, + }, + ], +}); +``` + ## contextmenu +- 类型: `Array` +- 默认: `[]` + +初始化自定义的右键菜单,更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component) + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + contextmenu: [ + { + html: '自定义菜单', + click: function () { + console.info('你点击了自定义菜单'); + art.contextmenu.show = false; + }, + }, + ], +}); +``` + ## controls +- 类型: `Array` +- 默认: `[]` + +初始化自定义的底部控制栏,更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component) + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + controls: [ + { + position: 'right', + index: 10, + html: '自定义按钮', + tooltip: '自定义按钮的提示', + click: function () { + console.log('你点击了自定义按钮'); + }, + }, + ], +}); +``` + ## quality +- 类型: `Array` +- 默认: `[]` + +是否在底部控制栏里显示画质选择列表 + +| 属性 | 类型 | 描述 | +| --------- | --------- | -------- | +| `default` | `Boolean` | 默认画质 | +| `name` | `String` | 画质名字 | +| `url` | `String` | 画质地址 | + +
▶ Run Code
+ +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + quality: [ + { + default: true, + name: 'SD 480P', + url: '/assets/sample/video.mp4', + }, + { + name: 'HD 720P', + url: '/assets/sample/video.mp4', + }, + ], +}); +``` + ## highlight +- 类型: `Array` +- 默认: `[]` + +在进度条上显示高亮信息点 + +| 属性 | 类型 | 描述 | +| ------ | -------- | ------------------ | +| `time` | `Number` | 高亮时间(单位秒) | +| `text` | `String` | 高亮文本 | + +
▶ 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 ## whitelist