diff --git a/README.html b/README.html new file mode 100644 index 000000000..d67322a7b --- /dev/null +++ b/README.html @@ -0,0 +1,863 @@ + + README + + + + + + + + + + + + + + + + + +
+

ArtPlayer

+ +

version
+license
+size

+
+

ArtPlayer is a modern HTML5 video player

+
+

Status

+ +

⚠️ This project is WIP and not ready for production use yet!

+

Demo

+ +

Checkout the demo

+

Introduction

+ +

Install

+ +
$ npm install --save artplayer
+
import Artplayer from 'artplayer';
+import 'artplayer/dist/artplayer.css';
+

OR umd builds are also available

+
<link rel="stylesheet" href="path/to/artplayer.css" />
+<script src="path/to/artplayer.js"></script>
+

Will expose the global variable to window.Artplayer.

+

Usage

+ +
<div class="artplayer-app"></div>
+
var art = new Artplayer({
+  container: '.artplayer-app',
+  url: 'path/to/video.mp4'
+});
+

Configuration

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
parameterdescriptionExample
container + Type: string, element
+ Default: .artplayer
+ Required: true

+ DOM container of the player, you need to initialize a size for the container element + 		+ Demo +
url + Type: string
+ Default: ''
+ Required: true

+ Video source url, Three video file formats are supported: mp4, ogg, webm + 		+ Demo +
poster + Type: string
+ Default: ''

+ Video poster image url + 		+ Demo +
title + Type: string
+ Default: ''

+ Video title, will be shown in screenshot file name and pip mode + 		+ Demo +
volume + Type: number
+ Default: 0.7

+ Default volume, player will cache the last volume, which may be overwritten + 		+ Demo +
autoplay + Type: boolean
+ Default: false

+ Whether to play automatically, sometimes it doesn't necessarily succeed
+ More info: autoplay-policy-changes + 		+ Demo +
autoSize + Type: boolean
+ Default: false

+ Keep the original video aspect ratio and automatically zoom + 		+ Demo +
loop + Type: boolean
+ Default: false

+ Automatic loop playback + 		+ Demo +
playbackRate + Type: boolean
+ Default: false

+ Whether to show playback rate controller in the contextmenu + 		+ Demo +
aspectRatio + Type: boolean
+ Default: false

+ Whether to show aspect ratio controller in the contextmenu + 		+ Demo +
screenshot + Type: boolean
+ Default: false

+ Whether to show screenshot controller in the bottom + 		+ Demo +
setting + Type: boolean
+ Default: false

+ Whether to show setting controller in the bottom + 		+ Demo +
pip + Type: boolean
+ Default: false

+ Whether to show pip controller in the bottom + 		+ Demo +
fullscreen + Type: boolean
+ Default: false

+ Whether to show window fullscreen controller in the bottom + 		+ Demo +
fullscreenWeb + Type: boolean
+ Default: false

+ Whether to show web page fullscreen controller in the bottom + 		+ Demo +
hotkey + Type: boolean
+ Default: true

+ Whether to use hotkey
+ + + + + + + + + + + + + + + + + + + + + +
↑Increase volume
↓Decrease volume
←Seek backward
→Seek forward
spaceToggle playback
+ 		+ Demo +
mutex + Type: boolean
+ Default: true

+ Player mutually exclusive, only one player can play at a time + 		+ Demo +
lang + Type: string
+ Default: navigator.language.toLowerCase()

+ Default display language: en, zh-cn, zh-tw + 		+ Demo +
theme + Type: string
+ Default: #f00

+ Default theme color + 		+ Demo +
subtitle + Type: object
+ Default: {}

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

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

+ Subtitle style +
+ 		+ Demo +
thumbnails + Type: object
+ Default: {}

+ Custom thumbnails in the progress bar with lazy load
+ + + + + + + + + + + + + + + + + + + + + +
url + Type: string
+ Default: ''

+ Thumbnails image url +
number + Type: number
+ Default: 60

+ Thumbnails number +
width + Type: number
+ Default: 160

+ Thumbnails width +
height + Type: number
+ Default: 90

+ Thumbnails height +
column + Type: number
+ Default: 10

+ Thumbnails column +
+ 		+ Demo +
moreVideoAttr + Type: object
+ Default: {'controls': false,'preload': 'auto'}

+ More video Attributes, these properties will be written directly to the video element
+ 		+ Demo +
quality + Type: array
+ Default: []

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

+ Whether the default quality, if not specified, the first quality will be taken +
name + Type: string
+ Default: ''

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

+ Quality url +
+ 		+ Demo +
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 +
+ 		+ Demo +
layers + Type: array
+ Default: []

+ Custom layer, The type of layer is an object or function
+ + + + + + + + + + + + + + + + + + + + + + + + + +
disable + Type: boolean
+ Default: undefined

+ Whether to disable the layer +
name + Type: string
+ Default: layer${id}

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

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

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

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

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

+ Custom contextmenu, The type of layer is an object or function
+ + + + + + + + + + + + + + + + + + + + + + + + + +
disable + Type: boolean
+ Default: undefined

