Install
Install
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
Use
js
import Artplayer from 'artplayer';
const art = new Artplayer({
container: '.artplayer-app',
url: 'path/to/video.mp4',
});
html
<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>
</body>
</html>
Tip
The size of the player depends on the size of the container
, so your container
must have a size
The following links can see more use examples
Vue.js
vue
<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);
});
},
beforeUnmount() {
if (this.instance && this.instance.destroy) {
this.instance.destroy(false);
}
},
};
</script>
vue
<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>
Tip
Modifying option
directly in Vue.js
will not change the player
React.js
jsx
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>;
}
jsx
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;
Tip
Modifying option
directly in React.js
will not change the player
Syntax hint
Sometimes your js
file will lose the type prompt of TypeScript
. At this time, you can manually import the type
Variable:
js
/**
* @type {import("artplayer")}
*/
let art = null;
Parameters:
js
/**
* @param {import("artplayer")} art
*/
function getInstance(art) {
//
}
Properties:
js
export default {
data() {
return {
/**
* @type {import("artplayer")}
*/
art: null,
}
}
}