### Get Started Link

Source: https://github.com/diygod/dplayer/blob/master/docs/README.md

A navigation link to the 'Get Started' guide for DPlayer. This is typically used on landing pages to direct new users.

```html
<div class="hero custom"><p class="action"><router-link to="/guide/" class="nav-link action-button">Get Started →</router-link></p></div>
```

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

### Include HLS.js for HLS support

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

To enable HLS playback, include the `hls.min.js` library before `DPlayer.min.js`. This example shows the basic setup for HLS video.

```html
<div id="dplayer"></div>
<script src="hls.min.js"></script>
<script src="DPlayer.min.js"></script>
```

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

### dp.play()

Source: https://context7.com/diygod/dplayer/llms.txt

Programmatically start video playback.

```APIDOC
## dp.play()

### Description
Start video playback programmatically. When mutex option is enabled (default), calling play will automatically pause other DPlayer instances on the page.

### Method
JavaScript API Call

### Endpoint
N/A (Instance method)

### Parameters
N/A

### Request Example
```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: { url: 'video.mp4' }
});

// Start playback
dp.play();
```

### Response
N/A

```

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

### Install DPlayer with Yarn

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Install DPlayer using Yarn. This is an alternative to npm for managing project dependencies.

```bash
yarn add dplayer
```

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

### Install DPlayer with npm

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Install DPlayer using npm. This is the recommended way to add DPlayer to your project when using a module bundler.

```bash
npm install dplayer --save
```

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

### Initialize DPlayer for Live Streaming with Danmaku

Source: https://github.com/diygod/dplayer/blob/master/docs/zh/guide.md

Initialize DPlayer for live streaming with danmaku support. This example includes a mock WebSocket backend for reading and sending danmaku data.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    live: true,
    danmaku: true,
    apiBackend: {
        read: function (options) {
            console.log('Pretend to connect WebSocket');
            options.success([]);
        },
        send: function (options) {
            console.log('Pretend to send danmaku via WebSocket', options.data);
            options.success();
        },
    },
    video: {
        url: 'demo.m3u8',
        type: 'hls',
    },
});
```

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

### Install DPlayer via npm or yarn

Source: https://context7.com/diygod/dplayer/llms.txt

Install DPlayer using either npm or yarn package managers. Add the --save flag for npm to include it in your project's dependencies.

```bash
# Using npm
npm install dplayer --save

# Using yarn
yarn add dplayer
```

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

### dp.volume(percentage, nostorage, nonotice)

Source: https://context7.com/diygod/dplayer/llms.txt

Set or get the video volume.

```APIDOC
## dp.volume(percentage, nostorage, nonotice)

### Description
Set or get the video volume. The percentage should be between 0 and 1. When called without arguments, returns current volume.

### Method
JavaScript API Call

### Endpoint
N/A (Instance method)

### Parameters
#### Path Parameters
- **percentage** (number) - Optional - The volume level (0-1).
- **nostorage** (boolean) - Optional - Whether to prevent storing the volume in localStorage.
- **nonotice** (boolean) - Optional - Whether to prevent showing a volume notice.

### Request Example
```javascript
// Set volume to 50%
dp.volume(0.5);

// Set volume without storing in localStorage and without showing notice
dp.volume(0.1, true, false);

// Get current volume
const currentVolume = dp.volume();
console.log(currentVolume); // 0.5
```

### Response
- **currentVolume** (number) - The current volume level (0-1) if called without arguments.

```

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

### Add danmaku from a URL

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Configure danmaku to load from a specified URL using the `addition` property within the `danmaku` options. This example shows how to add bilibili danmaku.

```javascript
const option = {
    danmaku: {
        // ...
        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]'],
    },
};
```

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

### Programmatically Play Video with DPlayer

Source: https://context7.com/diygod/dplayer/llms.txt

Start video playback using the `dp.play()` method. If the `mutex` option is enabled, this will pause other DPlayer instances on the page.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: { url: 'video.mp4' }
});

// Start playback
dp.play();
```

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

### Set or Get Volume with DPlayer

Source: https://context7.com/diygod/dplayer/llms.txt

Control the video volume using `dp.volume(percentage, nostorage, nonotice)`. The percentage is between 0 and 1. Calling without arguments returns the current volume.

```javascript
// Set volume to 50%
dp.volume(0.5);

// Set volume without storing in localStorage and without showing notice
dp.volume(0.1, true, false);

// Get current volume
const currentVolume = dp.volume();
console.log(currentVolume); // 0.5
```

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

### DPlayer Usage with Module Bundlers

Source: https://context7.com/diygod/dplayer/llms.txt

