ArtPlayer/packages/artplayer-document/docs/en/Overview.mdx

---
title: Quick start
sidebar_position: 1
slug: /
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

## Install

<Tabs>
<TabItem value="npm" label="npm">

```bash
npm install artplayer
```

```js showLineNumbers
import Artplayer from 'artplayer';

const art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});
```

</TabItem>
<TabItem value="yarn" label="yarn">

```bash
yarn add artplayer
```

```js showLineNumbers
import Artplayer from 'artplayer';

const art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});
```

</TabItem>
<TabItem value="script" label="script">

```html showLineNumbers
<!-- 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>
```

```js showLineNumbers
const art = new window.Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});
```

</TabItem>
</Tabs>

## Use

:::danger Tip

The size of the player depends on the size of the `container`, so your `container` must have a size.

:::

### Use in `Html`

```html showLineNumbers title="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`

<Tabs>
<TabItem value="Vue.js" label="Vue.js Template">

🚀 [artplayer-template/vue.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/vue.js)

</TabItem>
<TabItem value="Nuxt.js" label="Nuxt.js Template">

🚀 [artplayer-template/nuxt.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/nuxt.js)

</TabItem>
</Tabs>

<Tabs>
<TabItem value="Artplayer.vue" label="Artplayer.vue">

```js showLineNumbers title="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>
```

</TabItem>
<TabItem value="App.vue" label="App.vue">

```js showLineNumbers title="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>
```

</TabItem>
</Tabs>

### Use in `React.js` or `Next.js`

<Tabs>
<TabItem value="React.js" label="React.js Template">

🚀 [artplayer-template/react.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/react.js)

</TabItem>
<TabItem value="Next.js" label="Next.js Template">

🚀 [artplayer-template/next.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/next.js)

</TabItem>
</Tabs>

<Tabs>
<TabItem value="ArtPlayer.jsx" label="ArtPlayer.jsx">

```jsx showLineNumbers title="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>;
}
```

</TabItem>
<TabItem value="App.jsx" label="App.jsx">

```jsx showLineNumbers title="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;
```

</TabItem>
</Tabs>