### Install Artplayer

Source: https://artplayer.org/document

Commands to install the package using various package managers.

```bash
npm install artplayer
```

```bash
yarn add artplayer
```

```bash
pnpm add artplayer
```

```bash
bun add artplayer
```

--------------------------------

### Initialize Artplayer with VAST Plugin

Source: https://artplayer.org/?example=vast&libs=.%2Funcompiled%2Fartplayer-plugin-vast%2Findex.js

Instantiate Artplayer and configure the VAST plugin to play ads. Ensure the VAST plugin is installed and imported. The ad will play once the video starts.

```javascript
// Depends on:
// https://glomex.github.io/vast-ima-player/
// https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side
// Google's IMA SDK are blocked by your Ad blocker.
// Please Turn Off Your Ad Blocker.
// npm i artplayer-plugin-vast
// import artplayerPluginVast from 'artplayer-plugin-vast';
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
fullscreen: true,
fullscreenWeb: true,
plugins: [
artplayerPluginVast(({ playUrl, imaPlayer, ima }) => {
// Play the ad when the video is played
art.once('play', () => {
playUrl('https://artplayer.org/assets/vast/linear-ad.xml')
})
}),
],
})
```

--------------------------------

### Install ArtPlayer with pnpm

Source: https://artplayer.org/llms.txt

Install ArtPlayer using pnpm. pnpm is known for its efficient storage and faster installations.

```bash
pnpm add artplayer
```

--------------------------------

### Initialize ArtPlayer

Source: https://artplayer.org/llms.txt

Basic example of creating an ArtPlayer instance.

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

--------------------------------

### Artplayer Initialization with Options

Source: https://artplayer.org/llms.txt

Examples of initializing Artplayer with various configuration options.

```APIDOC
## Artplayer Initialization with Options

### Description
This section demonstrates how to initialize the Artplayer with different configuration options to customize its behavior and appearance.

### Parameters

#### Request Body
- **container** (string) - Required - The DOM element or selector for the player container.
- **url** (string) - Required - The URL of the video file.
- **theme** (string) - Optional - The theme color of the player.
- **volume** (Number) - Optional - The default volume level (0 to 1). Default is 0.7.
- **isLive** (Boolean) - Optional - Enables live streaming mode. Default is false.
- **muted** (Boolean) - Optional - Starts the player in a muted state. Default is false.
- **autoplay** (Boolean) - Optional - Starts playback automatically. Default is false.
- **autoSize** (Boolean) - Optional - Automatically adjusts player size to fill container. Default is false.
- **autoMini** (Boolean) - Optional - Switches to mini-player mode when scrolled out of view. Default is false.
- **loop** (Boolean) - Optional - Enables video looping. Default is false.
- **flip** (Boolean) - Optional - Enables video flip functionality. Default is false.
- **playbackRate** (Boolean) - Optional - Enables playback rate control. Default is false.
- **aspectRatio** (Boolean) - Optional - Enables aspect ratio control. Default is false.
- **screenshot** (Boolean) - Optional - Adds a screenshot button. Default is false.
- **setting** (Boolean) - Optional - Adds a settings panel toggle. Default is false.
- **hotkey** (Boolean) - Optional - Enables keyboard hotkeys. Default is true.
- **pip** (Boolean) - Optional - Displays Picture-in-Picture toggle. Default is false.
- **mutex** (Boolean) - Optional - Ensures only one player plays at a time. Default is true.
- **backdrop** (Boolean) - Optional - Enables backdrop blur for UI overlays. Default is true.

### Request Example
```javascript
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    theme: '#ffad00',
    volume: 0.5,
    isLive: true,
    muted: true,
    autoplay: true,
    autoSize: true,
    autoMini: true,
    loop: true,
    flip: true,
    playbackRate: true,
    aspectRatio: true,
    screenshot: true,
    setting: true,
    hotkey: true,
    pip: true,
    mutex: true,
    backdrop: true
});
```

### Response
#### Success Response (200)
- **Artplayer Instance** - An instance of the Artplayer player with the specified configurations.

#### Response Example
```javascript
// Artplayer instance is created and configured.
```
```

--------------------------------

### Artplayer VAST Plugin Setup Function

Source: https://artplayer.org/llms.txt

The main plugin function accepts a setup function that receives the VastPluginContext for ad event handling. It returns a standard plugin factory function.

```typescript
export type ArtplayerPluginVastOption = (params: VastPluginContext) => void | Promise<void>

declare function artplayerPluginVast(
  option: ArtplayerPluginVastOption,
): (art: Artplayer) => ArtplayerPluginVastInstance

export default artplayerPluginVast
export = artplayerPluginVast
export as namespace artplayerPluginVast;
```

--------------------------------

### Artplayer Initialization

Source: https://artplayer.org/llms.txt

Basic example of creating an Artplayer instance with essential configurations.