Import DPlayer as an ES module when using module bundlers like webpack or Rollup. This example includes configuration for danmaku and subtitles.

```javascript
import DPlayer from 'dplayer';

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot: true,
    video: {
        url: 'demo.mp4',
        pic: 'demo.jpg',
        thumbnails: 'thumbnails.jpg'
    },
    subtitle: {
        url: 'webvtt.vtt'
    },
    danmaku: {
        id: 'demo',
        api: 'https://api.prprpr.me/dplayer/'
    }
});
```

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

### Bind to 'ended' event

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Use `dp.on(event, handler)` to bind event listeners. This example shows how to log a message when the video playback ends.

```javascript
dp.on('ended', function () {
    console.log('player ended');
});
```

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

### Initialize DPlayer with MPEG DASH using dash.js

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Include dash.js before DPlayer.min.js. Configure the video source with type 'dash' and optionally provide dash-specific configurations.

```html
<div id="dplayer"></div>
<script src="dash.min.js"></script>
<script src="DPlayer.min.js"></script>
```

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mpd',
        type: 'dash',
    },
    pluginOptions: {
        dash: {
            // dash config
        },
    },
});
console.log(dp.plugins.dash); // Dash instance
```

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

### Initialize DPlayer with WebTorrent

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Use this to play videos from magnet links. Ensure webtorrent.min.js is loaded before DPlayer.min.js.

```html
<div id="dplayer"></div>
<script src="webtorrent.min.js"></script>
<script src="DPlayer.min.js"></script>
```

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'magnet:demo',
        type: 'webtorrent',
    },
    pluginOptions: {
        webtorrent: {
            // webtorrent config
        },
    },
});
console.log(dp.plugins.webtorrent); // WebTorrent instance
```

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

### Full Configuration Options

Source: https://context7.com/diygod/dplayer/llms.txt

Configure DPlayer with all available options.

```APIDOC
## Full Configuration Options

### Description
Configure the player with all available options including theme colors, autoplay, hotkeys, and danmaku settings.

### Method
JavaScript Initialization

### Endpoint
N/A (Client-side initialization)

### Parameters
#### Request Body
- **container** (HTMLElement) - Required - The DOM element to mount the player.
- **autoplay** (boolean) - Optional - Enable autoplay.
- **theme** (string) - Optional - Player theme color.
- **loop** (boolean) - Optional - Enable loop playback.
- **lang** (string) - Optional - Player language.
- **screenshot** (boolean) - Optional - Enable screenshots.
- **hotkey** (boolean) - Optional - Enable hotkeys.
- **preload** (string) - Optional - Video preload attribute.
- **logo** (string) - Optional - URL of the logo image.
- **volume** (number) - Optional - Default volume (0-1).
- **mutex** (boolean) - Optional - Enable mutex for autoplay.
- **playbackSpeed** (array) - Optional - Available playback speed options.
- **airplay** (boolean) - Optional - Enable AirPlay.
- **chromecast** (boolean) - Optional - Enable Chromecast.
- **preventClickToggle** (boolean) - Optional - Prevent click to toggle play/pause.
- **video** (object) - Required - Video source configuration.
  - **url** (string) - Required - The URL of the video file.
  - **pic** (string) - Optional - The URL of the video poster image.
  - **thumbnails** (string) - Optional - The URL of the thumbnails sprite sheet.
  - **type** (string) - Optional - Video type (e.g., 'auto', 'hls', 'flv').
- **subtitle** (object) - Optional - Subtitle configuration.
  - **url** (string) - Required - The URL of the subtitle file.
  - **type** (string) - Optional - Subtitle type (e.g., 'webvtt').
  - **fontSize** (string) - Optional - Subtitle font size.
  - **bottom** (string) - Optional - Subtitle bottom position.
  - **color** (string) - Optional - Subtitle color.
- **danmaku** (object) - Optional - Danmaku configuration.
  - **id** (string) - Required - Danmaku ID.
  - **api** (string) - Required - Danmaku API endpoint.
  - **token** (string) - Optional - Danmaku API token.
  - **maximum** (number) - Optional - Maximum number of danmaku.
  - **addition** (array) - Optional - Additional danmaku sources.
  - **user** (string) - Optional - Danmaku username.
  - **bottom** (string) - Optional - Danmaku bottom position.
  - **unlimited** (boolean) - Optional - Enable unlimited danmaku.
  - **speedRate** (number) - Optional - Danmaku speed rate.
- **contextmenu** (array) - Optional - Custom context menu items.
  - **text** (string) - Required - Menu item text.
  - **link** (string) - Optional - URL for the menu item.
  - **click** (function) - Optional - Callback function for click event.
- **highlight** (array) - Optional - Video highlights.
  - **text** (string) - Required - Highlight text.
  - **time** (number) - Required - Time in seconds for the highlight.

### Request Example
```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#FADFA3',
    loop: true,
    lang: 'zh-cn',
    screenshot: true,
    hotkey: true,
    preload: 'auto',
    logo: 'logo.png',
    volume: 0.7,
    mutex: true,
    playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2],
    airplay: true,
    chromecast: false,
    preventClickToggle: false,
    video: {
        url: 'dplayer.mp4',
        pic: 'dplayer.png',
        thumbnails: 'thumbnails.jpg',
        type: 'auto'
    },
    subtitle: {
        url: 'dplayer.vtt',
        type: 'webvtt',
        fontSize: '25px',
        bottom: '10%',
        color: '#b7daff'
    },
    danmaku: {
        id: '9E2E3368B56CDBB4',
        api: 'https://api.prprpr.me/dplayer/',
        token: 'tokendemo',
        maximum: 1000,
        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
        user: 'DIYgod',
        bottom: '15%',
        unlimited: true,
        speedRate: 0.5
    },
    contextmenu: [
        {
            text: 'custom1',
            link: 'https://github.com/DIYgod/DPlayer'
        },
        {
            text: 'custom2',
            click: (player) => {
                console.log(player);
            }
        }
    ],
    highlight: [
        {
            text: 'marker for 20s',
            time: 20
        },
        {
            text: 'marker for 2mins',
            time: 120
        }
    ]
});
```

### Response
N/A (Player instance is returned)

```

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

