diff --git a/README.md b/README.md index 166b018bc..3f1959e18 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # ArtPlayer + ![version](https://badgen.net/npm/v/artplayer) ![license](https://badgen.net/npm/license/artplayer) ![size](https://badgen.net/bundlephobia/minzip/artplayer) @@ -6,9 +7,11 @@ > ArtPlayer is a modern HTML5 video player ## Status -⚠️ This project is WIP and not ready for production use yet! + +⚠️ This project is WIP and not ready for production use yet! ## Demo + [Checkout the demo](https://blog.zhw-island.com/ArtPlayer/) ## Introduction @@ -27,7 +30,7 @@ import 'artplayer/dist/artplayer.css'; OR umd builds are also available ```html - + ``` @@ -41,8 +44,8 @@ Will expose the global variable to `window.Artplayer`. ```js var app = new Artplayer({ - container: '.artplayer-app', - url: 'path/to/video.mp4', + container: '.artplayer-app', + url: 'path/to/video.mp4' }); ``` @@ -50,12 +53,13 @@ Note: You need to initialize a size for the container element, like: ```css .artplayer-app { - width: 400px; - height: 300px; + width: 400px; + height: 300px; } ``` ## Configuration + @@ -216,6 +220,108 @@ Note: You need to initialize a size for the container element, like: Player mutually exclusive + + + + + + + + + + + + + + + +
parameter
subtitle + Type: object
+ Default: {}

+ Custom subtitle
+ + + + + + + + + +
url + Type: string
+ Default: ''

+ Subtitle url, support vtt and srt format +
style + Type: object
+ Default: {}

+ Subtitle style +
+
moreVideoAttr + Type: object
+ Default:
+ + {
+ 'controls': false,
+ 'preload': 'auto',
+ 'webkit-playsinline': true,
+ 'playsinline': true
+ } +

+ More video Attributes
+
quality + Type: array
+ Default: []

+ Custom quality, The type of quality is an object
+ + + + + + + + + + + + + +
default + Type: boolean
+ Default: false

+ Whether the default quality +
name + Type: string
+ Default: ''

+ Quality name +
url + Type: string
+ Default: ''

+ Quality url +
+
highlight + Type: array
+ Default: []

+ Custom highlight, The type of highlight is an object
+ + + + + + + + + +
time + Type: number
+ Default: 0

+ highlight seconds +
text + Type: string
+ Default: ''

+ highlight text +
+
layers @@ -266,13 +372,72 @@ Note: You need to initialize a size for the container element, like:
+ + contextmenu + + Type: array
+ Default: []

+ Custom contextmenu, The type of layer is an object
+ + + + + + + + + + + + + + + + + + + + + +
name + Type: string
+ Default: contextmenu${id}

+ The unique name of the contextmenu, used for the class name +
index + Type: number
+ Default: ${id}

+ The unique index of the contextmenu, used for the priority level +
html + Type: string, element
+ Default: ''

+ The dom element of the contextmenu +
style + Type: object
+ Default: {}

+ The style object of the contextmenu +
click + Type: function
+ Default: undefined

+ Click event of the contextmenu +
+ + + + controls + + Type: array
+ Default: []

+ Custom controls, The type of controls is an object
+ + ## API ## Ecosystem -| Project | Description | -|---------|--------| + +| Project | Description | +| ------------------------------------------------------------------------------------------------------------- | -------------------------- | | [artplayer-plugin-danmu](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmu) | Danmu plugin for ArtPlayer | ## Issue diff --git a/packages/artplayer/src/contextmenu/index.js b/packages/artplayer/src/contextmenu/index.js index 6dd975a3b..7681c5256 100644 --- a/packages/artplayer/src/contextmenu/index.js +++ b/packages/artplayer/src/contextmenu/index.js @@ -47,10 +47,10 @@ export default class Contextmenu { if (!item.disable) { const { refs, events: { proxy } } = this.art; id++; - const name = item.name || `menu${id}`; + const name = item.name || `contextmenu${id}`; const menu = typeof item === 'function' ? item(this.art) : item; const $menu = document.createElement('div'); - $menu.setAttribute('class', `art-menu art-menu-${name || id}`); + $menu.setAttribute('class', `art-contextmenu art-contextmenu-${name || id}`); append($menu, menu.html); setStyles($menu, menu.style || {}); if (menu.click) { diff --git a/packages/artplayer/src/controls/progress.js b/packages/artplayer/src/controls/progress.js index 208682b9d..6b3ab613d 100644 --- a/packages/artplayer/src/controls/progress.js +++ b/packages/artplayer/src/controls/progress.js @@ -33,7 +33,7 @@ export default class Progress { highlight.forEach(item => { const left = Number(item.time) / player.duration; - append(this.$highlight, ``); + append(this.$highlight, ``); }); this.set('loaded', player.loaded); diff --git a/packages/artplayer/src/index.js b/packages/artplayer/src/index.js index dcfeb983a..08604b7a4 100644 --- a/packages/artplayer/src/index.js +++ b/packages/artplayer/src/index.js @@ -83,7 +83,6 @@ class Artplayer extends Emitter { style: {} }, moreVideoAttr: { - 'crossOrigin': 'anonymous', 'controls': false, 'preload': 'auto', 'webkit-playsinline': true, diff --git a/packages/artplayer/src/scheme/index.js b/packages/artplayer/src/scheme/index.js index 22aaa1ece..4dfbaf5ec 100644 --- a/packages/artplayer/src/scheme/index.js +++ b/packages/artplayer/src/scheme/index.js @@ -41,7 +41,8 @@ export default { html: { validator: validElement }, - style: 'object' + style: 'object', + click: 'function' } }, contextmenu: { diff --git a/packages/artplayer/src/style/contextmenu.scss b/packages/artplayer/src/style/contextmenu.scss index 085ccc123..63109dfaa 100644 --- a/packages/artplayer/src/style/contextmenu.scss +++ b/packages/artplayer/src/style/contextmenu.scss @@ -10,7 +10,7 @@ background:rgba(0, 0, 0, 0.8); border-radius: 3px; - .art-menu { + .art-contextmenu { cursor: pointer; font-size: 13px; display: block;