Installation and Usage Permalink to "Installation and Usage"
Installation Permalink to "Installation"
npm install artplayeryarn add artplayerpnpm add artplayerbun add artplayer<script src="path/to/artplayer.js"></script>CDN Permalink to "`CDN`"
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.jshttps://unpkg.com/artplayer/dist/artplayer.jsUsage Permalink to "Usage"
<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>Note
The player's dimensions depend on the dimensions of its container. Therefore, your container must have defined dimensions.
See more usage examples at the following link
Vue.js Permalink to "`Vue.js`"
<template>
<div ref="$container" />
</template>
<script setup>
import Artplayer from 'artplayer'
import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
const props = defineProps({
option: {
type: Object,
required: true,
},
})
const emit = defineEmits(['getInstance'])
const art = shallowRef(null)
const $container = ref(null)
onMounted(() => {
art.value = new Artplayer({
...props.option,
container: $container.value,
})
emit('getInstance', art.value)
})
onBeforeUnmount(() => {
art.value.destroy(false)
})
</script><template>
<Artplayer :option="option" :style="style" @get-instance="getInstance" />
</template>
<script setup>
import { reactive } from 'vue'
import Artplayer from './Artplayer.vue'
const option = reactive({
url: 'path/to/video.mp4',
})
const style = reactive({
width: '600px',
height: '400px',
margin: '60px auto 0',
})
function getInstance(art) {
console.log(art)
}
</script>Artplayer is not reactive:
Directly modifying the option in Vue.js will not update the player.
React.js Permalink to "`React.js`"
import Artplayer from 'artplayer'
import { useEffect, useRef } from 'react'
export default function Player({ option, getInstance, ...rest }) {
const $container = useRef()
useEffect(() => {
const art = new Artplayer({
...option,
container: $container.current,
})
if (typeof getInstance === 'function') {
getInstance(art)
}
return () => art.destroy(false)
}, [])
return <div ref={$container} {...rest}></div>
}import Artplayer from './Artplayer.jsx'
function App() {
return (
<div>
<Artplayer
option={{
url: 'path/to/video.mp4',
}}
style={{
width: '600px',
height: '400px',
margin: '60px auto 0',
}}
getInstance={art => console.log(art)}
/>
</div>
)
}
export default AppArtplayer is not reactive:
Directly modifying the option in React.js will not update the player.
TypeScript Permalink to "TypeScript"
The artplayer.d.ts file is automatically imported when you import Artplayer.
Vue.js Permalink to "Vue.js"
<script setup>
import Artplayer from 'artplayer';
const art = shallowRef<Artplayer>(null);
art.value = new Artplayer();
</script>React.js Permalink to "React.js"
import Artplayer from 'artplayer';
const art = useRef<Artplayer>(null);
art.current = new Artplayer();Option Permalink to "Option"
You can also use the type for the options.
import Artplayer, { type Option } from 'artplayer';
const option: Option = {
container: '.artplayer-app',
url: './assets/sample/video.mp4',
};
option.volume = 0.5;
const art = new Artplayer(option);Full TypeScript Definitions
JavaScript Permalink to "JavaScript"
Sometimes your js files may lose TypeScript type hints. In such cases, you can manually import the types.
Variable:
/**
* @type {import("artplayer")}
*/
let art = null;Parameter:
/**
* @param {import("artplayer")} art
*/
function getInstance(art) {
//
}Property:
export default {
data() {
return {
/**
* @type {import("artplayer")}
*/
art: null,
}
}
}Option:
/**
* @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);Legacy Browsers Permalink to "Legacy Browsers"
The production build artplayer.js only supports the latest major version of Chrome: last 1 Chrome version.
For legacy browsers, you can use the artplayer.legacy.js file, which is compatible down to: IE 11.
import Artplayer from 'artplayer/legacy'https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.jshttps://unpkg.com/artplayer/dist/artplayer.legacy.jsIf you need to support even older browsers, modify the following configuration and build it yourself:
Build configuration: scripts/build.js
Reference documentation: browserslist
ECMAScript Module Permalink to "ECMAScript Module"
ESM Demo:
Starting from version 5.2.6, artplayer and all plugins also provide an ESM version in mjs format, such as:
artplayer/dist/artplayer.mjsartplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
<!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 Permalink to "Custom userAgent"
Currently, the detection of whether a device is mobile is not always accurate. Sometimes you may want to adjust the player's UI by changing the userAgent. Therefore, starting from version 5.2.4, a global variable globalThis.CUSTOM_USER_AGENT has been added.
<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>Note
You need to modify it before importing the Artplayer dependency for it to take effect.