### Initialize DPlayer with Options

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Instantiate DPlayer with a comprehensive set of configuration options including video source, subtitles, danmaku, context menu, and highlights. The `mutex` option prevents multiple players from playing simultaneously.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#FADFA3',
    loop: true,
    lang: 'zh-cn',
    screenshot: true,
    hotkey: true,
    preload: 'auto',
    logo: 'logo.png',
    volume: 0.7,
    mutex: true,
    video: {
        url: 'dplayer.mp4',
        pic: 'dplayer.png',
        thumbnails: 'thumbnails.jpg',
        type: 'auto',
    },
    subtitle: {
        url: 'dplayer.vtt',
        type: 'webvtt',
        fontSize: '25px',
        bottom: '10%',
        color: '#b7daff',
    },
    danmaku: {
        id: '9E2E3368B56CDBB4',
        api: 'https://api.prprpr.me/dplayer/',
        token: 'tokendemo',
        maximum: 1000,
        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
        user: 'DIYgod',
        bottom: '15%',
        unlimited: true,
        speedRate: 0.5,
    },
    contextmenu: [
        {
            text: 'custom1',
            link: 'https://github.com/DIYgod/DPlayer',
        },
        {
            text: 'custom2',
            click: (player) => {
                console.log(player);
            },
        },
    ],
    highlight: [
        {
            text: 'marker for 20s',
            time: 20,
        },
        {
            text: 'marker for 2mins',
            time: 120,
        },
    ],
});
```

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

### Initialize DPlayer with FLV using flv.js

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Include flv.js before DPlayer.min.js. Set the video type to 'flv' and optionally configure flv.js options.

```html
<div id="dplayer"></div>
<script src="flv.min.js"></script>
<script src="DPlayer.min.js"></script>
```

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.flv',
        type: 'flv',
    },
    pluginOptions: {
        flv: {
            // refer to https://github.com/bilibili/flv.js/blob/master/docs/api.md#flvjscreateplayer
            mediaDataSource: {
                // mediaDataSource config
            },
            config: {
                // config
            },
        },
    },
});
console.log(dp.plugins.flv); // flv instance
```

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

### Configure Multiple Video Quality Options

Source: https://context7.com/diygod/dplayer/llms.txt

Set up multiple video quality options with automatic switching. Ensure the 'quality' array contains objects with 'name', 'url', and 'type'.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        quality: [
            {
                name: 'HD',
                url: 'demo.m3u8',
                type: 'hls'
            },
            {
                name: 'SD',
                url: 'demo.mp4',
                type: 'normal'
            }
        ],
        defaultQuality: 0,
        pic: 'demo.png',
        thumbnails: 'thumbnails.jpg'
    }
});
```

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

### Basic Player Initialization

Source: https://context7.com/diygod/dplayer/llms.txt

Initialize a DPlayer instance with a container and video source.

```APIDOC
## Basic Player Initialization

### Description
Create a simple video player with minimal configuration by specifying a container element and video source URL.

