mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
优化docs
This commit is contained in:
Harvey committed
1 parent
bafbd78018
commit
caa0128d37
24 files changed
+2667
-1850
No files matched your search
+39
-1751
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,6 @@
|
||||
- [Getting started](/)
|
||||
- [Options](/options)
|
||||
- [Properties](/properties)
|
||||
- [Events](/events)
|
||||
- [Class](/class)
|
||||
- [Libraries](/libraries)
|
||||
@@ -0,0 +1,99 @@
|
||||
## version
|
||||
|
||||
- Type: `String`
|
||||
|
||||
[Run Code](/Class.version)
|
||||
|
||||
```js
|
||||
console.log(Artplayer.version);
|
||||
```
|
||||
|
||||
## env
|
||||
|
||||
- Type: `String`
|
||||
|
||||
[Run Code](/Class.env)
|
||||
|
||||
```js
|
||||
console.log(Artplayer.env);
|
||||
```
|
||||
|
||||
## config
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
[Run Code](/Class.config)
|
||||
|
||||
```js
|
||||
console.log(Artplayer.config);
|
||||
```
|
||||
|
||||
## utils
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
[Run Code](/Class.utils)
|
||||
|
||||
```js
|
||||
console.log(Artplayer.utils);
|
||||
```
|
||||
|
||||
## option
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
[Run Code](/Class.option)
|
||||
|
||||
```js
|
||||
console.log(Artplayer.option);
|
||||
```
|
||||
|
||||
## instances
|
||||
|
||||
- Type: `Array`
|
||||
|
||||
[Run Code](/Class.instances)
|
||||
|
||||
```js
|
||||
console.log(Artplayer.instances.length);
|
||||
```
|
||||
|
||||
## scheme
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
[Run Code](/Class.scheme)
|
||||
|
||||
```js
|
||||
console.log(Artplayer.scheme);
|
||||
```
|
||||
|
||||
## Emitter
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
[Run Code](/Class.Emitter)
|
||||
|
||||
```js
|
||||
console.log(Artplayer.Emitter);
|
||||
```
|
||||
|
||||
## validator
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
[Run Code](/Class.validator)
|
||||
|
||||
```js
|
||||
console.log(Artplayer.validator);
|
||||
```
|
||||
|
||||
## kindOf
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
[Run Code](/Class.kindOf)
|
||||
|
||||
```js
|
||||
console.log(Artplayer.kindOf);
|
||||
```
|
||||
@@ -1,25 +0,0 @@
|
||||
(function () {
|
||||
window.runCode = function(hook) {
|
||||
hook.ready(function() {
|
||||
Array.from(document.querySelectorAll('.markdown-section a'))
|
||||
.filter(function(item) {
|
||||
return item.innerHTML === 'Run Code';
|
||||
})
|
||||
.forEach(function(item) {
|
||||
item.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
var codeElement = item.parentElement.nextElementSibling;
|
||||
if (
|
||||
codeElement.tagName === 'PRE' &&
|
||||
codeElement.dataset.lang === 'js'
|
||||
) {
|
||||
var libs = item.href.split('/lib=')[1] || '';
|
||||
var code = encodeURIComponent(codeElement.innerText);
|
||||
var url = 'https://artplayer.org/?libs=' + libs + '&code=' + code;
|
||||
window.open(url);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
})();
|
||||
@@ -0,0 +1,129 @@
|
||||
```js
|
||||
art.on('ready', function (args) {
|
||||
console.log('The player can play');
|
||||
});
|
||||
```
|
||||
|
||||
## Instance
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| --------------------- | --------------------------------------- | ----------------------- |
|
||||
| `ready` | When the video can be played | `undefined` |
|
||||
| `play` | When the video play | `undefined` |
|
||||
| `pause` | When the video pause | `undefined` |
|
||||
| `seek` | When the video seek | Video current time |
|
||||
| `volume` | When the video volume change | Video volume value |
|
||||
| `destroy` | When the instance is destroyed | `undefined` |
|
||||
| `focus` | When the player gets focus | `undefined` |
|
||||
| `blur` | When the player loses focus | `undefined` |
|
||||
| `hoverenter` | When the mouse is moved into the player | `undefined` |
|
||||
| `hoverleave` | When the mouse is moved out the player | `undefined` |
|
||||
| `resize` | When the player resize | Player size |
|
||||
| `mousemove` | When the mouse moves over the player | `undefined` |
|
||||
| `aspectRatioChange` | When aspect ratio change | Aspect ratio |
|
||||
| `aspectRatioRemove` | When aspect ratio remove | `undefined` |
|
||||
| `aspectRatioReset` | When aspect ratio reset | `undefined` |
|
||||
| `customType` | After triggering CustomType | Type name |
|
||||
| `urlChange` | After the video url change | Video url |
|
||||
| `autoSizeChange` | When the player auto size change | Player size |
|
||||
| `autoSizeRemove` | When the player auto size remove | `undefined` |
|
||||
| `flipChange` | When the player flip change | Flip name |
|
||||
| `flipRemove` | When the player flip remove | `undefined` |
|
||||
| `fullscreenChange` | When the full screen status change | Whether full screen |
|
||||
| `fullscreenWebChange` | When entering web full screen | Whether web full screen |
|
||||
| `pipChange` | When entering picture in picture | Whether in pip |
|
||||
| `minChange` | When entering min player | Whether in min player |
|
||||
| `playbackRateChange` | When playback rate change | Playback rate |
|
||||
| `playbackRateRemove` | When playback rate remove | `undefined` |
|
||||
| `playbackRateReset` | When playback rate reset | `undefined` |
|
||||
| `screenshot` | When a screenshot occurs | Image data uri |
|
||||
| `switch` | When switching video url | Video url |
|
||||
| `loopAdd` | When an interval loop is added | Interval arrary |
|
||||
| `loopRemove` | When the interval loop is deleted | `undefined` |
|
||||
| `loopStart` | When entering the interval cycle | Interval arrary |
|
||||
|
||||
## Video (Native event)
|
||||
|
||||
You can use all the native events of video directly: [MDN web docs - Media events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events).
|
||||
|
||||
But be careful to add the `video` prefix in front of the event:
|
||||
|
||||
```js
|
||||
art.on('video:canplay', function (event) {
|
||||
console.log(event);
|
||||
});
|
||||
```
|
||||
|
||||
## Subtitle
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ----------------- | ----------------------------- | --------------------- |
|
||||
| `subtitle:update` | When the subtitles change | Current subtitle text |
|
||||
| `subtitle:switch` | When switching subtitles | Current subtitle url |
|
||||
| `subtitle:load` | When the subtitles loaded | Current subtitle url |
|
||||
| `subtitle:err` | When the subtitles load error | Error object |
|
||||
| `subtitle:toggle` | When displaying subtitles | Whether to show |
|
||||
|
||||
## Notice
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| --------------- | ---------------------- | --------------- |
|
||||
| `notice:toggle` | When displaying notice | Whether to show |
|
||||
|
||||
## Mask
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ------------- | -------------------- | --------------- |
|
||||
| `mask:toggle` | When displaying mask | Whether to show |
|
||||
|
||||
## Loading
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ---------------- | ----------------------- | --------------- |
|
||||
| `loading:toggle` | When displaying loading | Whether to show |
|
||||
|
||||
## Layer
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| -------------- | ----------------------- | ------------------- |
|
||||
| `layer:add` | When adding a new layer | Layer configuration |
|
||||
| `layer:toggle` | When displaying layer | Whether to show |
|
||||
|
||||
## Info
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ------------- | -------------------- | --------------- |
|
||||
| `info:toggle` | When displaying info | Whether to show |
|
||||
|
||||
## Hotkey
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| -------- | ---------------------------- | ------------------- |
|
||||
| `hotkey` | When the hotkey is triggered | Hotkey event object |
|
||||
|
||||
## Setting
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ---------------- | ------------------------- | --------------------- |
|
||||
| `setting:add` | When adding a new setting | Setting configuration |
|
||||
| `setting:toggle` | When displaying setting | Whether to show |
|
||||
|
||||
## Contextmenu
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| -------------------- | ----------------------------- | ------------------------- |
|
||||
| `contextmenu:add` | When adding a new contextmenu | Contextmenu configuration |
|
||||
| `contextmenu:toggle` | When displaying contextmenu | Whether to show |
|
||||
|
||||
## Control
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ---------------- | ------------------------- | --------------------- |
|
||||
| `control:add` | When adding a new control | Control configuration |
|
||||
| `control:toggle` | When displaying control | Whether to show |
|
||||
|
||||
## Plugins
|
||||
|
||||
| Event | Description | Parameter |
|
||||
| ------------ | ------------------------ | -------------------- |
|
||||
| `plugin:add` | When adding a new plugin | Plugin configuration |
|
||||
+44
-11
@@ -1,36 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>ArtPlayer Document</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta name="keywords" content="artplayer,html5,video,player">
|
||||
<meta name="description" content="ArtPlayer is a modern HTML5 video player">
|
||||
<link rel="shortcut icon" href="./favicon.ico">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/docsify/lib/themes/vue.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="./common.js"></script>
|
||||
<div id="app">Loading</div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'ArtPlayer',
|
||||
repo: 'zhw2590582/ArtPlayer',
|
||||
maxLevel: 4,
|
||||
auto2top: true,
|
||||
subMaxLevel: 2,
|
||||
plugins: [window.runCode]
|
||||
loadSidebar: true,
|
||||
plugins: [function (hook) {
|
||||
hook.ready(function () {
|
||||
document.addEventListener('click', function (event) {
|
||||
if (event.target.tagName === 'A' && event.target.innerHTML === 'Run Code') {
|
||||
event.preventDefault();
|
||||
var codeElement = event.target.parentElement.nextElementSibling;
|
||||
if (
|
||||
codeElement.tagName === 'PRE' &&
|
||||
codeElement.dataset.lang === 'js'
|
||||
) {
|
||||
var libs = event.target.href.split('/lib=')[1] || '';
|
||||
var code = encodeURIComponent(codeElement.innerText);
|
||||
var url = 'http://localhost:8081/?libs=' + libs + '&code=' + code;
|
||||
window.open(url);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
<script src="https://unpkg.com/docsify@4.10.2/lib/docsify.min.js"></script>
|
||||
<script src="https://unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="https://unpkg.com/docsify/lib/plugins/search.min.js"></script>
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
var isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
window.location.hostname === '[::1]' ||
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
var _hmt = _hmt || [];
|
||||
(function () {
|
||||
if (!isLocalhost) {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?b6c9b8bafbf5fe7225160101dafbbc7d";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
## flv.js
|
||||
|
||||
- HomePage: [https://github.com/Bilibili/flv.js](https://github.com/Bilibili/flv.js)
|
||||
|
||||
[Run Code](/lib=https://cdn.bootcss.com/flv.js/1.4.2/flv.js)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
autoplay: true,
|
||||
url: '/assets/sample/video.flv',
|
||||
customType: {
|
||||
flv: function (video, url) {
|
||||
const flvPlayer = flvjs.createPlayer({
|
||||
type: 'flv',
|
||||
url: url,
|
||||
});
|
||||
flvPlayer.attachMediaElement(video);
|
||||
flvPlayer.load();
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## hls.js
|
||||
|
||||
- HomePage: [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js)
|
||||
|
||||
[Run Code](/lib=https://cdn.bootcss.com/hls.js/0.10.1/hls.js)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
autoplay: true,
|
||||
url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
|
||||
customType: {
|
||||
m3u8: function (video, url) {
|
||||
var hls = new Hls();
|
||||
hls.loadSource(url);
|
||||
hls.attachMedia(video);
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## dash.js
|
||||
|
||||
- HomePage: [https://github.com/Dash-Industry-Forum/dash.js](https://github.com/Dash-Industry-Forum/dash.js)
|
||||
|
||||
[Run Code](/lib=https://cdn.bootcss.com/dashjs/2.9.2/dash.all.min.js)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
autoplay: true,
|
||||
url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
|
||||
customType: {
|
||||
mpd: function (video, url) {
|
||||
var player = dashjs.MediaPlayer().create();
|
||||
player.initialize(video, url, true);
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## shaka-player
|
||||
|
||||
- HomePage: [https://github.com/google/shaka-player](https://github.com/google/shaka-player)
|
||||
|
||||
[Run Code](/lib=https://cdn.bootcss.com/shaka-player/2.5.0-beta/shaka-player.compiled.js)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
autoplay: true,
|
||||
url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd',
|
||||
customType: {
|
||||
mpd: function (video, url) {
|
||||
shaka.polyfill.installAll();
|
||||
var player = new shaka.Player(video);
|
||||
player.load(url);
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## webtorrent
|
||||
|
||||
- HomePage: [https://github.com/webtorrent/webtorrent](https://github.com/webtorrent/webtorrent)
|
||||
|
||||
[Run Code](/lib=https://cdn.bootcss.com/webtorrent/0.102.4/webtorrent.min.js)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
autoplay: true,
|
||||
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) {
|
||||
var client = new WebTorrent();
|
||||
art.loading.show = true;
|
||||
client.add(url, function (torrent) {
|
||||
var file = torrent.files[0];
|
||||
file.renderTo(video, {
|
||||
autoplay: true,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,941 @@
|
||||
## container
|
||||
|
||||
- Type: `String、Element`
|
||||
- Default: `#artplayer`
|
||||
- Required: `true`
|
||||
|
||||
DOM container of the player
|
||||
|
||||
[Run Code](/Configuration.container)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
// container: document.querySelector('.artplayer-app'),
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
```
|
||||
|
||||
You may need to initialize a size for the container element, like:
|
||||
|
||||
```css
|
||||
.artplayer-app {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
```
|
||||
|
||||
## url
|
||||
|
||||
- Type: `String`
|
||||
- Default: `''`
|
||||
- Required: `true`
|
||||
|
||||
Video source url, Three video file formats are supported: `mp4`, `ogg`, `webm`
|
||||
|
||||
[Run Code](/Configuration.url)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
```
|
||||
|
||||
## type
|
||||
|
||||
- Type: `String`
|
||||
- Default: `''`
|
||||
|
||||
Specify the format for the `url`, use with `customType`
|
||||
|
||||
[Run Code](/Configuration.type)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.flv',
|
||||
type: 'flv',
|
||||
});
|
||||
```
|
||||
|
||||
## customType
|
||||
|
||||
- Type: `Object`
|
||||
- Default: `{}`
|
||||
|
||||
Customize when loading third-party libraries
|
||||
|
||||
[Run Code](/Configuration.customType)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.flv',
|
||||
type: 'flv',
|
||||
customType: {
|
||||
flv: function (video, url, art) {
|
||||
// video: The video element
|
||||
// url: The video url
|
||||
// art: The Artplayer instance
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## whitelist
|
||||
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
The current player uses the simplest native components on mobile devices, but you can filter this feature through whitelist. `whitelist` accept `String`, `function`, and `regular` expressions, contrast information comes from `window.navigator.userAgent`
|
||||
|
||||
By default, non-whitelisted devices only set video native properties and third-party dependencies.
|
||||
|
||||
`*` is a special value indicating that all mobile devices have the Artplayer UI enabled
|
||||
|
||||
[Open with mobile](https://artplayer.org/mobile.html)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
whitelist: ['iPhone OS 11'],
|
||||
// whitelist: ['*'],
|
||||
// whitelist: [(ua) => /iPhone OS 11/gi.test(ua)],
|
||||
// whitelist: [/iPhone OS 11/gi]
|
||||
});
|
||||
```
|
||||
|
||||
## poster
|
||||
|
||||
- Type: `String`
|
||||
- Default: `''`
|
||||
|
||||
Video poster image url
|
||||
|
||||
[Run Code](/Configuration.poster)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
poster: '/assets/sample/poster.jpeg',
|
||||
});
|
||||
```
|
||||
|
||||
## title
|
||||
|
||||
- Type: `String`
|
||||
- Default: `''`
|
||||
|
||||
Video title, will be shown in `screenshot` file name and `pip` mode
|
||||
|
||||
[Run Code](/Configuration.title)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
title: '【新海诚动画】『秒速5センチメートル』',
|
||||
});
|
||||
```
|
||||
|
||||
## volume
|
||||
|
||||
- Type: `Number`
|
||||
- Default: `0.7`
|
||||
|
||||
Default volume, player will cache the last volume, which may be overwritten
|
||||
|
||||
[Run Code](/Configuration.volume)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
volume: 0.5,
|
||||
});
|
||||
```
|
||||
|
||||
## muted
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to mute by default
|
||||
|
||||
[Run Code](/Configuration.muted)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
muted: true,
|
||||
});
|
||||
```
|
||||
|
||||
## autoplay
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to play automatically, sometimes it doesn't necessarily succeed
|
||||
|
||||
More info: [autoplay-policy-changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
|
||||
|
||||
[Run Code](/Configuration.autoplay)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
autoplay: true,
|
||||
});
|
||||
```
|
||||
|
||||
## autoSize
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Keep the original video aspect ratio and automatically zoom
|
||||
|
||||
[Run Code](/Configuration.autoSize)
|
||||
|
||||
```js
|
||||
// Zoom browser window
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
autoSize: true,
|
||||
});
|
||||
```
|
||||
|
||||
## autoMin
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
When the player scrolls out of the viewport, the mini player mode is automatically enabled
|
||||
|
||||
[Run Code](/Configuration.autoMin)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
autoMin: true,
|
||||
});
|
||||
```
|
||||
|
||||
## loop
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Automatic loop playback
|
||||
|
||||
[Run Code](/Configuration.loop)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
loop: true,
|
||||
});
|
||||
```
|
||||
|
||||
## playbackRate
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to show playback rate controller in the contextmenu and setting panel
|
||||
|
||||
[Run Code](/Configuration.playbackRate)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
playbackRate: true,
|
||||
setting: true,
|
||||
});
|
||||
```
|
||||
|
||||
## aspectRatio
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to show aspect ratio controller in the contextmenu and setting panel
|
||||
|
||||
[Run Code](/Configuration.aspectRatio)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
aspectRatio: true,
|
||||
setting: true,
|
||||
});
|
||||
```
|
||||
|
||||
## screenshot
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to show screenshot controller in the bottom, If the video resource exists cross-domain, the screenshot may fail. Unless serves this url with the correct `Access-Control-Allow-Origin`, and Set the video's `crossOrigin` property to `anonymous`
|
||||
|
||||
[Run Code](/Configuration.screenshot)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
screenshot: true,
|
||||
|
||||
// Optional
|
||||
moreVideoAttr: {
|
||||
crossOrigin: 'anonymous',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## setting
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to show setting controller in the bottom
|
||||
|
||||
[Run Code](/Configuration.setting)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
});
|
||||
```
|
||||
|
||||
## pip
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to show pip controller in the bottom, it will give priority to the native picture-in-picture feature.
|
||||
|
||||
More info: [picture-in-picture](https://developers.google.com/web/updates/2017/09/picture-in-picture)
|
||||
|
||||
[Run Code](/Configuration.pip)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
pip: true,
|
||||
});
|
||||
```
|
||||
|
||||
## fullscreen
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to show window fullscreen controller in the bottom
|
||||
|
||||
[Run Code](/Configuration.fullscreen)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
fullscreen: true,
|
||||
});
|
||||
```
|
||||
|
||||
## fullscreenWeb
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to show web page fullscreen controller in the bottom
|
||||
|
||||
[Run Code](/Configuration.fullscreenWeb)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
fullscreenWeb: true,
|
||||
});
|
||||
```
|
||||
|
||||
## mutex
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `true`
|
||||
|
||||
Player mutually exclusive, only one player can play at a time
|
||||
|
||||
[Run Code](/Configuration.mutex)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
mutex: true,
|
||||
});
|
||||
```
|
||||
|
||||
## light
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to display the light mode in the context menu
|
||||
|
||||
[Run Code](/Configuration.light)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
light: true,
|
||||
});
|
||||
```
|
||||
|
||||
## backdrop
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `true`
|
||||
|
||||
Whether to use blurred background in the context menu and settings panel
|
||||
|
||||
[Run Code](/Configuration.backdrop)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
backdrop: true,
|
||||
});
|
||||
```
|
||||
|
||||
## hotkey
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `true`
|
||||
|
||||
Whether to use hotkey
|
||||
|
||||
[Run Code](/Configuration.hotkey)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
hotkey: true,
|
||||
});
|
||||
```
|
||||
|
||||
| Key | Description |
|
||||
| ------- | --------------- |
|
||||
| `↑` | Increase volume |
|
||||
| `↓` | Decrease volume |
|
||||
| `←` | Seek backward |
|
||||
| `→` | Seek forward |
|
||||
| `space` | Toggle playback |
|
||||
|
||||
## lang
|
||||
|
||||
- Type: `String`
|
||||
- Default: `navigator.language.toLowerCase()`
|
||||
|
||||
Default display language: en, zh-cn, zh-tw
|
||||
|
||||
[Run Code](/Configuration.lang)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
lang: 'en',
|
||||
});
|
||||
```
|
||||
|
||||
## icons
|
||||
|
||||
- Type: `Object`
|
||||
- Default: `{}`
|
||||
|
||||
Replace the default icon
|
||||
|
||||
[Run Code](/Configuration.icons)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
icons: {
|
||||
loading: '',
|
||||
state: '',
|
||||
play: '',
|
||||
pause: '',
|
||||
volume: '',
|
||||
volumeClose: '',
|
||||
subtitle: '',
|
||||
screenshot: '',
|
||||
setting: '',
|
||||
fullscreen: '',
|
||||
fullscreenWeb: '',
|
||||
pip: '',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## theme
|
||||
|
||||
- Type: `String`
|
||||
- Default: `#f00`
|
||||
|
||||
Default theme color
|
||||
|
||||
[Run Code](/Configuration.theme)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
theme: '#ffad00',
|
||||
});
|
||||
```
|
||||
|
||||
## subtitleOffset
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Subtitle time offset plugin
|
||||
|
||||
[Run Code](/Configuration.subtitleOffset)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.srt',
|
||||
},
|
||||
setting: true,
|
||||
subtitleOffset: true,
|
||||
});
|
||||
```
|
||||
|
||||
## miniProgressBar
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Mini progress bar plugin
|
||||
|
||||
[Run Code](/Configuration.miniProgressBar)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
miniProgressBar: true,
|
||||
});
|
||||
```
|
||||
|
||||
## localVideo
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Local video preview plugin. By default, a configuration is added in the settings panel.
|
||||
|
||||
[Run Code](/Configuration.localVideo)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
localVideo: true,
|
||||
controls: [
|
||||
{
|
||||
name: 'preview',
|
||||
position: 'right',
|
||||
html: 'OPEN VIDEO',
|
||||
mounted: ($preview) => {
|
||||
art.plugins.localVideo.attach($preview);
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## localSubtitle
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Local subtitle preview plugin. By default, a configuration is added in the settings panel.
|
||||
|
||||
[Run Code](/Configuration.localSubtitle)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
localSubtitle: true,
|
||||
controls: [
|
||||
{
|
||||
name: 'preview',
|
||||
position: 'right',
|
||||
html: 'OPEN SUBTITLE',
|
||||
mounted: ($preview) => {
|
||||
art.plugins.localSubtitle.attach($preview);
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## networkMonitor
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
A network monitor is used to monitor the blocking of the video.
|
||||
|
||||
[Run Code](/Configuration.networkMonitor)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
networkMonitor: true,
|
||||
});
|
||||
|
||||
// Is the ratio of the time the video is blocked to the time the video has been played.
|
||||
// For example, when the ratio is equal to 0.3, it means that every 10 seconds of sampling time, it is blocked for three seconds.
|
||||
|
||||
let notice = false;
|
||||
art.on('networkMonitor', (ratio) => {
|
||||
if (ratio >= 0.5 && !notice) {
|
||||
notice = true;
|
||||
console.log('Current network condition is not good');
|
||||
}
|
||||
});
|
||||
|
||||
// Modify sampling time, the unit is milliseconds, default 10 seconds.
|
||||
art.plugins.networkMonitor.sample(30000);
|
||||
```
|
||||
|
||||
## subtitle
|
||||
|
||||
- Type: `Object`
|
||||
- Default: `{}`
|
||||
|
||||
Custom subtitle
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | -------- | ---------------------------------------- |
|
||||
| `url` | `String` | Subtitle url, support vtt and srt format |
|
||||
| `style` | `Object` | Subtitle style |
|
||||
|
||||
[Run Code](/Configuration.subtitle)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.srt',
|
||||
style: {
|
||||
color: '#03A9F4',
|
||||
'font-size': '30px',
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## thumbnails
|
||||
|
||||
- Type: `Object`
|
||||
- Default: `{}`
|
||||
|
||||
Custom thumbnails in the progress bar with lazy load
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | -------- | -------------------------------------- |
|
||||
| `url` | `String` | Thumbnails image url |
|
||||
| `number` | `Number` | Total number of thumbnails |
|
||||
| `width` | `Number` | The width of each thumbnail |
|
||||
| `height` | `Number` | The height of each thumbnail |
|
||||
| `column` | `Number` | Total number of columns for thumbnails |
|
||||
|
||||
[Run Code](/Configuration.thumbnails)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
thumbnails: {
|
||||
url: '/assets/sample/thumbnails.png',
|
||||
number: 100,
|
||||
width: 160,
|
||||
height: 90,
|
||||
column: 10,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## moreVideoAttr
|
||||
|
||||
- Type: `Object`
|
||||
- Default: `{'controls': false,'preload': 'metadata'}`
|
||||
|
||||
More video Attributes, these properties will be written directly to the video element
|
||||
|
||||
[Run Code](/Configuration.moreVideoAttr)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
moreVideoAttr: {
|
||||
'webkit-playsinline': true,
|
||||
playsInline: true,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## quality
|
||||
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Custom quality, The type of quality is an object
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | --------- | ------------------------------------------------------------------------------ |
|
||||
| `default` | `Boolean` | Whether the default quality, if not specified, the first quality will be taken |
|
||||
| `name` | `String` | Quality name to show |
|
||||
| `url` | `String` | Video url |
|
||||
|
||||
[Run Code](/Configuration.quality)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
quality: [
|
||||
{
|
||||
default: true,
|
||||
name: 'SD 480P',
|
||||
url: '/assets/sample/video.mp4',
|
||||
},
|
||||
{
|
||||
name: 'HD 720P',
|
||||
url: '/assets/sample/video.mp4',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## highlight
|
||||
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Custom highlight, The type of highlight is an object
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | -------- | ---------------- |
|
||||
| `time` | `Number` | highlight second |
|
||||
| `text` | `String` | highlight text |
|
||||
|
||||
[Run Code](/Configuration.highlight)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
highlight: [
|
||||
{
|
||||
time: 60,
|
||||
text: 'One more chance',
|
||||
},
|
||||
{
|
||||
time: 120,
|
||||
text: '谁でもいいはずなのに',
|
||||
},
|
||||
{
|
||||
time: 180,
|
||||
text: '夏の想い出がまわる',
|
||||
},
|
||||
{
|
||||
time: 240,
|
||||
text: 'こんなとこにあるはずもないのに',
|
||||
},
|
||||
{
|
||||
time: 300,
|
||||
text: '－－终わり－－',
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## layers
|
||||
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Custom layer, The type of layer is an object or function
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ------------------- | --------------------------------------------- |
|
||||
| `disable` | `Boolean` | Whether to disable |
|
||||
| `name` | `String` | The unique name , used for the class name |
|
||||
| `index` | `Number` | The unique index, used for the priority level |
|
||||
| `html` | `String`、`Element` | The dom element |
|
||||
| `style` | `Object` | The style object |
|
||||
| `click` | `Function` | Click event |
|
||||
| `mounted` | `Function` | Callback after mounted |
|
||||
| `tooltip` | `String` | Tooltip text |
|
||||
|
||||
[Run Code](/Configuration.layers)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
layers: [
|
||||
{
|
||||
html: `<img style="width: 100px" src="/assets/sample/layer.png">`,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
opacity: '.9',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## contextmenu
|
||||
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Custom contextmenu, The type of layer is an object or function
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ------------------- | --------------------------------------------- |
|
||||
| `disable` | `Boolean` | Whether to disable |
|
||||
| `name` | `String` | The unique name , used for the class name |
|
||||
| `index` | `Number` | The unique index, used for the priority level |
|
||||
| `html` | `String`、`Element` | The dom element |
|
||||
| `style` | `Object` | The style object |
|
||||
| `click` | `Function` | Click event |
|
||||
| `mounted` | `Function` | Callback after mounted |
|
||||
| `tooltip` | `String` | Tooltip text |
|
||||
|
||||
[Run Code](/Configuration.contextmenu)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
contextmenu: [
|
||||
{
|
||||
html: 'Custom menu',
|
||||
click: function (contextmenu) {
|
||||
console.info('You clicked on the custom menu');
|
||||
contextmenu.show = false;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## controls
|
||||
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Custom controls, The type of controls is an object or function
|
||||
|
||||
| propertie | type | Description |
|
||||
| ---------- | ------------------- | ----------------------------------------------------------------- |
|
||||
| `disable` | `Boolean` | Whether to disable |
|
||||
| `name` | `String` | The unique name , used for the class name |
|
||||
| `index` | `Number` | The unique index, used for the priority level |
|
||||
| `html` | `String`、`Element` | The dom element |
|
||||
| `style` | `Object` | The style object |
|
||||
| `click` | `Function` | Click event |
|
||||
| `mounted` | `Function` | Callback after mounted |
|
||||
| `position` | `String` | The position where the controller appears: `top`, `left`, `right` |
|
||||
| `tooltip` | `String` | Tooltip text |
|
||||
|
||||
[Run Code](/Configuration.controls)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
name: 'myController',
|
||||
position: 'right',
|
||||
index: 10,
|
||||
html: 'myController',
|
||||
tooltip: 'This is my controller',
|
||||
click: function () {
|
||||
console.log('myController');
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## plugins
|
||||
|
||||
- Type: `Array`
|
||||
- Default: `[]`
|
||||
|
||||
Custom plugins, The type of plugin is a function
|
||||
|
||||
[Run Code](/Configuration.plugins)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
plugins: [
|
||||
function myPlugin(art) {
|
||||
// Do something you like here.
|
||||
// You can also return an object for external calls.
|
||||
console.info('myPlugin running...');
|
||||
return {
|
||||
// This exposes plugin properties or methods for others to use. Like:
|
||||
something: 'something',
|
||||
doSomething: function () {
|
||||
console.info('Do something here...');
|
||||
},
|
||||
};
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// Call plugin from the outside
|
||||
art.plugins.myPlugin.doSomething();
|
||||
```
|
||||
@@ -0,0 +1,479 @@
|
||||
## Instance
|
||||
|
||||
| propertie | type | Description |
|
||||
| ----------- | ---------- | ------------------------------------------------ |
|
||||
| `isFocus` | `Boolean` | Return the focus state |
|
||||
| `userAgent` | `String` | The user agent |
|
||||
| `isMobile` | `boolean` | Whether mobile access |
|
||||
| `isDestroy` | `Boolean` | Return the destroy state |
|
||||
| `option` | `Object` | Return the merge option |
|
||||
| `destroy` | `Function` | Destroy instance, will not remove dom by default |
|
||||
|
||||
[Run Code](/Properties.instance)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
console.log('isFocus', art.isFocus);
|
||||
console.log('isDestroy', art.isDestroy);
|
||||
console.log('option', art.option);
|
||||
|
||||
setTimeout(function () {
|
||||
// remove dom
|
||||
art.destroy();
|
||||
|
||||
// keep dom
|
||||
// art.destroy(false);
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
## player
|
||||
|
||||
Player core function.
|
||||
|
||||
All player properties and methods can be accessed directly through the instance. For example, the following properties are all equal:
|
||||
|
||||
```js
|
||||
art.currentTime === art.player.currentTime;
|
||||
art.volume === art.player.volume;
|
||||
art.seek === art.player.seek;
|
||||
```
|
||||
|
||||
| propertie | type | Description |
|
||||
| ------------------------ | ---------- | ------------------------------------------------------------------------------------------------- |
|
||||
| `aspectRatio` | `String` | Set aspect ratio, Currently only accepts three values：`default`, `4:3`, `16:9` and `false` |
|
||||
| `aspectRatioReset` | `Boolean` | Recalculate the aspect ratio |
|
||||
| `url` | `String` | `Getter` and `Setter` of the video url |
|
||||
| `autoSize` | `Boolean` | Set auto size |
|
||||
| `currentTime` | `Number` | `Getter` and `Setter` of the current time |
|
||||
| `duration` | `Number` | `Getter` of the duration |
|
||||
| `flip` | `String` | Set flip, Currently only accepts three values：`normal`, `horizontal`, `vertical` and `false` |
|
||||
| `fullscreen` | `Boolean` | Enable or disable fullscreen |
|
||||
| `fullscreenToggle` | `Boolean` | Toggle fullscreen |
|
||||
| `fullscreenWeb` | `Boolean` | Enable or disable web fullscreen |
|
||||
| `fullscreenWebToggle` | `Boolean` | Toggle web fullscreen |
|
||||
| `fullscreenRotate` | `Boolean` | Enable or disable web fullscreen on the mobile |
|
||||
| `fullscreenRotateToggle` | `Boolean` | Toggle web fullscreen on the mobile |
|
||||
| `loaded` | `Number` | Return the proportion of the load |
|
||||
| `pause` | `Boolean` | Pause playback |
|
||||
| `pip` | `Boolean` | Enable or disable pip |
|
||||
| `pipToggle` | `Boolean` | Toggle pip |
|
||||
| `min` | `Boolean` | Enable or disable min player |
|
||||
| `minToggle` | `Boolean` | Toggle min player |
|
||||
| `playbackRate` | `String` | Set playbackRate, Currently only accepts three values：`0.5`, `0.75`, `1.0`, `1.25`, `1.5`, `2.0` |
|
||||
| `playbackRateReset` | `Boolean` | Recalculate the playback rate |
|
||||
| `played` | `Number` | Return the proportion of the played |
|
||||
| `playing` | `Boolean` | Return to playing state |
|
||||
| `play` | `Boolean` | Start playback |
|
||||
| `screenshot` | `Function` | Download a screenshot of current time |
|
||||
| `seek` | `Number` | Set the current time |
|
||||
| `forward` | `Number` | Video fast forward |
|
||||
| `backward` | `Number` | Video fast backward |
|
||||
| `switchQuality` | `Function` | Switch video quality |
|
||||
| `switchUrl` | `Function` | Switch video url |
|
||||
| `toggle` | `Boolean` | Toggle play and pause |
|
||||
| `volume` | `Number` | `Getter` and `Setter` of the current volume |
|
||||
| `muted` | `Boolean` | `Getter` and `Setter` of the muted |
|
||||
| `light` | `Boolean` | `Getter` and `Setter` of the light mode |
|
||||
| `url` | `String` | `Getter` and `Setter` of the video url |
|
||||
| `loop` | `Arrary` | `Getter` and `Setter` of the interval loop |
|
||||
|
||||
[Run Code](/Properties.player)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
art.player.seek = 5;
|
||||
art.player.screenshot();
|
||||
});
|
||||
```
|
||||
|
||||
## storage
|
||||
|
||||
The player will automatically add a `localStorage` object named `artplayer_settings`, Now the player will only set and read the `volume` value.
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ---------- | ----------------- |
|
||||
| `get` | `Function` | Get a storage |
|
||||
| `set` | `Function` | Set a storage |
|
||||
| `del` | `Function` | Delete a storage |
|
||||
| `clean` | `Function` | Clean all storage |
|
||||
|
||||
[Run Code](/Properties.storage)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.storage.set('your-key', 'your-value');
|
||||
console.log(art.storage.get('your-key'));
|
||||
```
|
||||
|
||||
## i18n
|
||||
|
||||
The current support i18n has: `en`, `zh-cn`, `zh-tw`
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ---------- | ------------------------------- |
|
||||
| `get` | `Function` | Get the a i18n value |
|
||||
| `update` | `Function` | Pass in a parameter for merging |
|
||||
|
||||
[Run Code](/Properties.i18n)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
lang: 'jp',
|
||||
});
|
||||
|
||||
console.log(art.i18n.get('Play'));
|
||||
art.i18n.update({
|
||||
'zh-cn': {
|
||||
Language: '简体',
|
||||
},
|
||||
'zh-tw': {
|
||||
Language: '繁體',
|
||||
},
|
||||
jp: {
|
||||
Language: '日文',
|
||||
},
|
||||
});
|
||||
console.log(art.i18n.get('Language'));
|
||||
```
|
||||
|
||||
## hotkey
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ---------- | ------------ |
|
||||
| `add` | `function` | Add a hotkey |
|
||||
|
||||
[Run Code](/Properties.hotkey)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
// Add a hotkey
|
||||
art.hotkey.add(27, function (event) {
|
||||
console.log('You pressed esc button');
|
||||
});
|
||||
```
|
||||
|
||||
## whitelist
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | --------- | ------------------------------------- |
|
||||
| `state` | `Boolean` | Whether to enable the UI on the phone |
|
||||
|
||||
## notice
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | -------- | -------------- |
|
||||
| `show` | `setter` | Show a message |
|
||||
|
||||
[Run Code](/Properties.notice)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
// auto hide
|
||||
art.notice.show = 'some message';
|
||||
```
|
||||
|
||||
## events
|
||||
|
||||
Agent for managing native events
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ---------- | ------------------------------------------------------------------------------------ |
|
||||
| `proxy` | `Function` | A proxy for `addEventListener` and `removeEventListener` to manage event destruction |
|
||||
| `hover` | `Function` | Hover simplified proxy |
|
||||
| `loadImg` | `Function` | Determine whether to finish the picture |
|
||||
| `destroy` | `Function` | Destroy all events |
|
||||
|
||||
[Run Code](/Properties.events)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
var target = document.querySelector('body');
|
||||
art.events.proxy(target, 'click', function (e) {
|
||||
console.log('body click');
|
||||
});
|
||||
```
|
||||
|
||||
## layers
|
||||
|
||||
Layer manager, and every layer has `show` and `hide` funciton
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ---------- | ----------------------- |
|
||||
| `add` | `Function` | Dynamically add a layer |
|
||||
| `show` | `setter` | Show or hide |
|
||||
|
||||
[Run Code](/Properties.layers)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.layers.add({
|
||||
html: `<img style="width: 100px" src="${url}/image/your-name.png">`,
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
opacity: '.9',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## controls
|
||||
|
||||
Controls manager, and every control has `show` setter
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ---------- | ------------------------- |
|
||||
| `add` | `Function` | Dynamically add a control |
|
||||
| `show` | `setter` | Show or hide |
|
||||
|
||||
[Run Code](/Properties.controls)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.controls.add({
|
||||
name: 'myController',
|
||||
position: 'right',
|
||||
index: 10,
|
||||
html: 'myController',
|
||||
tooltip: 'This is my controller',
|
||||
click: function () {
|
||||
console.log('myController');
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## contextmenu
|
||||
|
||||
Contextmenu manager, and every contextmenu has `show` setter
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ---------- | ----------------------------- |
|
||||
| `add` | `Function` | Dynamically add a contextmenu |
|
||||
| `show` | `setter` | Show or hide |
|
||||
|
||||
[Run Code](/Properties.contextmenu)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.contextmenu.add({
|
||||
html: 'Custom menu',
|
||||
click: function (contextmenu) {
|
||||
console.info('You clicked on the custom menu');
|
||||
contextmenu.show = false;
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## subtitle
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ---------- | ---------------- |
|
||||
| `init` | `Function` | Init subtitle |
|
||||
| `show` | `setter` | Show or hide |
|
||||
| `switch` | `Function` | Switch subtitle |
|
||||
| `url` | `getter` | get subtitle url |
|
||||
|
||||
[Run Code](/Properties.subtitle)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.srt',
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
index: 10,
|
||||
html: 'subtitle 01',
|
||||
click: function () {
|
||||
art.subtitle.switch('/assets/sample/subtitle.srt', 'srt subtitle name');
|
||||
},
|
||||
},
|
||||
{
|
||||
position: 'right',
|
||||
index: 20,
|
||||
html: 'subtitle 02',
|
||||
click: function () {
|
||||
art.subtitle.switch('/assets/sample/subtitle.vtt', 'vtt subtitle name');
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## loading
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | -------- | ------------ |
|
||||
| `show` | `setter` | Show or hide |
|
||||
|
||||
[Run Code](/Properties.loading)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', function () {
|
||||
// Show the loading
|
||||
art.loading.show = true;
|
||||
setTimeout(function () {
|
||||
// Hide the loading
|
||||
art.loading.show = false;
|
||||
}, 5000);
|
||||
});
|
||||
```
|
||||
|
||||
## mask
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | -------- | ------------ |
|
||||
| `show` | `setter` | Show or hide |
|
||||
|
||||
[Run Code](/Properties.mask)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', function () {
|
||||
// Show the mask
|
||||
art.mask.show = true;
|
||||
setTimeout(function () {
|
||||
// Hide the mask
|
||||
art.mask.show = false;
|
||||
}, 5000);
|
||||
});
|
||||
```
|
||||
|
||||
## setting
|
||||
|
||||
Setting manager, and every setting has `show` and `hide` funciton
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ---------- | ------------------------- |
|
||||
| `add` | `Function` | Dynamically add a setting |
|
||||
| `show` | `setter` | Show or hide |
|
||||
|
||||
[Run Code](/Properties.setting)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
setting: true,
|
||||
});
|
||||
|
||||
art.on('ready', function () {
|
||||
// Add a setting
|
||||
art.setting.add({
|
||||
html: 'Your Setting',
|
||||
name: 'yourSetting',
|
||||
});
|
||||
|
||||
// Show the setting
|
||||
art.setting.show = true;
|
||||
setTimeout(function () {
|
||||
// Hide the setting
|
||||
art.setting.show = false;
|
||||
}, 5000);
|
||||
});
|
||||
```
|
||||
|
||||
## plugins
|
||||
|
||||
Plugins manager
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
| propertie | type | Description |
|
||||
| --------- | ---------- | ------------------------ |
|
||||
| `add` | `Function` | Dynamically add a plugin |
|
||||
|
||||
[Run Code](/Properties.plugins)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.plugins.add(function myPlugin(art) {
|
||||
// Do something you like here.
|
||||
// You can also return an object for external calls.
|
||||
console.info('myPlugin running...');
|
||||
return {
|
||||
// This exposes plugin properties or methods for others to use. Like:
|
||||
something: 'something',
|
||||
doSomething: function () {
|
||||
console.info('Do something here...');
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// Call plugin from the outside
|
||||
art.plugins.myPlugin.something === 'something';
|
||||
art.plugins.myPlugin.doSomething();
|
||||
```
|
||||
Reference in new issue
Block a user