mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-16 17:46:17 -08:00
update
This commit is contained in:
zhw2590582 committed
1 parent
d72d816ef7
commit
793734759a
4 files changed
+90
-30
No files matched your search
@@ -118,7 +118,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
var css_248z = ".art-video-player{zoom:1;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-high-contrast-adjust:none;background-color:#000;color:#eee;direction:ltr;display:flex;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px;height:100%;line-height:1.3;margin:0 auto;outline:0;position:relative;text-align:left;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:20}.art-video-player *{box-sizing:border-box;margin:0;padding:0}.art-video-player ::-webkit-scrollbar{width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{align-items:center;display:inline-flex;justify-content:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{background-color:#000;cursor:pointer;z-index:10}.art-video-player .art-poster,.art-video-player .art-video{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.art-video-player .art-poster{background-position:50%;background-repeat:no-repeat;background-size:cover;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:11}.art-video-player .art-subtitle{bottom:10px;color:#fff;display:none;font-size:20px;padding:0 20px;pointer-events:none;position:absolute;text-align:center;text-shadow:.5px .5px .5px rgba(0,0,0,.5);width:100%;z-index:20}.art-video-player .art-subtitle p{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:1.2;margin:5px 0 0;word-break:break-all}.art-video-player .art-bilingual p:nth-child(n+2){transform:scale(.6);transform-origin:center top}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{bottom:0;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:50}.art-video-player .art-mask .art-state{align-items:center;bottom:55px;display:flex;height:60px;justify-content:center;opacity:.6;position:absolute;right:30px;width:60px}.art-video-player.art-mask-show .art-mask{display:flex}.art-video-player .art-loading{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:70}.art-video-player.art-loading-show .art-loading{display:flex}.art-video-player .art-bottom{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;bottom:0;height:100px;left:0;opacity:0;padding:55px 10px 0;pointer-events:none;position:absolute;right:0;transition:all .2s ease-in-out;visibility:hidden;z-index:60}.art-video-player .art-bottom .art-progress{pointer-events:auto;position:relative}.art-video-player .art-bottom .art-progress .art-control-progress{align-items:center;cursor:pointer;display:flex;flex-direction:row;height:4px;position:relative}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner{background:hsla(0,0%,100%,.2);height:50%;position:relative;width:100%}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{background:hsla(0,0%,100%,.4);bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:0;z-index:10}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-played{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:0;z-index:20}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{bottom:0;height:100%;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:30}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{background:#fff;display:inline-block;height:100%;left:0;pointer-events:auto;position:absolute;top:0;width:7px}.art-videLine truncated
|
||||
var css_248z = ".art-video-player{zoom:1;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-high-contrast-adjust:none;background-color:#000;color:#eee;direction:ltr;display:flex;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px;height:100%;line-height:1.3;margin:0 auto;outline:0;position:relative;text-align:left;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:20}.art-video-player *{box-sizing:border-box;margin:0;padding:0}.art-video-player ::-webkit-scrollbar{width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{align-items:center;display:inline-flex;justify-content:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{background-color:#000;cursor:pointer;z-index:10}.art-video-player .art-poster,.art-video-player .art-video{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.art-video-player .art-poster{background-position:50%;background-repeat:no-repeat;background-size:cover;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:11}.art-video-player .art-subtitle{bottom:10px;color:#fff;display:none;font-size:20px;padding:0 20px;pointer-events:none;position:absolute;text-align:center;text-shadow:.5px .5px .5px rgba(0,0,0,.5);width:100%;z-index:20}.art-video-player .art-subtitle p{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:1.2;margin:5px 0 0;word-break:break-all}.art-video-player .art-bilingual p:nth-child(n+2){transform:scale(.6);transform-origin:center top}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{bottom:0;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:50}.art-video-player .art-mask .art-state{align-items:center;bottom:55px;display:flex;height:60px;justify-content:center;opacity:.6;position:absolute;right:30px;width:60px}.art-video-player.art-mask-show .art-mask{display:flex}.art-video-player .art-loading{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:70}.art-video-player.art-loading-show .art-loading{display:flex}.art-video-player .art-bottom{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;bottom:0;height:100px;left:0;opacity:0;padding:55px 10px 0;pointer-events:none;position:absolute;right:0;transition:all .2s ease-in-out;visibility:hidden;z-index:60}.art-video-player .art-bottom .art-progress{pointer-events:auto;position:relative}.art-video-player .art-bottom .art-progress .art-control-progress{align-items:center;cursor:pointer;display:flex;flex-direction:row;height:4px;position:relative}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner{background:hsla(0,0%,100%,.2);height:50%;position:relative;width:100%}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{background:hsla(0,0%,100%,.4);bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:0;z-index:10}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-played{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:0;z-index:20}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{bottom:0;height:100%;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:30}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{background:#fff;display:inline-block;height:100%;left:0;pointer-events:auto;position:absolute;top:0;width:7px}.art-videLine truncated
|
||||
styleInject(css_248z);
|
||||
|
||||
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
||||
|
||||
@@ -279,7 +279,18 @@ art.on('ready', () => {
|
||||
})
|
||||
```
|
||||
|
||||
方法 `add` 可以动态添加业务层，更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
|
||||
方法 `add` 可以动态添加业务层
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| --------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`、`Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -350,7 +361,19 @@ art.on('ready', () => {
|
||||
})
|
||||
```
|
||||
|
||||
方法 `add` 可以动态添加控制器，更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
|
||||
方法 `add` 可以动态添加控制器
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`、`Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
| `position` | `String` | 位置在 `left` 或者 `right` |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -399,7 +422,18 @@ art.on('ready', () => {
|
||||
})
|
||||
```
|
||||
|
||||
方法 `add` 可以动态添加菜单项，更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
|
||||
方法 `add` 可以动态添加菜单项
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`、`Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -531,7 +565,18 @@ art.on('ready', () => {
|
||||
})
|
||||
```
|
||||
|
||||
方法 `add` 可以动态添加设置项，更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
|
||||
方法 `add` 可以动态添加设置项
|
||||
|
||||
| 属性 | 类型 | 描述 |
|
||||
| ---------- | ------------------- | -------------------------- |
|
||||
| `disable` | `Boolean` | 是否禁用组件 |
|
||||
| `name` | `String` | 组件唯一名称，用于标记类名 |
|
||||
| `index` | `Number` | 组件索引，用于显示的优先级 |
|
||||
| `html` | `String`、`Element` | 组件的 DOM 元素 |
|
||||
| `style` | `Object` | 组件样式对象 |
|
||||
| `click` | `Function` | 组件点击事件 |
|
||||
| `mounted` | `Function` | 组件挂载后触发 |
|
||||
| `tooltip` | `String` | 组件的提示文本 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
@@ -562,25 +607,30 @@ art.on('ready', () => {
|
||||
|
||||
管理插件的对象
|
||||
|
||||
方法 `add` 可以动态添加插件，更多信息请访问 [自定义插件的使用](/document/zh-cn/Questions/plugin)
|
||||
方法 `add` 可以动态添加插件
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```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',
|
||||
plugins: [myPlugin],
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.plugins.add(function myPlugin(art) {
|
||||
console.info('myPlugin running...');
|
||||
return {
|
||||
something: 'something',
|
||||
doSomething: function () {
|
||||
console.info('Do something here...');
|
||||
},
|
||||
};
|
||||
});
|
||||
})
|
||||
console.info(art.plugins.myPlugin.something);
|
||||
console.info(art.plugins.myPlugin.doSomething());
|
||||
});
|
||||
```
|
||||
@@ -652,6 +652,10 @@ var art = new Artplayer({
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.contextmenu.show = true;
|
||||
});
|
||||
```
|
||||
|
||||
## controls
|
||||
@@ -793,25 +797,31 @@ var art = new Artplayer({
|
||||
- 类型: `Array`
|
||||
- 默认: `[]`
|
||||
|
||||
初始化自定义的插件，更多信息请访问 [自定义插件的使用](/document/zh-cn/Questions/plugin)
|
||||
初始化自定义的插件
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```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',
|
||||
plugins: [
|
||||
function myPlugin(art) {
|
||||
console.info('myPlugin running...');
|
||||
return {
|
||||
something: 'something',
|
||||
doSomething: function () {
|
||||
console.info('Do something here...');
|
||||
},
|
||||
};
|
||||
},
|
||||
],
|
||||
plugins: [myPlugin],
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
console.info(art.plugins.myPlugin.something);
|
||||
console.info(art.plugins.myPlugin.doSomething());
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 120;
|
||||
left: 0;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
min-width: 200px;
|
||||
padding: 5px 0;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
|
||||
Reference in new issue
Block a user