### Method
JavaScript Initialization

### Endpoint
N/A (Client-side initialization)

### Parameters
#### Request Body
- **container** (HTMLElement) - Required - The DOM element to mount the player.
- **video** (object) - Required - Video source configuration.
  - **url** (string) - Required - The URL of the video file.
  - **pic** (string) - Optional - The URL of the video poster image.

### Request Example
```html
<div id="dplayer"></div>
<script src="DPlayer.min.js"></script>
<script>
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'https://example.com/video.mp4',
        pic: 'https://example.com/poster.jpg'
    }
});
</script>
```

### Response
N/A (Player instance is returned)

```

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

### DPlayer Initialization Options

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Initialize DPlayer with a comprehensive set of options, including video source, screenshots, subtitles, and danmaku settings.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot: true,
    video: {
        url: 'demo.mp4',
        pic: 'demo.jpg',
        thumbnails: 'thumbnails.jpg',
    },
    subtitle: {
        url: 'webvtt.vtt',
    },
    danmaku: {
        id: 'demo',
        api: 'https://api.prprpr.me/dplayer/',
    },
});
```

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

### Basic DPlayer Initialization

Source: https://context7.com/diygod/dplayer/llms.txt

Initialize a basic DPlayer instance by providing a container element ID and the video source URL. The poster image is optional.

```html
<div id="dplayer"></div>
<script src="DPlayer.min.js"></script>
<script>
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'https://example.com/video.mp4',
        pic: 'https://example.com/poster.jpg'
    }
});
</script>
```

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

### Set Danmaku Opacity - DPlayer API

Source: https://context7.com/diygod/dplayer/llms.txt

Control the transparency of all displayed danmaku comments using `dp.danmaku.opacity()`. Accepts a value between 0 (fully transparent) and 1 (fully opaque). Can also be used to get the current opacity.

```javascript
// Set danmaku opacity to 50%
dp.danmaku.opacity(0.5);

// Get current opacity
const opacity = dp.danmaku.opacity();
console.log(opacity);
```

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

### Custom HLS type with memory leak prevention

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

When using `customType` for HLS, listen for `destroy` and `quality_end` events to properly destroy the MSE library instance and prevent memory leaks. This example demonstrates integrating a custom HLS player.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        quality: [
            {
                name: 'HD',
                url: 'demo_hd.m3u8',
                type: 'Hls',
            },
            {
                name: 'SD',
                url: 'demo_sd.m3u8',
                type: 'Hls',
            },
        ],
        defaultQuality: 0,
        customType: {
            Hls: (video, player) => {
                const hls = new window.Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);

                hls.sessionId = crypto.randomUUID();
                player.sessionId = hls.sessionId;
                player.events.on('destroy', () => {
                    hls.destroy();
                });
                player.events.on('quality_end', () => {
                    if (hls.sessionId !== player.sessionId) {
                        hls.destroy();
                    }
                });
            },
        },
    },
});
```

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

### Initialize DPlayer with MPEG DASH using customType

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Use the 'customType' option to manually initialize dash.js for MPEG DASH playback when the default 'dash' type is insufficient.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mpd',
        type: 'customDash',
        customType: {
            customDash: function (video, player) {
                dashjs.MediaPlayer().create().initialize(video, video.src, false);
            },
        },
    },
});
```

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

### Initialize DPlayer with HLS support

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Initialize DPlayer with HLS video by specifying the URL and type. The `pluginOptions` can be used to configure `hls.js` settings.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.m3u8',
        type: 'hls',
    },
    pluginOptions: {
        hls: {
            // hls config
        },
    },
});
console.log(dp.plugins.hls); // Hls instance
```

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

### DPlayer Configuration Parameters

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

This section details the available configuration options for DPlayer.

```APIDOC
## DPlayer Configuration Parameters

### Description
This section details the available configuration options for DPlayer.