```APIDOC
## Artplayer Initialization

This is a basic example of creating an Artplayer instance.

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

--------------------------------

### Install and Use Auto Thumbnail Plugin

Source: https://artplayer.org/?example=auto.thumbnail&libs=.%2Funcompiled%2Fartplayer-plugin-auto-thumbnail%2Findex.js

Install the plugin using npm and import it. Then, include it in the Artplayer instance's plugins array. Configuration options can be passed within the plugin's object.

```javascript
// npm i artplayer-plugin-auto-thumbnail
// import artplayerPluginAutoThumbnail from 'artplayer-plugin-auto-thumbnail';
const art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
plugins: [
artplayerPluginAutoThumbnail({
//
}),
],
})
```

--------------------------------

### Install ArtPlayer with npm

Source: https://artplayer.org/llms.txt

Install ArtPlayer using npm for your project. This is a common method for managing project dependencies.

```bash
npm install artplayer
```

--------------------------------

### Install ArtPlayer with yarn

Source: https://artplayer.org/llms.txt

Install ArtPlayer using yarn. Yarn is another popular package manager for JavaScript projects.

```bash
yarn add artplayer
```

--------------------------------

### Example Plugin: Image Ad on Pause

Source: https://artplayer.org/llms.txt

A practical example of a plugin that displays an image ad when the video is paused and provides controls to hide or show it.

```APIDOC
## Example Plugin: Displaying an Image Ad on Pause

This plugin shows an image ad when the video is paused and provides controls to hide or show it.

```javascript
function adsPlugin(option) {
    return (art) => {
        art.layers.add({
            name: 'ads',
            html: `<img style="width: 100px" src="${option.url}">`,
            style: {
                display: 'none',
                position: 'absolute',
                top: '20px',
                right: '20px',
            },
        });

        function show() {
            art.layers.ads.style.display = 'block';
        }

        function hide() {
            art.layers.ads.style.display = 'none';
        }

        art.controls.add({
            name: 'hide-ads',
            position: 'right',
            html: 'Hide Ads',
            tooltip: 'Hide Ads',
            click: hide,
            style: {
                marginRight: '20px'
            }
        });

        art.controls.add({
            name: 'show-ads',
            position: 'right',
            html: 'Show Ads',
            tooltip: 'Show Ads',
            click: show,
        });

        art.on('play', hide);
        art.on('pause', show);

        return {
            name: 'adsPlugin',
            show,
            hide
        };
    }
}

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    plugins: [
        adsPlugin({
            url: '/assets/sample/layer.png'
        })
    ],
});
```
```

--------------------------------

### Initialize Artplayer with Advanced Configuration

Source: https://artplayer.org/llms.txt

Comprehensive initialization example demonstrating custom settings, context menus, layers, quality options, and subtitles.

```javascript
var art = new Artplayer({
  container: '.artplayer-app',
  url: '/assets/sample/video.mp4',
  poster: '/assets/sample/poster.jpg',
  volume: 0.5,
  isLive: false,
  muted: false,
  autoplay: false,
  pip: true,
  autoSize: true,
  autoMini: true,
  screenshot: true,
  setting: true,
  loop: true,
  flip: true,
  playbackRate: true,
  aspectRatio: true,
  fullscreen: true,
  fullscreenWeb: true,
  subtitleOffset: true,
  miniProgressBar: true,
  mutex: true,
  backdrop: true,
  playsInline: true,
  autoPlayback: true,
  airplay: true,
  theme: '#23ade5',
  lang: navigator.language.toLowerCase(),
  moreVideoAttr: {
    crossOrigin: 'anonymous',
  },
  settings: [
    {
      width: 200,
      html: 'Subtitle',
      tooltip: 'Bilingual',
      icon: '<img width="22" height="22" src="/assets/img/subtitle.svg">',
      selector: [
        {
          html: 'Display',
          tooltip: 'Show',
          switch: true,
          onSwitch(item) {
            item.tooltip = item.switch ? 'Hide' : 'Show'
            art.subtitle.show = !item.switch
            return !item.switch
          },
        },
        {
          default: true,
          html: 'Bilingual',
          url: '/assets/sample/subtitle.srt',
        },
        {
          html: 'Chinese',
          url: '/assets/sample/subtitle.cn.srt',
        },
        {
          html: 'Japanese',
          url: '/assets/sample/subtitle.jp.srt',
        },
      ],
      onSelect(item) {
        art.subtitle.switch(item.url, {
          name: item.html,
        })
        return item.html
      },
    },
    {
      html: 'Switcher',
      icon: '<img width="22" height="22" src="/assets/img/state.svg">',
      tooltip: 'OFF',
      switch: false,
      onSwitch(item) {
        item.tooltip = item.switch ? 'OFF' : 'ON'
        console.info('You clicked on the custom switch', item.switch)
        return !item.switch
      },
    },
    {
      html: 'Slider',
      icon: '<img width="22" height="22" src="/assets/img/state.svg">',
      tooltip: '5x',
      range: [5, 1, 10, 0.1],
      onRange(item) {
        return `${item.range[0]}x`
      },
    },
    {
      html: 'Button',
      icon: '<img width="22" height="22" src="/assets/img/state.svg">',
      tooltip: 'tooltip',
      onClick() {
        return 'Button clicked'
      },
    },
  ],
  contextmenu: [
    {
      html: 'Custom menu',
      click(contextmenu) {
        console.info('You clicked on the custom menu')
        contextmenu.show = false
      },
    },
  ],
  layers: [
    {
      html: '<img width="100" src="/assets/sample/layer.png">',
      click() {
        window.open('https://aimu.app')
        console.info('You clicked on the custom layer')
      },
      style: {
        position: 'absolute',
        top: '20px',
        right: '20px',
        opacity: '.9',
      },
    },
  ],
  quality: [
    {
      default: true,
      html: 'SD 480P',
      url: '/assets/sample/video.mp4?q=480',
    },
    {
      html: 'HD 720P',
      url: '/assets/sample/video.mp4?q=720',
    },
  ],
  thumbnails: {
    url: '/assets/sample/thumbnails.png',
    number: 60,
    column: 10,
    scale: 0.85,
  },
  subtitle: {
    url: '/assets/sample/subtitle.srt',
    type: 'srt',
    style: {
      color: '#fe9200',
      fontSize: '20px',
    },
    encoding: 'utf-8',
  },
  highlight: [
    {
      time: 15,
      text: 'One more chance',
    },
    {
      time: 30,
      text: '谁でもいいはずなのに',
    },
    {
      time: 45,
      text: '夏の想い出がまわる',
    },
    {
      time: 60,
      text: 'こんなとこにあるはずもないのに',
    },
    {
      time: 75,
      text: '终わり',
    },
  ],
  controls: [
    {
      position: 'right',
      html: 'Control',
      index: 1,
      tooltip: 'Control Tooltip',
      style: {
        marginRight: '20px',
      },
      click() {
        console.info('You clicked on the custom control')
      },
    },
  ],
  icons: {
    loading: '<img src="/assets/img/ploading.gif">',
    state: '<img width="150" height="150" src="/assets/img/state.svg">',
    indicator: '<img width="16" height="16" src="/assets/img/indicator.svg">',
  },
})
```

--------------------------------

### Initialize Artplayer with Chapter Plugin

Source: https://artplayer.org/?example=chapter&libs=.%2Funcompiled%2Fartplayer-plugin-chapter%2Findex.js

Initialize Artplayer with the chapter plugin. Ensure the plugin is installed and imported. Chapters are defined as an array of objects, each with a start time, end time, and title.

```javascript
// npm i artplayer-plugin-chapter
// import artplayerPluginChapter from 'artplayer-plugin-chapter';
const art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
autoSize: true,
fullscreen: true,
fullscreenWeb: true,
miniProgressBar: true,
autoOrientation: true,
thumbnails: {
url: '/assets/sample/thumbnails.png',
number: 60,
column: 10,
},
plugins: [
artplayerPluginChapter({
chapters: [
{ start: 0, end: 18, title: 'One more chance' },
{ start: 18, end: 36, title: '谁でもいいはずなのに' },
{ start: 36, end: 54, title: '夏の想い出がまわる' },
{ start: 54, end: 72, title: 'こんなとこにあるはずもないのに' },
{ start: 72, end: Infinity, title: '终わり' },
],
}),
],
})
```

--------------------------------

### Artplayer Initialization with Proxy Option

Source: https://artplayer.org/llms.txt

This example shows how to initialize Artplayer using the `proxy` option to provide a custom video DOM element.

```APIDOC
## Artplayer Initialization with Proxy Option

