This commit is contained in:
zhw2590582 committed 2021-11-28 11:10:24 +08:00
1 parent 482f02824d
commit d72d816ef7
7 files changed
+82 -13

No files matched your search

+1 -1
View File
@@ -30,7 +30,7 @@
## Features
ArtPlayer.js is an easy-to-use and feature-rich HTML5 video player, and most of the player's functional controls support customization, which makes it easy to connect with your business logic. In addition, it directly supports `.vtt`, `.ass` and `.srt` subtitle formats. Integration with other dependencies such as `flv.js`, `hls.js`, `dash.js`, etc. is also very simple. The code is highly decoupled, the structure and logic are clear, and it is easy to track errors and add new features.
[ArtPlayer.js](https://artplayer.org) is an easy-to-use and feature-rich HTML5 video player, and most of the player's functional controls support customization, which makes it easy to connect with your business logic. In addition, it directly supports `.vtt`, `.ass` and `.srt` subtitle formats. Integration with other dependencies such as `flv.js`, `hls.js`, `dash.js`, etc. is also very simple. The code is highly decoupled, the structure and logic are clear, and it is easy to track errors and add new features.
## Install
+4 -1
View File
@@ -2498,6 +2498,10 @@
if ($ref.childNodes.length === 1 && $ref.childNodes[0].nodeType === 3) {
addClass($ref, 'art-control-onlyText');
}
def(this, name, {
value: $ref
});
}
}, {
key: "selector",
@@ -4867,7 +4871,6 @@
highlight: [],
plugins: [],
whitelist: [],
switcher: [],
thumbnails: {
url: '',
number: 60,
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/_screenfull@5.0.2@screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/srcLine truncated
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/_screenfull@5.0.2@screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/srcLine truncated
@@ -574,7 +574,18 @@ SSR 是 Server Side Render 简称,页面上的内容是通过服务端渲染
- 类型: `Array`
- 默认: `[]`
初始化自定义的业务图层,更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
初始化自定义的业务图层
| 属性 | 类型 | 描述 |
| --------- | ------------------- | -------------------------- |
| `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>
@@ -585,6 +596,9 @@ var art = new Artplayer({
url: '/assets/sample/video.mp4',
layers: [
{
index: 1,
name: 'potser',
disable: false,
html: `<img style="width: 100px" src="${img}">`,
style: {
position: 'absolute',
@@ -592,6 +606,13 @@ var art = new Artplayer({
right: '20px',
opacity: '.9',
},
click: function (...args) {
console.info('你点击了组件');
art.layers.show = false;
},
mounted: function (...args) {
console.info('组件挂载完成');
},
},
],
});
@@ -602,7 +623,18 @@ var art = new Artplayer({
- 类型: `Array`
- 默认: `[]`
初始化自定义的右键菜单,更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
初始化自定义的右键菜单
| 属性 | 类型 | 描述 |
| --------- | ------------------- | -------------------------- |
| `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>
@@ -627,7 +659,19 @@ var art = new Artplayer({
- 类型: `Array`
- 默认: `[]`
初始化自定义的底部控制栏,更多信息请访问 [自定义组件的使用](/document/zh-cn/Questions/component)
初始化自定义的底部控制栏
| 属性 | 类型 | 描述 |
| ---------- | ------------------- | -------------------------- |
| `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>
@@ -637,12 +681,31 @@ var art = new Artplayer({
url: '/assets/sample/video.mp4',
controls: [
{
position: 'right',
disable: false,
name: 'button',
index: 10,
position: 'right',
html: '自定义按钮',
tooltip: '自定义按钮的提示',
tooltip: '自定义按钮的提示1',
style: {
color: 'red',
},
click: function () {
console.log('你点击了自定义按钮');
console.log('你点击了自定义按钮1');
},
mounted: function () {
console.log('自定义按钮挂载完成1');
},
},
{
position: 'left',
html: '自定义按钮2',
tooltip: '自定义按钮的提示2',
style: {
color: 'green',
},
click: function () {
console.log('你点击了自定义按钮2');
},
},
],
@@ -953,4 +1016,3 @@ var art = new Artplayer({
lang: 'en',
});
```
@@ -5,7 +5,8 @@ document.addEventListener('click', (event) => {
if (codeElement) {
const libs = event.target.dataset.libs || '';
const code = encodeURIComponent(codeElement.innerText);
const url = 'https://artplayer.org/?libs=' + libs + '&code=' + code;
const env = window.location.host.includes('localhost') ? 'http://localhost:8081' : 'https://artplayer.org';
const url = env + '/?libs=' + libs + '&code=' + code;
window.open(url);
}
}
-1
View File
@@ -143,7 +143,6 @@ export default class Artplayer extends Emitter {
highlight: [],
plugins: [],
whitelist: [],
switcher: [],
thumbnails: {
url: '',
number: 60,
+5 -1
View File
@@ -1,5 +1,5 @@
import { hasClass, addClass, removeClass, append, setStyles, tooltip, getStyle } from './dom';
import { has } from './property';
import { has, def } from './property';
import { errorHandle } from './error';
export default class Component {
@@ -80,6 +80,10 @@ export default class Component {
if ($ref.childNodes.length === 1 && $ref.childNodes[0].nodeType === 3) {
addClass($ref, 'art-control-onlyText');
}
def(this, name, {
value: $ref,
});
}
selector(option, $ref) {