### Parameters
#### Video Options
- **video.pic** (string) - The URL for the video poster image.
- **video.thumbnails** (string) - The URL for video thumbnails, generated by [DPlayer-thumbnails](https://github.com/MoePlayer/DPlayer-thumbnails).
- **video.type** (string) - The type of video stream. Allowed values: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal', or other custom types. See [#MSE support](#mse-support).
- **video.customType** (object) - Custom video type configuration. See [#MSE support](#mse-support).

#### Subtitle Options
- **subtitle** (object) - Configuration for external subtitles.
  - **subtitle.url** (string) - Required. The URL of the subtitle file.
  - **subtitle.type** (string) - The type of subtitle. Allowed values: 'webvtt', 'ass'. Currently, only 'webvtt' is supported.
  - **subtitle.fontSize** (string) - The font size of the subtitles (e.g., '20px').
  - **subtitle.bottom** (string) - The distance between the subtitle and the player bottom (e.g., '40px', '10%').
  - **subtitle.color** (string) - The color of the subtitles (e.g., '#fff').

#### Danmaku Options
- **danmaku** (object) - Configuration for displaying danmaku (bullet comments).
  - **danmaku.id** (string) - Required. The unique danmaku pool ID.
  - **danmaku.api** (string) - Required. The API endpoint for danmaku. See [#Danmaku API](#danmaku-api).
  - **danmaku.token** (string) - A backend verification token.
  - **danmaku.maximum** (number) - The maximum quantity of danmaku to display.
  - **danmaku.addition** (array) - Additional danmaku data. See [#bilibili danmaku](#bilibili-danmaku).
  - **danmaku.user** (string) - The danmaku username (default: 'DIYgod').
  - **danmaku.bottom** (string) - The distance between the danmaku and the player bottom to prevent overlap with subtitles (e.g., '10px', '10%').
  - **danmaku.unlimited** (boolean) - If true, displays all danmaku even if they overlap. Player remembers user settings. Defaults to false.
  - **danmaku.speedRate** (number) - A multiplier for danmaku speed. Larger values mean faster danmaku.

#### Other Options
- **contextmenu** (array) - An array for custom context menu items.
- **highlight** (array) - An array for custom time markers on the progress bar.
```

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

### Initialize DPlayer with MPEG DASH using Shaka Player

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Load shaka-player.compiled.js before DPlayer.min.js. Set the video type to 'shakaDash' and provide a custom type function to initialize Shaka Player.

```html
<div id="dplayer"></div>
<script src="shaka-player.compiled.js"></script>
<script src="DPlayer.min.js"></script>
```

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot: true,
    video: {
        url: 'demo.mpd',
        type: 'shakaDash',
        customType: {
            shakaDash: function (video, player) {
                var src = video.src;
                var playerShaka = new shaka.Player(video); // 将会修改 video.src
                playerShaka.load(src);
            },
        },
    },
});
```

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

### DPlayer Full Configuration Options

Source: https://context7.com/diygod/dplayer/llms.txt

Configure DPlayer with a comprehensive set of options, including theme, autoplay, hotkeys, danmaku settings, context menu items, and video highlights.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#FADFA3',
    loop: true,
    lang: 'zh-cn',
    screenshot: true,
    hotkey: true,
    preload: 'auto',
    logo: 'logo.png',
    volume: 0.7,
    mutex: true,
    playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2],
    airplay: true,
    chromecast: false,
    preventClickToggle: false,
    video: {
        url: 'dplayer.mp4',
        pic: 'dplayer.png',
        thumbnails: 'thumbnails.jpg',
        type: 'auto'
    },
    subtitle: {
        url: 'dplayer.vtt',
        type: 'webvtt',
        fontSize: '25px',
        bottom: '10%',
        color: '#b7daff'
    },
    danmaku: {
        id: '9E2E3368B56CDBB4',
        api: 'https://api.prprpr.me/dplayer/',
        token: 'tokendemo',
        maximum: 1000,
        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
        user: 'DIYgod',
        bottom: '15%',
        unlimited: true,
        speedRate: 0.5
    },
    contextmenu: [
        {
            text: 'custom1',
            link: 'https://github.com/DIYgod/DPlayer'
        },
        {
            text: 'custom2',
            click: (player) => {
                console.log(player);
            }
        }
    ],
    highlight: [
        {
            text: 'marker for 20s',
            time: 20
        },
        {
            text: 'marker for 2mins',
            time: 120
        }
    ]
});
```

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

### Initialize DPlayer with custom HLS type

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Alternatively, use `customType` to integrate HLS playback. This method allows for manual instantiation and attachment of the HLS player.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.m3u8',
        type: 'customHls',
        customType: {
            customHls: function (video, player) {
                const hls = new Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);
            },
        },
    },
});
```

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

### Configure Multiple Subtitles in DPlayer

Source: https://context7.com/diygod/dplayer/llms.txt

Set up multiple subtitle tracks with language and name options. Specify the default subtitle to display on load. Ensure the subtitle type matches the provided files.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'video.mp4'
    },
    subtitle: {
        url: [
            { subtitle: 'en.vtt', lang: 'en', name: 'English' },
            { subtitle: 'zh.vtt', lang: 'zh-cn', name: 'Chinese' },
            { subtitle: 'ja.vtt', lang: 'ja', name: 'Japanese' }
        ],
        type: 'webvtt',
        fontSize: '20px',
        bottom: '40px',
        color: '#fff',
        defaultSubtitle: 'en' // Match by lang or name
    }
});
```

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

### Configure video quality options

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Set video quality options including name, URL, and type. The `defaultQuality` property specifies the initially selected quality.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        quality: [
            {
                name: 'HD',
                url: 'demo.m3u8',
                type: 'hls',
            },
            {
                name: 'SD',
                url: 'demo.mp4',
                type: 'normal',
            },
        ],
        defaultQuality: 0,
        pic: 'demo.png',
        thumbnails: 'thumbnails.jpg',
    },
});
```

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