+ Whether to disable the contextmenu +
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 +
+ 		+ Demo +
controls + Type: array
+ Default: []

+ Custom controls, The type of controls is an object
+ + + + + +
option + Type: object
+ Default: undefined

+ Instantiated an object property
+ + + + + + + + + + + + + + + + + +
disable + Type: boolean
+ Default: undefined

+ Whether to disable the controller +
name + Type: string
+ Default: control${id}

+ The unique name of the controller, used for the class name +
position + Type: string
+ Default: undefined

+ The position where the controller appears: top, left, right +
index + Type: number
+ Default: undefined

+ The unique index of the controller, used for the priority level +
+
+ 		+ Demo +
+

API

+ +

Ecosystem

+ + + + + + + + + + + + + + +
ProjectDescription
artplayer-plugin-danmuDanmu plugin for ArtPlayer
+

Issue

+ +

Contributors

+ +

License

+ +

MIT © Harvey Zack

+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index 8d63d88d4..0fcdd9816 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ Will expose the global variable to `window.Artplayer`. ``` ```js -var app = new Artplayer({ +var art = new Artplayer({ container: '.artplayer-app', url: 'path/to/video.mp4' }); @@ -66,7 +66,7 @@ var app = new Artplayer({ DOM container of the player, you need to initialize a size for the container element - Demo + Demo @@ -78,7 +78,7 @@ var app = new Artplayer({ Video source url, Three video file formats are supported: mp4, ogg, webm - Demo + Demo @@ -89,7 +89,7 @@ var app = new Artplayer({ Video poster image url - Demo + Demo @@ -100,7 +100,7 @@ var app = new Artplayer({ Video title, will be shown in screenshot file name and pip mode - Demo + Demo @@ -111,7 +111,7 @@ var app = new Artplayer({ Default volume, player will cache the last volume, which may be overwritten - Demo + Demo @@ -123,7 +123,7 @@ var app = new Artplayer({ More info: autoplay-policy-changes - Demo + Demo @@ -134,7 +134,7 @@ var app = new Artplayer({ Keep the original video aspect ratio and automatically zoom - Demo + Demo @@ -145,7 +145,7 @@ var app = new Artplayer({ Automatic loop playback - Demo + Demo @@ -156,7 +156,7 @@ var app = new Artplayer({ Whether to show playback rate controller in the contextmenu - Demo + Demo @@ -167,7 +167,7 @@ var app = new Artplayer({ Whether to show aspect ratio controller in the contextmenu - Demo + Demo @@ -178,7 +178,7 @@ var app = new Artplayer({ Whether to show screenshot controller in the bottom - Demo + Demo @@ -189,7 +189,7 @@ var app = new Artplayer({ Whether to show setting controller in the bottom - Demo + Demo @@ -200,7 +200,7 @@ var app = new Artplayer({ Whether to show pip controller in the bottom - Demo + Demo @@ -211,7 +211,7 @@ var app = new Artplayer({ Whether to show window fullscreen controller in the bottom - Demo + Demo @@ -222,7 +222,7 @@ var app = new Artplayer({ Whether to show web page fullscreen controller in the bottom - Demo + Demo @@ -255,7 +255,7 @@ var app = new Artplayer({ - Demo + Demo @@ -266,7 +266,7 @@ var app = new Artplayer({ Player mutually exclusive, only one player can play at a time - Demo + Demo @@ -277,7 +277,7 @@ var app = new Artplayer({ Default display language: en, zh-cn, zh-tw - Demo + Demo @@ -288,7 +288,7 @@ var app = new Artplayer({ Default theme color - Demo + Demo @@ -317,7 +317,7 @@ var app = new Artplayer({ - Demo + Demo @@ -370,7 +370,7 @@ var app = new Artplayer({ - Demo + Demo @@ -381,7 +381,7 @@ var app = new Artplayer({ More video Attributes, these properties will be written directly to the video element
- Demo + Demo @@ -418,7 +418,7 @@ var app = new Artplayer({ - Demo + Demo @@ -447,7 +447,7 @@ var app = new Artplayer({ - Demo + Demo @@ -508,7 +508,7 @@ var app = new Artplayer({ - Demo + Demo @@ -569,7 +569,7 @@ var app = new Artplayer({ - Demo + Demo @@ -624,7 +624,7 @@ var app = new Artplayer({ - Demo + Demo diff --git a/docs/js/index.js b/docs/js/index.js index 8e14e2bc9..f8d61f919 100644 --- a/docs/js/index.js +++ b/docs/js/index.js @@ -1,5 +1,5 @@ var url = 'https://blog.zhw-island.com/assets-cdn'; -var app = new Artplayer({ +var art = new Artplayer({ container: '.artplayer-app', url: url + '/video/one-more-time-one-more-chance-480p.mp4', title: '【新海诚动画】『秒速5センチメートル』', @@ -35,8 +35,8 @@ var app = new Artplayer({ { html: ``, click: function () { - app.destroy(true); - app = new Artplayer({ + art.destroy(true); + art = new Artplayer({ autoplay: true, container: '.artplayer-app', url: url + '/video/you-name.mp4'