Installation and Usage
Installation
npm install artplayeryarn add artplayerpnpm add artplayer<script src="path/to/artplayer.js"></script>CDN
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.jshttps://unpkg.com/artplayer/dist/artplayer.jsUsage
<html>
<head>
<title>ArtPlayer Demo</title>
<meta charset="UTF-8" />
<style>
.artplayer-app {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div class="artplayer-app"></div>
<script src="path/to/artplayer.js"></script>
<script>
const art = new Artplayer({
container: '.artplayer-app',
url: 'path/to/video.mp4',
});
</script>
</body>
</html>Warning
The player's size depends on the size of the container container, so your container container must have a size.
You can find more usage examples at the link below
Vue.js
<template>
<div ref="artRef"></div>
</template>
<script>
import Artplayer from "artplayer";
export default {
data() {
return {
instance: null,
};
},
props: {
option: {
type: Object,
required: true,
},
},
mounted() {
this.instance = new Artplayer({
...this.option,
container: this.$refs.artRef,
});
this.$nextTick(() => {
this.$emit("get-instance", this.instance);
});
},
beforeDestroy() {
if (this.instance && this.instance.destroy) {
this.instance.destroy(false);
}
},
};
</script><template>
<Artplayer @get-instance="getInstance" :option="option" :style="style" />
</template>
<script>
import Artplayer from "./Artplayer.vue";
export default {
data() {
return {
option: {
url: "path/to/video.mp4",
},
style: {
width: "600px",
height: "400px",
margin: "60px auto 0",
},
};
},
components: {
Artplayer,
},
methods: {
getInstance(art) {
console.info(art);
},
},
};
</script>Artplayer Not Responsive：
Modifying option directly in Vue.js will not change the player
React.js
import { useEffect, useRef } from 'react';
import Artplayer from 'artplayer';
export default function Player({ option, getInstance, ...rest }) {
const artRef = useRef();
useEffect(() => {
const art = new Artplayer({
...option,
container: artRef.current,
});
if (getInstance && typeof getInstance === 'function') {
getInstance(art);
}
return () => {
if (art && art.destroy) {
art.destroy(false);
}
};
}, []);
return <div ref={artRef} {...rest}></div>;
}import React from 'react';
import Artplayer from './ArtPlayer.jsx';
function App() {
return (
<div>
<Artplayer
option={{
url: 'https://artplayer.org/assets/sample/video.mp4',
}}
style={{
width: '600px',
height: '400px',
margin: '60px auto 0',
}}
getInstance={(art) => console.info(art)}
/>
</div>
);
}
export default App;Non-responsive Artplayer
In React.js, directly modifying the option will not change the player
TypeScript
Importing Artplayer will automatically import artplayer.d.ts
Vue.js
<script setup>
import Artplayer from 'artplayer';
const art = ref<Artplayer>(null);
art.value = new Artplayer();
</script>React.js
import Artplayer from 'artplayer';
const art = useRef<Artplayer>(null);
art.current = new Artplayer();Option
You can also use the option type
import Artplayer from 'artplayer';
const option: Artplayer['Option'] = {
container: '.artplayer-app',
url: './assets/sample/video.mp4',
};
option.volume = 0.5;
const art = new Artplayer(option);Complete TypeScript Definitions
JavaScript
Sometimes your js file may lose the TypeScript type hints, in this case, you can manually import the types
Variables:
/**
* @type {import("artplayer")}
*/
let art = null;Parameters:
/**
* @param {import("artplayer")} art
*/
function getInstance(art) {
//
}Properties:
export default {
data() {
return {
/**
* @type {import("artplayer")}
*/
art: null,
}
}
}Options:
/**
* @type {import("artplayer/types/option").Option}
*/
const option = {
container: '.artplayer-app',
url: './assets/sample/video.mp4',
};
option.volume = 0.5;
const art8 = new Artplayer(option);Ancient Browsers
The production build of artplayer.js is only compatible with the latest major version of Chrome: last 1 Chrome version
For ancient browsers, you can use the artplayer.legacy.js file, which is compatible up to: IE 11
import Artplayer from 'artplayer/dist/artplayer.legacy.js';https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.jshttps://unpkg.com/artplayer/dist/artplayer.legacy.jsIf you need to support even older browsers, please modify the following configuration and then build it yourself:
Build configuration: scripts/build.js
Refer to documentation: browserslist
ECMAScript Module
ESM Demo:
Starting from 5.2.4, artplayer and all plugins will also provide an ESM version of js, such as:
artplayer/dist/artplayer.esm.jsartplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.esm.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ArtPlayer ESM with Import Map</title>
<style>
#player {
width: 640px;
height: 360px;
margin: 50px auto;
border: 1px solid #ccc;
}
</style>
<script type="importmap">
{
"imports": {
"artplayer": "https://unpkg.com/artplayer/dist/artplayer.esm.js"
}
}
</script>
</head>
<body>
<div id="player"></div>
<script type="module">
import Artplayer from 'artplayer';
const art = new Artplayer({
container: '#player',
url: '/assets/sample/video.mp4',
});
</script>
</body>
</html>Custom userAgent
Currently, the determination of mobile devices is not accurate. Sometimes, you may want to adjust the player UI by changing the userAgent. Therefore, starting in version 5.2.4, we added a new globalThis.CUSTOM_USER_AGENT global variable.
<html>
<head>
<title>ArtPlayer Demo</title>
<meta charset="UTF-8" />
<style>
.artplayer-app {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div class="artplayer-app"></div>
<script>globalThis.CUSTOM_USER_AGENT = 'iphone'</script>
<script src="path/to/artplayer.js"></script>
<script>
const art = new Artplayer({
container: '.artplayer-app',
url: 'path/to/video.mp4',
});
</script>
</body>
</html>Warning
You need to modify it before import the Artplayer for it to take effect