### Module Bundler Usage

Source: https://context7.com/diygod/dplayer/llms.txt

Import and initialize DPlayer using module bundlers like webpack.

```APIDOC
## Module Bundler Usage

### Description
Import DPlayer as an ES module when using webpack, Rollup, or other bundlers.

### Method
JavaScript Initialization (ES Module)

### Endpoint
N/A (Client-side initialization)

### Parameters
#### Request Body
- **container** (HTMLElement) - Required - The DOM element to mount the player.
- **screenshot** (boolean) - Optional - Enable screenshots.
- **video** (object) - Required - Video source configuration.
  - **url** (string) - Required - The URL of the video file.
  - **pic** (string) - Optional - The URL of the video poster image.
  - **thumbnails** (string) - Optional - The URL of the thumbnails sprite sheet.
- **subtitle** (object) - Optional - Subtitle configuration.
  - **url** (string) - Required - The URL of the subtitle file.
- **danmaku** (object) - Optional - Danmaku configuration.
  - **id** (string) - Required - Danmaku ID.
  - **api** (string) - Required - Danmaku API endpoint.

### Request Example
```javascript
import DPlayer from 'dplayer';

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot: true,
    video: {
        url: 'demo.mp4',
        pic: 'demo.jpg',
        thumbnails: 'thumbnails.jpg'
    },
    subtitle: {
        url: 'webvtt.vtt'
    },
    danmaku: {
        id: 'demo',
        api: 'https://api.prprpr.me/dplayer/'
    }
});
```

### Response
N/A (Player instance is returned)

```

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

### Initialize DPlayer with FLV using customType

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Use the 'customType' option to manually initialize flv.js for FLV playback when the default 'flv' type is not suitable.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.flv',
        type: 'customFlv',
        customType: {
            customFlv: function (video, player) {
                const flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    url: video.src,
                });
                flvPlayer.attachMediaElement(video);
                flvPlayer.load();
            },
        },
    },
});
```

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

### Quality Switching

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Configure video quality options, including setting the URL, type, and default quality.

```APIDOC
## Quality Switching

Set video url and video type in `video.quality`, set default quality by `video.defaultQuality`.

### Parameters

#### `video` Object

- **quality** (Array<Object>) - An array of quality objects, each with `name`, `url`, and `type`.
  - **name** (string) - The display name for the quality level (e.g., 'HD', 'SD').
  - **url** (string) - The URL of the video stream for this quality level.
  - **type** (string) - The type of the video stream ('hls', 'normal', etc.).
- **defaultQuality** (number) - The index of the default quality level to use.
- **pic** (string) - URL for the preview image.
- **thumbnails** (string) - URL for the thumbnails sprite sheet.
- **customType** (Object) - An object mapping custom type names to functions that handle MSE initialization.
  - **[typeName]** (function) - A function that takes `video` and `player` as arguments and initializes the MSE library.

### Request Example (Vue Component)

```html
<DPlayer :options="{
    video: {
        quality: [{
            name: 'HD',
            url: 'https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8',
            type: 'hls'
        }, {
            name: 'SD',
            url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
            type: 'normal'
        }],
        defaultQuality: 0,
        pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
        thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
    }
}"></DPlayer>
```

### Request Example (JavaScript Initialization)

```js
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        quality: [
            {
                name: 'HD',
                url: 'demo.m3u8',
                type: 'hls',
            },
            {
                name: 'SD',
                url: 'demo.mp4',
                type: 'normal',
            },
        ],
        defaultQuality: 0,
        pic: 'demo.png',
        thumbnails: 'thumbnails.jpg',
    },
});
```

### Custom Type Example with HLS

When using `customType`, listen for `destroy` and `quality_end` events to prevent memory leaks.

