Quick start
Install
- npm
- yarn
- script
npm install artplayer
import Artplayer from 'artplayer';const art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4',});yarn add artplayer
import Artplayer from 'artplayer';const art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4',});<!-- local --><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>const art = new window.Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4',});Use
Tip
The size of the player depends on the size of the container, so your container must have a size.
Use in Html
index.html
<!DOCTYPE html><html> <head> <title>ArtPlayer</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> var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); </script> </body></html>Use in Vue.js or Nuxt.js
- Vue.js Template
- Nuxt.js Template
- Artplayer.vue
- App.vue
Artplayer.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>App.vue
<template> <Artplayer @get-instance="getInstance" :option="option" :style="style" /></template><script>import Artplayer from "./Artplayer.vue";export default { data() { return { option: { url: "https://artplayer.org/assets/sample/video.mp4", }, style: { width: "600px", height: "400px", margin: "60px auto 0", }, }; }, components: { Artplayer, }, methods: { getInstance(art) { console.log(art); }, },};</script>Use in React.js or Next.js
- React.js Template
- Next.js Template
- ArtPlayer.jsx
- App.jsx
ArtPlayer.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>;}App.jsx
import React from 'react';import Artplayer from './ArtPlayer';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.log(art)} /> </div> );}export default App;