### Description
The `proxy` option allows you to return a third-party HTMLCanvasElement or HTMLVideoElement. A common use case is to proxy an existing video DOM element for the player to use.

### Method
`new Artplayer(option)`

### Parameters
#### Request Body
- **container** (string) - Required - The CSS selector for the player container.
- **url** (string) - Required - The URL of the video to play.
- **proxy** (function) - Optional - A function that returns an HTMLCanvasElement or HTMLVideoElement.

### Request Example
```javascript
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    proxy: () => document.createElement('video')
});
```

### Response
N/A (Initialization only)
```

--------------------------------

### Comprehensive ArtPlayer Setup

Source: https://artplayer.org/llms.txt

Demonstrates a full-featured player configuration including custom layers, thumbnails, subtitle styling, and specific video attributes.

```javascript
var art = new Artplayer({
  container: '.artplayer-app',
  url: '/assets/sample/video.mp4',
  poster: '/assets/sample/poster.jpg',
  autoSize: true,
  loop: true,
  mutex: true,
  setting: true,
  flip: true,
  lock: true,
  fastForward: true,
  playbackRate: true,
  aspectRatio: true,
  theme: '#ff0057',
  fullscreen: true,
  fullscreenWeb: true,
  miniProgressBar: true,
  autoOrientation: true,
  airplay: true,
  moreVideoAttr: {
    'x5-video-player-type': 'h5',
    'x5-video-player-fullscreen': false,
    'x5-video-orientation': 'portraint',
    'preload': 'metadata',
  },
  thumbnails: {
    url: '/assets/sample/thumbnails.png',
    number: 60,
    column: 10,
    scale: 0.6,
  },
  subtitle: {
    name: '中日双语',
    url: '/assets/sample/subtitle.srt',
    style: {
      color: '#48aff0',
      fontSize: '16px',
    },
  },
  layers: [
    {
      html: `<img width="50" src="/assets/sample/layer.png">`,
      click() {
        art.notice.show = '你点击了自定义层'
      },
      style: {
        position: 'absolute',
        top: '10px',
        right: '10px',
        opacity: '.9',
      },
    },
  ],
  icons: {
    loading: '<img src="/assets/img/ploading.gif">',
```

--------------------------------

### Dash Control Plugin Setup

Source: https://artplayer.org/llms.txt

Sets up Artplayer with the dash.js library and the dash-control plugin for adaptive streaming. Requires dashjs and artplayer-plugin-dash-control.

```javascript
// npm i dashjs
// npm i artplayer-plugin-dash-control

// import dashjs from 'dashjs';
// import artplayerPluginDashControl from 'artplayer-plugin-dash-control';
```

--------------------------------

### Creating an Ad Plugin

Source: https://artplayer.org/llms.txt

An example plugin that adds an image layer and controls to toggle visibility based on video playback state.

```javascript
function adsPlugin(option) {
    return (art) => {
        art.layers.add({
            name: 'ads',
            html: `<img style="width: 100px" src="${option.url}">`,
            style: {
                display: 'none',
                position: 'absolute',
                top: '20px',
                right: '20px',
            },
        });

        function show() {
            art.layers.ads.style.display = 'block';
        }

        function hide() {
            art.layers.ads.style.display = 'none';
        }

        art.controls.add({
            name: 'hide-ads',
            position: 'right',
            html: 'Hide Ads',
            tooltip: 'Hide Ads',
            click: hide,
            style: {
                marginRight: '20px'
            }
        });

        art.controls.add({
            name: 'show-ads',
            position: 'right',
            html: 'Show Ads',
            tooltip: 'Show Ads',
            click: show,
        });

        art.on('play', hide);
        art.on('pause', show);

        return {
            name: 'adsPlugin',
            show,
            hide
        };
    }
}

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    plugins: [
        adsPlugin({
            url: '/assets/sample/layer.png'
        })
    ],
});
```

--------------------------------

### Initialize Artplayer with Chromecast Plugin

Source: https://artplayer.org/?example=chromecast&libs=.%2Funcompiled%2Fartplayer-plugin-chromecast%2Findex.js

Install the plugin via npm and import it. Then, include the plugin in the Artplayer constructor's plugins array, optionally configuring the Cast SDK URL and media MIME type.

```javascript
// npm i artplayer-plugin-chromecast
// import artplayerPluginChromecast from 'artplayer-plugin-chromecast';
const art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
fullscreen: true,
fullscreenWeb: true,
plugins: [
artplayerPluginChromecast({
// sdk: '', // The URL of the Cast SDK
// mimeType: '', // The MIME type of the media
}),
],
})
```

--------------------------------

### Initialize Artplayer with Mediabunny Proxy

Source: https://artplayer.org/?example=mediabunny&libs=.%2Funcompiled%2Fartplayer-proxy-mediabunny%2Findex.js

Instantiate Artplayer with various playback and display options, including the Mediabunny proxy for media handling. Ensure the artplayer-proxy-mediabunny plugin is installed and imported.

```javascript
// npm i artplayer-proxy-mediabunny
// import artplayerProxyMediabunny from 'artplayer-proxy-mediabunny';
const art = new Artplayer({
container: '.artplayer-app',
url: 'https://artplayer.org/assets/sample/frag_bunny.mp4',
autoSize: true,
screenshot: true,
setting: true,
loop: true,
flip: true,
playbackRate: true,
fullscreen: true,
fullscreenWeb: true,
miniProgressBar: true,
autoPlayback: true,
autoOrientation: true,
thumbnails: {
url: '/assets/sample/frag_bunny.png',
number: 60,
column: 10,
scale: 0.85,
},
proxy: artplayerProxyMediabunny(),
})
```

--------------------------------

### Initialize ArtPlayer with Torrent Support

Source: https://artplayer.org/?example=webtorrent&libs=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwebtorrent%401%2Fwebtorrent.min.js

Configure ArtPlayer to use a custom type for torrent playback. Ensure the WebTorrent library is installed and imported.

```javascript
const art = new Artplayer({
  container: '.artplayer-app',
  url: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent',
  type: 'torrent',
  customType: {
    torrent: playTorrent,
  },
});
```

--------------------------------

### Initialize Artplayer with Document PiP Plugin

Source: https://artplayer.org/?example=document.pip&libs=.%2Funcompiled%2Fartplayer-plugin-document-pip%2Findex.js

Install the plugin via npm and include it in the plugins array during Artplayer initialization. The plugin supports custom dimensions, fallback options, and a placeholder message.

```javascript
// npm i artplayer-plugin-document-pip
// import artplayerPluginDocumentPip from 'artplayer-plugin-document-pip';
const art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
plugins: [
artplayerPluginDocumentPip({
width: 480,
height: 270,
fallbackToVideoPiP: true,
placeholder: `Playing in Document Picture-in-Picture`,
}),
],
})
art.on('document-pip', (state) => {
console.log('Document Picture-in-Picture', state)
})
```

--------------------------------

### Basic Artplayer Integration in React

Source: https://artplayer.org/llms.txt

A simple example of how to use the Artplayer React component, passing video URL and styling options.

```jsx
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 App
```

--------------------------------

### Initialize Artplayer with HLS Control Plugin

Source: https://artplayer.org/?example=hls.control&libs=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fhls.js%2F1.5.17%2Fhls.min.js%0A.%2Funcompiled%2Fartplayer-plugin-hls-control%2Findex.js

Instantiate Artplayer with the HLS control plugin to enable quality and audio selection. Ensure hls.js and the plugin are installed and imported.

```javascript
// npm i hls.js
// npm i artplayer-plugin-hls-control
// import Hls from 'hls.js';
// import artplayerPluginHlsControl from 'artplayer-plugin-hls-control';
const art = new Artplayer({
container: '.artplayer-app',
url: 'https://playertest.longtailvideo.com/adaptive/elephants_dream_v4/index.m3u8',
setting: true,
plugins: [
artplayerPluginHlsControl({
quality: {
// Show qualitys in control
control: true,
// Show qualitys in setting
setting: true,
// Get the quality name from level
getName: level => `${level.height}P`,
// I18n
title: 'Quality',
auto: 'Auto',
},
audio: {
// Show audios in control
control: true,
// Show audios in setting
setting: true,
// Get the audio name from track
getName: track => track.name,
// I18n
title: 'Audio',
auto: 'Auto',
},
}),
],
customType: {
}
});
```

--------------------------------

### Initialize Artplayer with VTT Thumbnail Plugin

Source: https://artplayer.org/?example=vtt.thumbnail&libs=.%2Funcompiled%2Fartplayer-plugin-vtt-thumbnail%2Findex.js

This snippet shows how to initialize Artplayer and enable the VTT thumbnail plugin. Ensure the plugin is installed and imported correctly.

```javascript
// npm i artplayer-plugin-vtt-thumbnail
// import artplayerPluginVttThumbnail from 'artplayer-plugin-vtt-thumbnail';
const art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/bbb-video.mp4',
plugins: [
artplayerPluginVttThumbnail({
vtt: '/assets/sample/bbb-thumbnails.vtt',
}),
],
})
```

--------------------------------

### Initialize Artplayer with Danmuku and Mask Plugins

Source: https://artplayer.org/?example=danmuku.mask&libs=.%2Funcompiled%2Fartplayer-plugin-danmuku%2Findex.js%0A.%2Funcompiled%2Fartplayer-plugin-danmuku-mask%2Findex.js

This snippet shows how to initialize Artplayer with the danmuku and danmuku-mask plugins. Ensure you have installed the necessary packages and copied the MediaPipe solution files.

```javascript
const art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/steve-jobs.mp4',
autoSize: true,
fullscreen: true,
fullscreenWeb: true,
autoOrientation: true,
plugins: [
artplayerPluginDanmuku({
 danmuku: '/assets/sample/danmuku.xml',
}),
artplayerPluginDanmukuMask({
 solutionPath: '/assets/@mediapipe/selfie_segmentation',
}),
],
})
```

--------------------------------

### Basic DASH Playback with dash.js

Source: https://artplayer.org/llms.txt

Minimal setup for playing DASH streams using dash.js and Artplayer's customType API. Logs the dash.js instance on 'ready' event.

```javascript
// npm i dashjs
// import dashjs from 'dashjs';
```

```javascript
function playMpd(video, url, art) {
  if (dashjs.supportsMediaSource()) {
    if (art.dash)
      art.dash.destroy()
    const dash = dashjs.MediaPlayer().create()
    dash.initialize(video, url, art.option.autoplay)
    art.dash = dash
    art.on('destroy', () => dash.destroy())
  }
  else {
    art.notice.show = 'Unsupported playback format: mpd'
  }
}