```js
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        quality: [
            {
                name: 'HD',
                url: 'demo_hd.m3u8',
                type: 'Hls',
            },
            {
                name: 'SD',
                url: 'demo_sd.m3u8',
                type: 'Hls',
            },
        ],
        defaultQuality: 0,
        customType: {
            Hls: (video, player) => {
                const hls = new window.Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);

                hls.sessionId = crypto.randomUUID();
                player.sessionId = hls.sessionId;
                player.events.on('destroy', () => {
                    hls.destroy();
                });
                player.events.on('quality_end', () => {
                    if (hls.sessionId !== player.sessionId) {
                        hls.destroy();
                    }
                });
            },
        },
    },
});
```
```

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

### Initialize DPlayer with Custom WebTorrent Type

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

An alternative method for WebTorrent integration using the `customType` option. This allows for more control over the WebTorrent client initialization and file rendering.

```javascript
// another way, use customType
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'magnet:demo',
        type: 'customWebTorrent',
        customType: {
            customWebTorrent: function (video, player) {
                player.container.classList.add('dplayer-loading');
                const client = new WebTorrent();
                const torrentId = video.src;
                client.add(torrentId, (torrent) => {
                    const file = torrent.files.find((file) => file.name.endsWith('.mp4'));
                    file.renderTo(
                        video,
                        {
                            autoplay: player.options.autoplay,
                        },
                        () => {
                            player.container.classList.remove('dplayer-loading');
                        }
                    );
                });
            },
        },
    },
});
```

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

### Switch Video Source

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Dynamically change the video source and optionally update danmaku settings using the `switchVideo` method. This is useful for playlists or changing video quality.

```javascript
dp.switchVideo(
    {
        url: 'second.mp4',
        pic: 'second.png',
        thumbnails: 'second.jpg',
    },
    {
        id: 'test',
        api: 'https://api.prprpr.me/dplayer/',
        maximum: 3000,
        user: 'DIYgod',
    }
);
```

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

### Integrate DPlayer with Other MSE Libraries

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Demonstrates how to integrate DPlayer with other Media Source Extension (MSE) libraries like Hls.js using the `customType` option. Ensure the MSE library is loaded before DPlayer.min.js.

```html
<div id="dplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="DPlayer.min.js"></script>
```

```javascript
var type = 'normal';
if (Hls.isSupported() && Hls.WEBRTC_SUPPORT) {
    type = 'customHls';
}
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.m3u8',
        type: type,
        customType: {
            customHls: function (video, player) {
                const hls = new Hls({
                    debug: false,
                    // Other hlsjsConfig options provided by hls.js
                    p2pConfig: {
                        live: false,
                        // Other p2pConfig options provided by CDNBye http://www.cdnbye.com/en/
                    },
                });
                hls.loadSource(video.src);
                hls.attachMedia(video);
            },
        },
    },
});
```

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

### Bilibili Danmaku Integration

Source: https://context7.com/diygod/dplayer/llms.txt

Load danmaku from Bilibili videos using the 'addition' option within the danmaku configuration. Requires a unique video ID and Bilibili API endpoint.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'video.mp4'
    },
    danmaku: {
        id: 'unique-video-id',
        api: 'https://api.prprpr.me/dplayer/',
        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142']
    }
});
```

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

### dp.toggle()

Source: https://context7.com/diygod/dplayer/llms.txt

Toggle between play and pause states.

```APIDOC
## dp.toggle()

### Description
Toggle between play and pause states based on current playback status.

### Method
JavaScript API Call

### Endpoint
N/A (Instance method)

### Parameters
N/A

### Request Example
```javascript
// Toggle play/pause
dp.toggle();
```

### Response
N/A

```

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

### Integrate Custom MSE Libraries

Source: https://context7.com/diygod/dplayer/llms.txt

Integrate any Media Source Extensions (MSE) library using the 'customType' option. The provided function handles loading and attaching the media source.

```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.m3u8',
        type: 'customHls',
        customType: {
            customHls: function (video, player) {
                const hls = new Hls({
                    debug: false,
                    p2pConfig: {
                        live: false
                    }
                });
                hls.loadSource(video.src);
                hls.attachMedia(video);

                // Clean up on destroy
                player.events.on('destroy', () => {
                    hls.destroy();
                });
            }
        }
    }
});
```

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

### Video Switching API

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Dynamically switch the video source and danmaku settings of the player.

```APIDOC
## Video Switching API

### Description
Enables switching the current video and its associated danmaku configuration.

### Method

- `dp.switchVideo(video, danmaku)`: Switches to a new video source and optionally updates danmaku settings.
  ```js
  dp.switchVideo(
      {
          url: 'second.mp4',
          pic: 'second.png',
          thumbnails: 'second.jpg',
      },
      {
          id: 'test',
          api: 'https://api.prprpr.me/dplayer/',
          maximum: 3000,
          user: 'DIYgod',
      }
  );
  ```
```

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

