Skip to main content

Quick start

Install

npm install artplayer
import Artplayer from 'artplayer';const art = new 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

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>

Use in React.js or Next.js

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>;}