const art = new Artplayer({
  container: '.artplayer-app',
  url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
  type: 'mpd',
  customType: {
    mpd: playMpd,
  },
})

art.on('ready', () => {
  console.info(art.dash)
})
```

--------------------------------

### Artplayer Initialization with CSS Variable Overrides

Source: https://artplayer.org/llms.txt

This example demonstrates how to initialize Artplayer and override its default CSS variables for custom styling.

```APIDOC
## Artplayer Initialization with CSS Variable Overrides

### Description
This object allows you to override the player's built-in CSS variables for custom styling.

### Method
`new Artplayer(option)`

### Parameters
#### Request Body
- **container** (string) - Required - The CSS selector for the player container.
- **url** (string) - Required - The URL of the video to play.
- **cssVar** (object) - Optional - An object to define custom CSS variables.

### Request Example
```javascript
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    cssVar: {
        // Define custom CSS variables here
    }
});
```

### Response
N/A (Initialization only)

### Notes
For a full list of available CSS variables, please refer to the official type definition file: artplayer/types/cssVar.d.ts
```

--------------------------------

### Create Multi-Level Selector Setting

Source: https://artplayer.org/llms.txt

Example demonstrating how to create a complex setting in ArtPlayer's control panel with nested selectors and custom onSelect logic.

```javascript
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
    settings: [
        {
            html: 'Multi-level',
            selector: [
                {
                    html: 'Setting 01',
                    width: 150,
                    selector: [
                        {
                            html: 'Setting 01 - 01',
                        },
                        {
                            html: 'Setting 01 - 02',
                        },
                    ],
                    onSelect: function (item, $dom, event) {
                        console.info(item, $dom, event);
                        return item.html;
                    },
                },
                {
                    html: 'Setting 02',
                    width: 150,
                    selector: [
                        {
                            html: 'Setting 02 - 01',
                        },
                        {
                            html: 'Setting 02 - 02',
                        },
                    ],
                    onSelect: function (item, $dom, event) {
                        console.info(item, $dom, event);
                        return item.html;
                    },
                },
            ],
        },
    ],
});
```

--------------------------------

### Plugin Management

Source: https://artplayer.org/llms.txt

Demonstrates how to load plugins during instantiation and how to add plugins after the player has been created.

```APIDOC
## Plugin Management