### Play MPEG DASH Streams with dash.js

Source: https://context7.com/diygod/dplayer/llms.txt

Enable DASH stream playback by including dash.js. DASH specific settings are available under 'pluginOptions.dash'.

```html
<script src="dash.min.js"></script>
<script src="DPlayer.min.js"></script>
<script>
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mpd',
        type: 'dash'
    },
    pluginOptions: {
        dash: {
            // dash.js config
        }
    }
});

// Access dash.js instance
console.log(dp.plugins.dash);
</script>
```

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

### Player Management

Source: https://context7.com/diygod/dplayer/llms.txt

Methods for destroying the player instance and managing fullscreen mode.

```APIDOC
## dp.destroy()

### Description
Destroy the player instance and clean up all resources and event listeners.

### Method
`dp.destroy()`

### Request Example
```javascript
// Clean up when done
dp.destroy();
```

## dp.fullScreen.request(type)

### Description
Request fullscreen mode. Type can be 'browser' for native fullscreen or 'web' for CSS-based fullscreen.

### Method
`dp.fullScreen.request(type)`

### Parameters
#### Path Parameters
- **type** (string) - Required - The type of fullscreen to request. Options: 'browser', 'web'.

### Request Example
```javascript
// Enter browser fullscreen
dp.fullScreen.request('browser');

// Enter web fullscreen (CSS-based, useful in iframes)
dp.fullScreen.request('web');
```

## dp.fullScreen.cancel(type)

### Description
Exit fullscreen mode.

### Method
`dp.fullScreen.cancel(type)`

### Parameters
#### Path Parameters
- **type** (string) - Required - The type of fullscreen to cancel. Options: 'browser', 'web'.

### Request Example
```javascript
// Exit browser fullscreen
dp.fullScreen.cancel('browser');

// Exit web fullscreen
dp.fullScreen.cancel('web');
```
```

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

### Notifications and Events

Source: https://context7.com/diygod/dplayer/llms.txt

Methods for displaying notices and handling player events.

```APIDOC
## dp.notice(text, time, opacity, id)

### Description
Display a notice message on the player. The time is in milliseconds (default 2000), opacity defaults to 0.8.

### Method
`dp.notice(text, time, opacity, id)`

### Parameters
#### Path Parameters
- **text** (string) - Required - The message to display.
- **time** (number) - Optional - Duration in milliseconds to display the notice. Use -1 for persistent notices.
- **opacity** (number) - Optional - Opacity of the notice (0 to 1). Defaults to 0.8.
- **id** (string) - Optional - A unique ID for the notice, allowing updates to the same notice.

### Request Example
```javascript
// Show a simple notice
dp.notice('Amazing player', 2000, 0.8);

// Show persistent notice (use -1 for time)
dp.notice('Loading...', -1);

// Show notice with custom ID for updating
dp.notice('Buffering 50%', 0, 0.8, 'buffer-notice');
dp.notice('Buffering 75%', 0, 0.8, 'buffer-notice'); // Updates same notice
```

## dp.on(event, handler)

### Description
Bind event handlers to video and player events.

### Method
`dp.on(event, handler)`

### Parameters
#### Path Parameters
- **event** (string) - Required - The name of the event to listen for (e.g., 'ended', 'timeupdate', 'screenshot', 'fullscreen').
- **handler** (function) - Required - The callback function to execute when the event is triggered.

### Request Example
```javascript
// Video events
dp.on('ended', function () {
    console.log('Video ended');
});

dp.on('timeupdate', function () {
    console.log('Current time:', dp.video.currentTime);
});

dp.on('canplay', function () {
    console.log('Video can play');
});

dp.on('error', function () {
    console.log('Video error occurred');
});

// Player events
dp.on('screenshot', function () {
    console.log('Screenshot taken');
});

dp.on('fullscreen', function () {
    console.log('Entered fullscreen');
});

dp.on('fullscreen_cancel', function () {
    console.log('Exited fullscreen');
});

dp.on('danmaku_send', function (danmaku) {
    console.log('Danmaku sent:', danmaku);
});

dp.on('quality_start', function (quality) {
    console.log('Quality switching to:', quality.name);
});

dp.on('quality_end', function () {
    console.log('Quality switch complete');
});

dp.on('destroy', function () {
    console.log('Player destroyed');
});
```
```

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

### Display a Notice Message

Source: https://github.com/diygod/dplayer/blob/master/docs/guide.md

Show a temporary message to the user using the `notice` method. You can customize the display duration and opacity.

```javascript
dp.notice('Amazing player', 2000, 0.8);
```