mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-31 04:31:20 -08:00
update docs
This commit is contained in:
Harvey Zack committed
1 parent
0b1a02c750
commit
db774e088d
1 file changed
+98
-58
+98
-58
@@ -7,6 +7,7 @@ Install with `npm`
|
||||
```
|
||||
$ npm install artplayer
|
||||
```
|
||||
|
||||
Or install with `yarn`
|
||||
|
||||
```
|
||||
@@ -36,7 +37,7 @@ Will expose the global variable to `window.Artplayer`.
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.mp4'
|
||||
url: 'path/to/video.mp4',
|
||||
});
|
||||
```
|
||||
|
||||
@@ -57,7 +58,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
// container: document.querySelector('.artplayer-app'),
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4'
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
});
|
||||
```
|
||||
|
||||
@@ -84,7 +85,7 @@ Video source url, Three video file formats are supported: mp4, ogg, webm
|
||||
var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4'
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
// url: url + '/video/one-more-time-one-more-chance-480p.ogg',
|
||||
// url: url + '/video/one-more-time-one-more-chance-480p.webm',
|
||||
});
|
||||
@@ -147,7 +148,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
poster: url + '/image/one-more-time-one-more-chance-poster.jpg'
|
||||
poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
|
||||
});
|
||||
```
|
||||
|
||||
@@ -165,7 +166,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
title: '【新海诚动画】『秒速5センチメートル』'
|
||||
title: '【新海诚动画】『秒速5センチメートル』',
|
||||
});
|
||||
```
|
||||
|
||||
@@ -183,7 +184,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
volume: 0.5
|
||||
volume: 0.5,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -201,7 +202,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
muted: true
|
||||
muted: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -221,7 +222,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
autoplay: true
|
||||
autoplay: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -240,7 +241,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
autoSize: true
|
||||
autoSize: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -258,7 +259,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
loop: true
|
||||
loop: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -276,7 +277,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
playbackRate: true
|
||||
playbackRate: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -294,7 +295,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
aspectRatio: true
|
||||
aspectRatio: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -312,7 +313,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
screenshot: true
|
||||
screenshot: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -330,7 +331,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
setting: true
|
||||
setting: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -350,7 +351,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
pip: true
|
||||
pip: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -368,7 +369,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
fullscreen: true
|
||||
fullscreen: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -386,7 +387,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
fullscreenWeb: true
|
||||
fullscreenWeb: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -404,7 +405,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
mutex: true
|
||||
mutex: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -422,7 +423,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
hotkey: true
|
||||
hotkey: true,
|
||||
});
|
||||
```
|
||||
|
||||
@@ -448,7 +449,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
lang: 'en'
|
||||
lang: 'en',
|
||||
});
|
||||
```
|
||||
|
||||
@@ -469,7 +470,7 @@ var art = new Artplayer({
|
||||
icons: {
|
||||
loading: 'Loading...',
|
||||
playBig: 'PLAY',
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@@ -487,7 +488,7 @@ var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
theme: '#ffad00'
|
||||
theme: '#ffad00',
|
||||
});
|
||||
```
|
||||
|
||||
@@ -522,9 +523,9 @@ var art = new Artplayer({
|
||||
subtitle: {
|
||||
url: url + '/subtitle/one-more-time-one-more-chance.srt',
|
||||
style: {
|
||||
color: '#03A9F4'
|
||||
}
|
||||
}
|
||||
color: '#03A9F4',
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@@ -580,8 +581,8 @@ var art = new Artplayer({
|
||||
thumbnails: {
|
||||
url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
|
||||
width: 190,
|
||||
height: 107
|
||||
}
|
||||
height: 107,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@@ -601,8 +602,8 @@ var art = new Artplayer({
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
moreVideoAttr: {
|
||||
'webkit-playsinline': true,
|
||||
playsinline: true
|
||||
}
|
||||
playsinline: true,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@@ -645,13 +646,13 @@ var art = new Artplayer({
|
||||
{
|
||||
default: true,
|
||||
name: 'SD 480P',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4'
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
},
|
||||
{
|
||||
name: 'HD 720P',
|
||||
url: url + '/video/one-more-time-one-more-chance-720p.mp4'
|
||||
}
|
||||
]
|
||||
url: url + '/video/one-more-time-one-more-chance-720p.mp4',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
@@ -686,25 +687,25 @@ var art = new Artplayer({
|
||||
highlight: [
|
||||
{
|
||||
time: 60,
|
||||
text: 'One more chance'
|
||||
text: 'One more chance',
|
||||
},
|
||||
{
|
||||
time: 120,
|
||||
text: '谁でもいいはずなのに'
|
||||
text: '谁でもいいはずなのに',
|
||||
},
|
||||
{
|
||||
time: 180,
|
||||
text: '夏の想い出がまわる'
|
||||
text: '夏の想い出がまわる',
|
||||
},
|
||||
{
|
||||
time: 240,
|
||||
text: 'こんなとこにあるはずもないのに'
|
||||
text: 'こんなとこにあるはずもないのに',
|
||||
},
|
||||
{
|
||||
time: 300,
|
||||
text: '－－终わり－－'
|
||||
}
|
||||
]
|
||||
text: '－－终わり－－',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
@@ -778,10 +779,10 @@ var art = new Artplayer({
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
opacity: '.9'
|
||||
}
|
||||
}
|
||||
]
|
||||
opacity: '.9',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
@@ -854,9 +855,9 @@ var art = new Artplayer({
|
||||
click: function() {
|
||||
document.querySelector('.video-wrap').classList.toggle('dark');
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
@@ -939,20 +940,58 @@ var art = new Artplayer({
|
||||
html: 'myController',
|
||||
click: function() {
|
||||
console.log('myController');
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
};
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## plugins
|
||||
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Custom plugins, The type of plugin is a function
|
||||
|
||||
[Run Code](/)
|
||||
|
||||
```js
|
||||
var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
plugins: [
|
||||
function myPlugin(art) {
|
||||
return {
|
||||
// This exposes plugin properties or methods for others to use. Like:
|
||||
something: 'something',
|
||||
doSomething: function() {
|
||||
console.log('Do something here...');
|
||||
},
|
||||
};
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.plugins.myPlugin.doSomething();
|
||||
```
|
||||
|
||||
# Instance properties
|
||||
|
||||
> TODO...
|
||||
|
||||
# Class static properties
|
||||
|
||||
> TODO...
|
||||
All properties are read only
|
||||
|
||||
| propertie | Description |
|
||||
| --------------------- | ------------------------- |
|
||||
| `Artplayer.version` | Version Information |
|
||||
| `Artplayer.config` | Configuration information |
|
||||
| `Artplayer.utils` | Utils function |
|
||||
| `Artplayer.DEFAULTS` | Default option |
|
||||
| `Artplayer.instances` | Instance collection |
|
||||
|
||||
# Event
|
||||
|
||||
@@ -1052,18 +1091,19 @@ var art = new Artplayer({
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4',
|
||||
url:
|
||||
'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4',
|
||||
type: 'torrent',
|
||||
customType: {
|
||||
torrent: function (video, url, art) {
|
||||
torrent: function(video, url, art) {
|
||||
var client = new WebTorrent();
|
||||
art.loading.show();
|
||||
client.add(url, function (torrent) {
|
||||
client.add(url, function(torrent) {
|
||||
var file = torrent.files[0];
|
||||
file.renderTo(video, {
|
||||
autoplay: true
|
||||
})
|
||||
})
|
||||
autoplay: true,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in new issue
Block a user