### Loading Plugins During Instantiation

This method involves passing an array of plugin functions to the `plugins` option when creating a new Artplayer instance.

```javascript
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    plugins: [myPlugin]
});

art.on('ready', () => {
    console.info(art.plugins.myPlugin);
});

function myPlugin(art) {
    console.info(art);
    return {
        name: 'myPlugin',
        something: 'something',
        doSomething: function () {
            console.info('doSomething');
        },
    };
}
```

### Loading Plugins After Instantiation

Plugins can also be added to an existing Artplayer instance using the `art.plugins.add()` method.

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

art.plugins.add(myPlugin);

art.on('ready', () => {
    console.info(art.plugins.myPlugin);
});

function myPlugin(art) {
    console.info(art);
    return {
        name: 'myPlugin',
        something: 'something',
        doSomething: function () {
            console.info('doSomething');
        },
    };
}
```
```

--------------------------------

### Start Player Muted

Source: https://artplayer.org/llms.txt

Determines if the player starts in a muted state. Useful for preventing unexpected audio on load.

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

--------------------------------

### Initialize Artplayer with Options

Source: https://artplayer.org/?example=canvas&libs=.%2Funcompiled%2Fartplayer-proxy-canvas%2Findex.js

Instantiate Artplayer with various configuration options for video playback, UI elements, and features like thumbnails and proxy.

