mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-16 17:46:17 -08:00
update deps
This commit is contained in:
Harvey committed
1 parent
fac37d2d9d
commit
11e871ddc8
21 files changed
+503
-548
No files matched your search
@@ -1,77 +0,0 @@
|
||||
## Install
|
||||
|
||||
Install with `npm`
|
||||
|
||||
```bash
|
||||
$ npm install artplayer
|
||||
```
|
||||
|
||||
Install with `yarn`
|
||||
|
||||
```bash
|
||||
$ yarn add artplayer
|
||||
```
|
||||
|
||||
Then load through the module
|
||||
|
||||
```js
|
||||
// ES6
|
||||
import Artplayer from 'artplayer';
|
||||
|
||||
// CommonJS
|
||||
const Artplayer = require('artplayer');
|
||||
```
|
||||
|
||||
Or umd builds are also available
|
||||
|
||||
```html
|
||||
<!-- locally -->
|
||||
<script src="path/to/artplayer.js"></script>
|
||||
|
||||
<!-- jsdelivr -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
|
||||
|
||||
<!-- unpkg -->
|
||||
<script src="https://unpkg.com/artplayer/dist/artplayer.js"></script>
|
||||
```
|
||||
|
||||
?> Will expose the global variable to `window.Artplayer`.
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ArtPlayer</title>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="artplayer-app" style="width:400px;height:300px"></div>
|
||||
<script src="path/to/artplayer.js"></script>
|
||||
<script>
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
!> The size of the player depends on the size of the `container`, so don’t forget to set the `height` and `width` of the `container`.
|
||||
|
||||
## Demo
|
||||
|
||||
[https://artplayer.org](https://artplayer.org)
|
||||
|
||||
?> Most of the code in this document is directly linked to the demo by click the `Run Code`.
|
||||
|
||||
[Run Code](/Configuration.container)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
```
|
||||
@@ -1,7 +0,0 @@
|
||||
- [Getting started](/)
|
||||
- [Options](/options)
|
||||
- [Properties](/properties)
|
||||
- [Events](/events)
|
||||
- [Class](/class)
|
||||
- [Libraries](/libraries)
|
||||
- [Question](/question)
|
||||
@@ -1,119 +0,0 @@
|
||||
## version
|
||||
|
||||
- Type: `String`
|
||||
|
||||
Return the player's version number
|
||||
|
||||
[Run Code](/Class.version)
|
||||
|
||||
```js
|
||||
console.info(Artplayer.version);
|
||||
```
|
||||
|
||||
## env
|
||||
|
||||
- Type: `String`
|
||||
|
||||
Return to the player's code environment: `development` or `production`
|
||||
|
||||
[Run Code](/Class.env)
|
||||
|
||||
```js
|
||||
console.info(Artplayer.env);
|
||||
```
|
||||
|
||||
## config
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Return all available `propertys`, `methods` and `events` of the `video` element
|
||||
|
||||
[Run Code](/Class.config)
|
||||
|
||||
```js
|
||||
console.info(Artplayer.config);
|
||||
```
|
||||
|
||||
## utils
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Return all functional tools for development
|
||||
|
||||
[Run Code](/Class.utils)
|
||||
|
||||
```js
|
||||
console.info(Object.keys(Artplayer.utils));
|
||||
```
|
||||
|
||||
## option
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Return to default player options
|
||||
|
||||
[Run Code](/Class.option)
|
||||
|
||||
```js
|
||||
console.log(Artplayer.option);
|
||||
```
|
||||
|
||||
## instances
|
||||
|
||||
- Type: `Array`
|
||||
|
||||
Return an array of all player instances
|
||||
|
||||
[Run Code](/Class.instances)
|
||||
|
||||
```js
|
||||
console.info(Artplayer.instances);
|
||||
```
|
||||
|
||||
## scheme
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Return the scheme used to verify player options
|
||||
|
||||
[Run Code](/Class.scheme)
|
||||
|
||||
```js
|
||||
console.info(Artplayer.scheme);
|
||||
```
|
||||
|
||||
## validator
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Return validator: [https://github.com/zhw2590582/option-validator](https://github.com/zhw2590582/option-validator)
|
||||
|
||||
[Run Code](/Class.validator)
|
||||
|
||||
```js
|
||||
console.info(Artplayer.validator);
|
||||
```
|
||||
|
||||
## kindOf
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Return type judgment function: [https://github.com/jonschlinkert/kind-of](https://github.com/jonschlinkert/kind-of)
|
||||
|
||||
[Run Code](/Class.kindOf)
|
||||
|
||||
```js
|
||||
console.info(Artplayer.kindOf);
|
||||
```
|
||||
|
||||
## Emitter
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
Return the `Emitter` constructor
|
||||
|
||||
[Run Code](/Class.Emitter)
|
||||
|
||||
```js
|
||||
console.info(Artplayer.Emitter);
|
||||
```
|
||||
@@ -1,77 +0,0 @@
|
||||
## 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:
|
||||
|
||||
[Run Code](/Events.video)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('video:canplay', function (event) {
|
||||
console.info(event);
|
||||
});
|
||||
|
||||
art.on('video:volumechange', function (event) {
|
||||
console.info(event);
|
||||
});
|
||||
```
|
||||
|
||||
## Player custom event
|
||||
|
||||
[Run Code](/Events.custom)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
});
|
||||
|
||||
art.on('ready', function (args) {
|
||||
console.info('The player can play');
|
||||
});
|
||||
```
|
||||
|
||||
| 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 player is destroyed | `undefined` |
|
||||
| `focus` | When the player gets focus | `undefined` |
|
||||
| `blur` | When the player loses focus | `undefined` |
|
||||
| `hover` | When the mouse is moved into or out | Whether moved into |
|
||||
| `resize` | When the player resize | `undefined` |
|
||||
| `mousemove` | When the mouse moves over the player | `undefined` |
|
||||
| `aspectRatio` | When aspect ratio change | Aspect ratio |
|
||||
| `url` | When the video url change | Video url |
|
||||
| `autoSize` | When the player auto size change | Player size |
|
||||
| `flip` | When the player flip change | Flip name |
|
||||
| `fullscreen` | When the full screen change | Whether full screen |
|
||||
| `fullscreenWeb` | When the web full screen change | Whether web full screen |
|
||||
| `fullscreenRotate` | When the rotate full screen change | Whether rotate full screen |
|
||||
| `pip` | When the picture in picture change | Whether in pip |
|
||||
| `mini` | When the mini player change | Whether in mini player |
|
||||
| `playbackRate` | When playback rate change | Playback rate |
|
||||
| `screenshot` | When a screenshot | Image data uri |
|
||||
| `switch` | When switching video url | Video url |
|
||||
| `loop` | When the interval loop change | Interval arrary |
|
||||
| `subtitleUpdate` | When the subtitles change | Current subtitle text |
|
||||
| `subtitleSwitch` | When switching subtitles | Current subtitle url |
|
||||
| `subtitleLoad` | When the subtitles loaded | Current subtitle url |
|
||||
| `subtitle` | When displaying subtitles | Whether to show |
|
||||
| `notice` | When displaying notice | Whether to show |
|
||||
| `mask` | When displaying mask | Whether to show |
|
||||
| `loading` | When displaying loading | Whether to show |
|
||||
| `layer` | When displaying layer | Whether to show |
|
||||
| `info` | When displaying info | Whether to show |
|
||||
| `setting` | When displaying setting | Whether to show |
|
||||
| `contextmenu` | When displaying contextmenu | Whether to show |
|
||||
| `control` | When displaying control | Whether to show |
|
||||
| `hotkey` | When the hotkey is triggered | Hotkey event object |
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
@@ -1,69 +0,0 @@
|
||||
<!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="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="https://unpkg.com/docsify/lib/themes/vue.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">Loading</div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'ArtPlayer',
|
||||
repo: 'zhw2590582/ArtPlayer',
|
||||
maxLevel: 4,
|
||||
auto2top: true,
|
||||
subMaxLevel: 3,
|
||||
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 = 'https://artplayer.org/?libs=' + libs + '&code=' + code;
|
||||
window.open(url);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}]
|
||||
}
|
||||
</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 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];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,113 +0,0 @@
|
||||
## 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,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
@@ -1,964 +0,0 @@
|
||||
## 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: '/assets/sample/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: '/assets/sample/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.jpg',
|
||||
});
|
||||
```
|
||||
|
||||
## title
|
||||
|
||||
- Type: `String`
|
||||
- Default: `''`
|
||||
|
||||
Video title, will be shown in `screenshot` file name and `mini` mode
|
||||
|
||||
[Run Code](/Configuration.title)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
title: '【新海诚动画】『秒速5センチメートル』',
|
||||
screenshot: true,
|
||||
});
|
||||
```
|
||||
|
||||
## 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,
|
||||
});
|
||||
```
|
||||
|
||||
## isLive
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to use live video mode
|
||||
|
||||
[Run Code](/Configuration.isLive)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
isLive: true,
|
||||
});
|
||||
```
|
||||
|
||||
## 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,
|
||||
});
|
||||
```
|
||||
|
||||
## autoMini
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
When the player scrolls out of the viewport, the mini player mode is automatically enabled
|
||||
|
||||
[Run Code](/Configuration.autoMini)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
autoMini: 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 |
|
||||
| `encoding` | `String` | Subtitle encoding, default is `utf-8` |
|
||||
| `bilingual` | `Boolean` | Whether bilingual subtitles |
|
||||
|
||||
[Run Code](/Configuration.subtitle)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.srt',
|
||||
encoding: 'utf-8',
|
||||
bilingual: true,
|
||||
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 layer = '/assets/sample/layer.png';
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
layers: [
|
||||
{
|
||||
html: `<img style="width: 100px" src="${layer}">`,
|
||||
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();
|
||||
```
|
||||
@@ -1,501 +0,0 @@
|
||||
## 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, only accepts 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, only accepts values：`normal`, `horizontal`, `vertical` and `false` |
|
||||
| `rotate` | `Number` | Set rotate, only accepts values：`-270`, `-180`, `-90`, `0`, `90`, `180`, `270` 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 |
|
||||
| `mini` | `Boolean` | Enable or disable mini player |
|
||||
| `minToggle` | `Boolean` | Toggle mini player |
|
||||
| `playbackRate` | `String` | Set playbackRate, only accepts 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',
|
||||
});
|
||||
|
||||
var layer = '/assets/sample/layer.png';
|
||||
art.layers.add({
|
||||
html: `<img style="width: 100px" src="${layer}">`,
|
||||
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 |
|
||||
| `style` | `Function` | Modify subtitle style |
|
||||
|
||||
Both `init` and `switch` accept subtitle url as the first parameter, and the second parameter as optional:
|
||||
|
||||
| propertie | type | Description |
|
||||
| ---------- | -------- | ----------------- |
|
||||
| `name` | `String` | Subtitle name |
|
||||
| `ext` | `String` | Subtitle format |
|
||||
| `encoding` | `String` | Subtitle encoding |
|
||||
|
||||
[Run Code](/Properties.subtitle)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
subtitle: {
|
||||
url: '/assets/sample/subtitle.srt',
|
||||
bilingual: true,
|
||||
},
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
index: 10,
|
||||
html: 'subtitle 01',
|
||||
click: function () {
|
||||
art.subtitle.style('color', 'green');
|
||||
art.subtitle.switch('/assets/sample/subtitle.srt', {
|
||||
name: 'srt subtitle name',
|
||||
ext: 'srt',
|
||||
encoding: 'utf-8',
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
position: 'right',
|
||||
index: 20,
|
||||
html: 'subtitle 02',
|
||||
click: function () {
|
||||
art.subtitle.style('color', 'red');
|
||||
art.subtitle.switch('/assets/sample/subtitle.vtt', {
|
||||
name: 'vtt subtitle name',
|
||||
ext: 'vtt',
|
||||
encoding: 'utf-8',
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## 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();
|
||||
```
|
||||
@@ -1,37 +0,0 @@
|
||||
## Create selector in the controls
|
||||
|
||||
Sometimes you need to customize the behavior of the selector, then you can add `selector` and `onSelect` properties when adding a control. At the same time, you can also perform custom operations by listening to the `selector` event
|
||||
|
||||
[Run Code](/Question.selector)
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: 'Subtitle 01',
|
||||
selector: [
|
||||
{
|
||||
name: 'Subtitle 01',
|
||||
url: '/assets/sample/subtitle.srt?id=1',
|
||||
},
|
||||
{
|
||||
name: 'Subtitle 02',
|
||||
url: '/assets/sample/subtitle.srt?id=2',
|
||||
},
|
||||
],
|
||||
onSelect: function (item) {
|
||||
art.subtitle.switch(item.url, {
|
||||
name: item.name
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.on('selector', function (item) {
|
||||
console.info(item);
|
||||
});
|
||||
```
|
||||
Reference in new issue
Block a user