```javascript
// npm i artplayer-proxy-canvas
// import artplayerProxyCanvas from 'artplayer-proxy-canvas';
const art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
poster: '/assets/sample/poster.jpg',
volume: 0.5,
autoplay: false,
autoSize: false,
screenshot: true,
setting: true,
loop: true,
flip: true,
pip: true,
playbackRate: true,
aspectRatio: true,
fullscreen: true,
fullscreenWeb: true,
miniProgressBar: true,
autoPlayback: true,
autoOrientation: true,
thumbnails: {
url: '/assets/sample/thumbnails.png',
number: 60,
column: 10,
scale: 0.85,
},
proxy: artplayerProxyCanvas(),
});
```

--------------------------------

### Set and Get Playback Rate

Source: https://artplayer.org/llms.txt

Sets or gets the player's playback speed. Accepts a number parameter.

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

art.on('ready', () => {
    console.info(art.playbackRate);
    art.playbackRate = 2;
    console.info(art.playbackRate);
});
```

--------------------------------

### Integrate DASH with Artplayer

Source: https://artplayer.org/?example=dash&libs=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fdashjs%2F4.5.2%2Fdash.all.min.js

Use a custom type function to initialize dash.js and handle player destruction. Ensure dash.js is installed and imported before use.

```javascript
// npm i dashjs
// import dashjs from 'dashjs';
function playMpd(video, url, art) {
if (dashjs.supportsMediaSource()) {
if (art.dash)
art.dash.destroy()
const dash = dashjs.MediaPlayer().create()
dash.initialize(video, url, art.option.autoplay)
art.dash = dash
art.on('destroy', () => dash.destroy())
}
else {
art.notice.show = 'Unsupported playback format: mpd'
}
}
const art = new Artplayer({
container: '.artplayer-app',
url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
type: 'mpd',
customType: {
mpd: playMpd,
},
})
art.on('ready', () => {
console.info(art.dash)
})
```

--------------------------------

### Set and Get Aspect Ratio

Source: https://artplayer.org/llms.txt

Sets or gets the player's aspect ratio. Accepts a string parameter, e.g., '16:9'.

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

art.on('ready', () => {
    console.info(art.aspectRatio);
    art.aspectRatio = '16:9';
    console.info(art.aspectRatio);
});
```

--------------------------------

### Get and Set Player State

Source: https://artplayer.org/llms.txt

Gets or sets the player's current state. Supported values include 'standard', 'mini', 'pip', 'fullscreen', and 'fullscreenWeb'.

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

art.on('ready', () => {
    console.info(art.state); // Default: standard
    art.state = 'mini';
});
```

--------------------------------

### Get Video Duration

Source: https://artplayer.org/llms.txt

Retrieve the total duration of the video.

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

art.on('ready', () => {
    console.info(art.duration);
});
```

--------------------------------

### Playback Status (playing)

Source: https://artplayer.org/llms.txt

Get the current playback status of the video.

```APIDOC
## Playback Status (playing)

*   **Type**: Getter
*   **Parameter**: Boolean
*   **Description**: Gets whether the video is currently playing.

### Request Example
```javascript
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    muted: true,
});

art.on('ready', () => {
    console.info(art.playing);
});
```
```

--------------------------------

### Initialize Artplayer with Audio Track Plugin

Source: https://artplayer.org/?example=audio.track&libs=.%2Funcompiled%2Fartplayer-plugin-audio-track%2Findex.js

Requires the artplayer-plugin-audio-track package. Configure the plugin within the plugins array of the Artplayer constructor.

```javascript
// npm i artplayer-plugin-audio-track
// import artplayerPluginAudioTrack from 'artplayer-plugin-audio-track';
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/sprite-fight.mp4',
plugins: [
artplayerPluginAudioTrack({
url: '/assets/sample/sprite-fight.aac',
offset: 0,
sync: 0.3,
}),
],
});
```

--------------------------------

### Manage Muted State

Source: https://artplayer.org/llms.txt

Get or set the muted status of the video.

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

art.on('ready', () => {
    console.info(art.muted);
    art.muted = true;
    console.info(art.muted);
});
```

--------------------------------

### Aspect Ratio (aspectRatio)

Source: https://artplayer.org/llms.txt

Set and get the player's aspect ratio.

```APIDOC
## Aspect Ratio (aspectRatio)

*   **Type**: Setter/Getter
*   **Parameter**: String
*   **Description**: Sets and gets the player's aspect ratio. Example format: `'16:9'`.

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

art.on('ready', () => {
    console.info(art.aspectRatio);
    art.aspectRatio = '16:9';
    console.info(art.aspectRatio);
});
```
```

--------------------------------

### Playback Speed (playbackRate)

Source: https://artplayer.org/llms.txt

Set and get the player's playback speed.

```APIDOC
## Playback Speed (playbackRate)

*   **Type**: Setter/Getter
*   **Parameter**: Number
*   **Description**: Sets and gets the player's playback speed.

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

art.on('ready', () => {
    console.info(art.playbackRate);
    art.playbackRate = 2;
    console.info(art.playbackRate);
});
```
```

--------------------------------

### Initialize Artplayer with DASH Control Plugin

Source: https://artplayer.org/?example=dash.control&libs=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fdashjs%2F4.5.2%2Fdash.all.min.js%0A.%2Funcompiled%2Fartplayer-plugin-dash-control%2Findex.js

Configures the Artplayer instance with the dash-control plugin to manage quality and audio track settings.

```javascript
// npm i dashjs
// npm i artplayer-plugin-dash-control
// import dashjs from 'dashjs';
// import artplayerPluginDashControl from 'artplayer-plugin-dash-control';
const art = new Artplayer({
container: '.artplayer-app',
url: 'https://media.axprod.net/TestVectors/v7-Clear/Manifest_1080p.mpd',
setting: true,
plugins: [
artplayerPluginDashControl({
quality: {
// Show qualitys in control
control: true,
// Show qualitys in setting
setting: true,
// Get the quality name from level
getName: level => `${level.height}P`,
// I18n
title: 'Quality',
auto: 'Auto',
},
audio: {
// Show audios in control
control: true,
// Show audios in setting
setting: true,
// Get the audio name from track
```

--------------------------------

### Get Artplayer Scheme

Source: https://artplayer.org/llms.txt

Retrieve the validation schema used for Artplayer options.

```javascript
console.info(Artplayer.scheme);
```

--------------------------------

### Initialize ArtPlayer with Torrent URL

Source: https://artplayer.org/llms.txt

Use the Artplayer constructor with 'url', 'type', and 'customType' to handle torrent playback. Ensure 'playTorrent' function is defined elsewhere. The 'ready' event provides access to the internal torrent object.

```javascript
const art = new Artplayer({
  url: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent',
  type: 'torrent',
  customType: {
    torrent: playTorrent,
  },
});

art.on('ready', () => {
  console.info(art.torrent)
})
```

--------------------------------

### Get Artplayer Environment Variables

Source: https://artplayer.org/llms.txt

Retrieve environment-specific variables configured for Artplayer.

```javascript
console.info(Artplayer.env);
```

--------------------------------

### Get Artplayer Version

Source: https://artplayer.org/llms.txt

Access the current version string of the Artplayer library.

```javascript
console.info(Artplayer.version);
```

--------------------------------

### Initialize Artplayer Instance

Source: https://artplayer.org/

Configures the player with video source, UI controls, and custom settings. Ensure the container element exists in the DOM before initialization.

```javascript
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
poster: '/assets/sample/poster.jpg',
volume: 0.5,
isLive: false,
muted: false,
autoplay: false,
pip: true,
autoSize: true,
autoMini: true,
screenshot: true,
setting: true,
loop: true,
flip: true,
playbackRate: true,
aspectRatio: true,
fullscreen: true,
fullscreenWeb: true,
subtitleOffset: true,
miniProgressBar: true,
mutex: true,
backdrop: true,
playsInline: true,
autoPlayback: true,
airplay: true,
theme: '#23ade5',
lang: navigator.language.toLowerCase(),
moreVideoAttr: {
crossOrigin: 'anonymous',
},
settings: [
{
width: 200,
html: 'Subtitle',
tooltip: 'Bilingual',
icon: '<img width="22" height="22" src="/assets/img/subtitle.svg">'
```

--------------------------------

### Plugins Configuration

Source: https://artplayer.org/llms.txt

Initialize custom plugins for Artplayer.

```APIDOC
## Plugins Configuration

### Description
Initialize custom plugins. A plugin is a function that receives the art instance and returns an object with a name and custom methods.

### Example
```javascript
function myPlugin(art) {
    console.info(art);
    return {
        name: 'myPlugin',
        something: 'something',
        doSomething: function () {
            console.info('doSomething');
        },
    };
}

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

--------------------------------

### CSS Variable Manipulation

Source: https://artplayer.org/llms.txt

The `cssVar` function dynamically gets or sets CSS variables.

```APIDOC
## Get/Set CSS Variable

### Description
Dynamically gets or sets CSS variables for the player.

### Method
GET/SET

### Endpoint
`art.cssVar(name: string): string`
`art.cssVar(name: string, value: string): void`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Get CSS variable
console.log(art.cssVar('--art-theme'));

// Set CSS variable
art.cssVar('--art-theme', 'green');
```

### Response
#### Success Response (200)
- **value** (string) - The current value of the CSS variable if getting, or void if setting.

#### Response Example
```json
// Example for getting '--art-theme'
"#ffffff"
```
```

--------------------------------

### Configure Artplayer for FLV

Source: https://artplayer.org/?example=mpegts&libs=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fmpegts.js%401.7.3%2Fdist%2Fmpegts.min.js

Basic configuration for initializing an Artplayer instance with an FLV source.

```javascript
const art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.flv',
type: 'flv',
customType: {
```

--------------------------------

### Get Artplayer Validator Function

Source: https://artplayer.org/llms.txt

Retrieve the validation function used for Artplayer options.

```javascript
console.info(Artplayer.validator);
```

--------------------------------

### Get Artplayer Build Time

Source: https://artplayer.org/llms.txt

Access the timestamp indicating when the Artplayer library was built.

```javascript
console.info(Artplayer.build);
```

--------------------------------

### Artplayer Constructor and Static Properties

Source: https://artplayer.org/llms.txt

Information about initializing Artplayer and its global static properties.

```APIDOC
## Artplayer Class

### Description
The main ArtPlayer class, extending the base Player class. It is used to initialize and control the video player.

### Constructor
```typescript
constructor(option: Option, readyCallback?: (this: Artplayer, art: Artplayer) => unknown)
```
Initializes the player with an option object and an optional ready callback.

### Static Properties

- **instances** (Artplayer[]) - Array of all active ArtPlayer instances.
- **version** (string) - Current version string.
- **env** ('development' | 'production') - Build environment.
- **build** (string) - Build identifier or timestamp.
- **config** (Config) - Global configuration object.
- **utils** (Utils) - Utility functions.
- **scheme** (Record<keyof Option, unknown>) - Schema for option validation.
```

--------------------------------

### React.js Artplayer Initialization

Source: https://artplayer.org/llms.txt

Shows how to initialize Artplayer in React using `useRef`.

```jsx
import Artplayer from 'artplayer';
const art = useRef<Artplayer>(null);
art.current = new Artplayer();
```

--------------------------------

### TypeScript Usage

Source: https://artplayer.org/document

Examples of using TypeScript types for Vue, React, and configuration options.

```vue
<script setup>
import Artplayer from 'artplayer';
const art = shallowRef<Artplayer>(null);
art.value = new Artplayer();
</script>
```

```jsx
import Artplayer from 'artplayer';
const art = useRef<Artplayer>(null);
art.current = new Artplayer();
```

```ts
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);
```

--------------------------------

### React.js Component Integration

Source: https://artplayer.org/llms.txt

Basic setup for using Artplayer within a React component.

```javascript
import Artplayer from 'artplayer'
import { useEffect, useRef } from 'react'

export default function Player({ option, getInstance, ...rest }) {
```

--------------------------------

### Initialize Artplayer Instance

Source: https://artplayer.org/llms.txt

Basic initialization of an Artplayer instance with a container and video URL.

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

--------------------------------

### Listen for Double Click Event

Source: https://artplayer.org/llms.txt

Triggered when the player is double-clicked. No specific setup is required.

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

art.on('dblclick', (event) => {
    console.info('dblclick', event);
});
```