DPlayer

https://dplayer.diygod.dev/guide/
Admin
DPlayer is an HTML5 video player with support for danmaku (bullet comments), multiple video formats,...
Tokens:12,611
Snippets:82
Trust Score:6.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize DPlayer for Live Streaming with Danmaku

Source: https://dplayer.diygod.dev/guide/index

This example shows how to configure DPlayer for live streaming. It enables the `live` and `danmaku` options and provides a mock WebSocket backend for sending and receiving danmaku. This setup is for demonstration; a real WebSocket backend is required for actual danmaku functionality.

```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 with npm

Source: https://dplayer.diygod.dev/guide/index

Installs the DPlayer library using npm. This is a common method for managing project dependencies in Node.js environments.

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

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

### Configure Live Stream with Danmaku in DPlayer

Source: https://dplayer.diygod.dev/guide/.html

This example demonstrates setting up DPlayer for live streaming with danmaku support. It involves configuring the player with `live: true` and `danmaku: true`, and provides a basic structure for a WebSocket backend to handle danmaku read and send operations.

```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',
    },
});

```

```javascript
const danmaku = {
    text: 'Get a danmaku via WebSocket',
    color: '#fff',
    type: 'right',
};
dp.danmaku.draw(danmaku);

```

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

### Install DPlayer using Yarn

Source: https://dplayer.diygod.dev/guide/.html

Installs the DPlayer library using the Yarn package manager. This is an alternative method for integrating DPlayer into projects managed with Yarn.

```bash
yarn add dplayer

```

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

### Install DPlayer with Yarn

Source: https://dplayer.diygod.dev/guide/index

Installs the DPlayer library using Yarn. Yarn is another popular package manager for JavaScript projects.

```bash
yarn add dplayer
```

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

### Player Configuration and Initialization

Source: https://dplayer.diygod.dev/guide/.html

Details on configuring DPlayer, including video quality settings.

```APIDOC
## Player Configuration and Initialization

### DPlayer Initialization Options

When initializing a DPlayer instance, you can configure video quality and other settings.

**Example**:
```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',
    },
});
```

### `video.quality`

An array of quality objects, each with `name`, `url`, and `type`.

### `video.defaultQuality`

The index of the default quality to use upon initialization.
```

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

### Video and Danmaku Management

Source: https://dplayer.diygod.dev/guide/.html

APIs for switching videos, managing danmaku, and displaying notices.

```APIDOC
## Video and Danmaku Management

### `dp.switchVideo(video, danmaku)`

**Description**: Switches to a new video and optionally configures danmaku settings.

**Parameters**:
* `video` (object) - Configuration for the new video (e.g., `url`, `pic`, `thumbnails`).
* `danmaku` (object, optional) - Configuration for danmaku.

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

### `dp.notice(text: string, time: number, opacity: number)`

**Description**: Displays a notice message on the player.

**Parameters**:
* `text` (string) - The message text to display.
* `time` (number, optional) - The duration in milliseconds the notice should be visible. Defaults to 2000.
* `opacity` (number, optional) - The opacity of the notice. Defaults to 0.8.

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

### `dp.danmaku.send(danmaku, callback: function)`

**Description**: Submits a new danmaku to the backend.

**Parameters**:
* `danmaku` (object) - Danmaku object containing `text`, `color`, and `type`.
* `callback` (function, optional) - Callback function executed upon successful submission.

**Example**:
```javascript
dp.danmaku.send(
    {
        text: 'dplayer is amazing',
        color: '#b7daff',
        type: 'right', // should be `top` `bottom` or `right`
    },
    function () {
        console.log('success');
    }
);
```

### `dp.danmaku.draw(danmaku)`

**Description**: Draws a new danmaku to the player in real time.

**Parameters**:
* `danmaku` (object) - Danmaku object containing `text`, `color`, and `type`.

**Example**:
```javascript
dp.danmaku.draw({
    text: 'DIYgod is amazing',
    color: '#fff',
    type: 'top',
});
```

### `dp.danmaku.opacity(percentage: number)`

**Description**: Sets the danmaku opacity.

**Parameters**:
* `percentage` (number) - The desired opacity level (between 0 and 1).

**Example**:
```javascript
dp.danmaku.opacity(0.5);
```

### `dp.danmaku.clear()`

**Description**: Clears all danmakus from the player.

### `dp.danmaku.hide()`

**Description**: Hides the danmaku.

### `dp.danmaku.show()`

**Description**: Shows the danmaku.
```

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

### Install DPlayer using npm

Source: https://dplayer.diygod.dev/guide/.html

Installs the DPlayer library using the npm package manager. This is a common method for integrating DPlayer into projects managed with npm.

```bash
npm install dplayer --save

```

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

### MSE Support

Source: https://dplayer.diygod.dev/guide/index

Information regarding Media Source Extensions (MSE) support in DPlayer.

```APIDOC
## MSE Support

### Description
Information regarding Media Source Extensions (MSE) support in DPlayer.

### Details

DPlayer utilizes Media Source Extensions (MSE) for adaptive streaming protocols like HLS. Ensure your browser supports MSE for features like HLS playback (`type: 'hls'`).
```

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

### Danmaku API Configuration

Source: https://dplayer.diygod.dev/guide/.html

Information on configuring danmaku API endpoints for DPlayer.

```APIDOC
## Danmaku API Configuration

### `danmaku.api`

**Ready-made API**: `https://api.prprpr.me/dplayer/`
**Daily backup data**: DPlayer-data

### Setting up your own API

Refer to DPlayer-node for self-hosting danmaku APIs.

### Bilibili Danmaku Integration

**API**: `https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]`

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

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

### DPlayer: Load FLV Video with flv.js

Source: https://dplayer.diygod.dev/guide/index

This example shows how to play FLV streams using `flv.js` with DPlayer. Ensure `flv.min.js` is loaded before `DPlayer.min.js`. The video type is set to 'flv', and `flv.js` specific configurations can be passed via `pluginOptions.flv`.

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

```

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

### Quality Switching and Fullscreen

Source: https://dplayer.diygod.dev/guide/.html

APIs for switching video quality and managing fullscreen modes.

```APIDOC
## Quality Switching and Fullscreen

### `dp.switchQuality(index: number)`

**Description**: Switches to a video quality at the specified index.

**Parameters**:
* `index` (number) - The index of the desired quality.

### `dp.fullScreen.request(type: string)`

**Description**: Requests fullscreen mode.

**Parameters**:
* `type` (string) - The type of fullscreen ('web' or 'browser'). 'browser' is the default.

**Example**:
```javascript
dp.fullScreen.request('web');
```

### `dp.fullScreen.cancel(type: string)`

**Description**: Cancels fullscreen mode.

**Parameters**:
* `type` (string) - The type of fullscreen to cancel ('web' or 'browser').

**Example**:
```javascript
dp.fullScreen.cancel('web');
```
```

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

### DPlayer: Custom HLS Loading with hls.js

Source: https://dplayer.diygod.dev/guide/index

This example shows an alternative method for loading HLS streams using DPlayer's `customType` option. It manually creates and attaches an HLS instance using `hls.js` when the video type is set to `customHls`.

```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);
            },
        },
    },
});

```

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

### DPlayer: Custom MPEG DASH Loading with dash.js

Source: https://dplayer.diygod.dev/guide/index

This example shows how to use DPlayer's `customType` for MPEG DASH playback with `dash.js`. The `customDash` type initializes a `dashjs` media player and attaches it to the video element.

```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);
            },
        },
    },
});

```

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

### Event Binding

Source: https://dplayer.diygod.dev/guide/.html

Methods for binding and handling DPlayer and video events.

```APIDOC
## Event Binding

### `dp.on(event: string, handler: function)`

**Description**: Binds an event listener to the player.

**Parameters**:
* `event` (string) - The name of the event to listen for (e.g., 'ended', 'play').
* `handler` (function) - The callback function to execute when the event is triggered.

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

### Video Events

List of available video events:
`abort`, `canplay`, `canplaythrough`, `durationchange`, `emptied`, `ended`, `error`, `loadeddata`, `loadedmetadata`, `loadstart`, `mozaudioavailable`, `pause`, `play`, `playing`, `progress`, `ratechange`, `seeked`, `seeking`, `stalled`, `suspend`, `timeupdate`, `volumechange`, `waiting`

### Player Events

List of available player events:
`screenshot`, `thumbnails_show`, `thumbnails_hide`, `danmaku_show`, `danmaku_hide`, `danmaku_clear`, `danmaku_loaded`, `danmaku_send`, `danmaku_opacity`, `contextmenu_show`, `contextmenu_hide`, `notice_show`, `notice_hide`, `quality_start`, `quality_end`, `destroy`, `resize`, `fullscreen`, `fullscreen_cancel`, `webfullscreen`, `webfullscreen_cancel`, `subtitle_show`, `subtitle_hide`, `subtitle_change`
```

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

### Play MPEG DASH Video with DPlayer using dash.js

Source: https://dplayer.diygod.dev/guide/.html

Enables MPEG DASH playback by including dash.js before DPlayer.min.js. The guide illustrates DPlayer initialization with a DASH video URL and an alternative using customType for custom DASH handling.

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

```

```javascript
// another way, use customType
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 Player

Source: https://dplayer.diygod.dev/guide/index

Demonstrates the basic HTML structure and JavaScript initialization for DPlayer. It includes setting up the player container, enabling screenshots, and configuring video, subtitle, and danmaku sources.

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

```javascript
import DPlayer from 'dplayer';

const dp = new DPlayer(options);
```

```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/',
    },
});
```

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

### Initialize DPlayer with HTML and JavaScript

Source: https://dplayer.diygod.dev/guide/.html

Demonstrates how to include DPlayer in an HTML file by loading the script and then initializing a player instance with various options. This is suitable for direct HTML integration.

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

```

```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/',
    },
});

```

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

### Initialize DPlayer with WebTorrent

Source: https://dplayer.diygod.dev/guide/index

This snippet demonstrates how to initialize DPlayer to play videos using the WebTorrent protocol. It requires the `webtorrent.min.js` library to be loaded before `DPlayer.min.js`. The video source is provided as a magnet link.

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

```

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

### Quality Switching Configuration

Source: https://dplayer.diygod.dev/guide/index

Configures multiple video qualities and sets the default quality for the player.

```APIDOC
## Quality Switching Configuration

### Description
Configures multiple video qualities and sets the default quality for the player.

### Configuration

- **`video.quality`**
  - Description: An array of video quality objects, each defining a quality level.
  - Each quality object should contain:
    - `name` (string): The display name for the quality (e.g., 'HD', 'SD').
    - `url` (string): The URL of the video stream for this quality.
    - `type` (string): The type of video stream (e.g., 'hls', 'normal').

- **`video.defaultQuality`**
  - Description: The index of the default quality to be used when the player loads.
  - Type: number

### Example

```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',
    },
});
```
```

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

### Volume Control

Source: https://dplayer.diygod.dev/guide/.html

API method to set the volume of the video player.

```APIDOC
## Volume Control

### `dp.volume(percentage: number, nostorage: boolean, nonotice: boolean)`

**Description**: Sets the volume of the video player.

**Parameters**:
* `percentage` (number) - The volume level, expressed as a percentage (0.0 to 1.0).
* `nostorage` (boolean, optional) - If true, the volume setting will not be stored in local storage.
* `nonotice` (boolean, optional) - If true, no volume change notice will be displayed.

**Example**:
```javascript
dp.volume(0.1, true, false);
```
```

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

### Initialize DPlayer with Custom Options (JavaScript)

Source: https://dplayer.diygod.dev/guide/index

This snippet shows how to initialize a DPlayer instance with a wide range of custom options. It covers video source, poster, thumbnails, type, subtitle configuration, danmaku settings, custom context menus, and progress bar highlights. Ensure the 'container' element exists in your HTML.

```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,
        },
    ],
});
```

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

### Quality and Speed Control API

Source: https://dplayer.diygod.dev/guide/index

Enables switching video quality and adjusting playback speed.

```APIDOC
## Quality and Speed Control API

### Description
Enables switching video quality and adjusting playback speed.

### Methods

- **`dp.switchQuality(index: number)`**
  - Description: Switches to a different video quality based on the provided index.
  - Method: `POST` (conceptual)
  - Endpoint: N/A
  - Parameters:
    - Path Parameters: None
    - Query Parameters: None
    - Request Body:
      - `index` (number) - Required - The index of the quality to switch to.

- **`dp.speed(rate: number)`**
  - Description: Sets the playback speed of the video.
  - Method: `POST` (conceptual)
  - Endpoint: N/A
  - Parameters:
    - Path Parameters: None
    - Query Parameters: None
    - Request Body:
      - `rate` (number) - Required - The playback speed rate (e.g., 1.0 for normal speed, 2.0 for double speed).
```

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

### Player Destruction

Source: https://dplayer.diygod.dev/guide/.html

API method to clean up and destroy the DPlayer instance.

```APIDOC
## Player Destruction

### `dp.destroy()`

**Description**: Destroys the DPlayer instance, removing event listeners and cleaning up resources.
```

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

### Initialize DPlayer with WebTorrent using customType

Source: https://dplayer.diygod.dev/guide/index

This code shows an alternative way to integrate WebTorrent with DPlayer using the `customType` option. It involves manually creating a WebTorrent client and rendering the video file. This method provides more control over the WebTorrent integration.

```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: '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');
                        }
                    );
                });
            },
        },
    },
});

```

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

### Native Video Properties

Source: https://dplayer.diygod.dev/guide/.html

Access to native HTML5 video element properties and methods.

```APIDOC
## Native Video Properties

The DPlayer instance provides access to the underlying native video element.

### `dp.video`

**Description**: Reference to the native HTML5 video element.

### `dp.video.currentTime`

**Description**: Returns the current playback position of the video in seconds.

### `dp.video.duration`

**Description**: Returns the total duration of the video in seconds.

### `dp.video.paused`

**Description**: Returns a boolean indicating whether the video is currently paused (`true`) or playing (`false`).

Most native API methods and properties of the HTML5 video element are supported.
```

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

### Initialize DPlayer with Module Bundler

Source: https://dplayer.diygod.dev/guide/.html

Shows how to import and initialize DPlayer within a project that uses a module bundler like Webpack or Rollup. This is the standard approach for modern JavaScript development.

```javascript
import DPlayer from 'dplayer';

const dp = new DPlayer(options);

```

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

### Video Speed Control

Source: https://dplayer.diygod.dev/guide/.html

API method to set the playback speed of the video.

```APIDOC
## Video Speed Control

### `dp.speed(rate: number)`

**Description**: Sets the playback speed of the video.

**Parameters**:
* `rate` (number) - The playback speed multiplier (e.g., 1.0 for normal speed, 2.0 for double speed).
```

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

### Play Video with DPlayer

Source: https://dplayer.diygod.dev/guide/.html

Initiates video playback using the DPlayer API. This is a basic control function.

```javascript
dp.play();
```

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

### Notification and Volume Control API

Source: https://dplayer.diygod.dev/guide/index

Allows displaying notices to the user and controlling the player's volume.

```APIDOC
## Notification and Volume Control API

### Description
Allows displaying notices to the user and controlling the player's volume.

### Methods

- **`dp.notice(text: string, time: number, opacity: number)`**
  - Description: Displays a notice message to the user.
  - Method: `POST` (conceptual)
  - Endpoint: N/A
  - Parameters:
    - Path Parameters: None
    - Query Parameters: None
    - Request Body:
      - `text` (string) - Required - The message text to display.
      - `time` (number) - Optional - The duration in milliseconds the notice should be displayed (default: 2000).
      - `opacity` (number) - Optional - The opacity of the notice (default: 0.8).
  - Request Example:
    ```json
    {
      "example": "dp.notice('Amazing player', 2000, 0.8);"
    }
    ```

- **`dp.volume(percentage: number, nostorage: boolean, nonotice: boolean)`**
  - Description: Sets the video volume.
  - Method: `POST` (conceptual)
  - Endpoint: N/A
  - Parameters:
    - Path Parameters: None
    - Query Parameters: None
    - Request Body:
      - `percentage` (number) - Required - The volume level (0 to 1).
      - `nostorage` (boolean) - Optional - If true, the volume change is not stored.
      - `nonotice` (boolean) - Optional - If true, no volume change notice is displayed.
  - Request Example:
    ```json
    {
      "example": "dp.volume(0.1, true, false);"
    }
    ```
```

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

### Play HLS Video with DPlayer using hls.js

Source: https://dplayer.diygod.dev/guide/.html

Integrates HLS playback by loading the hls.js library before DPlayer.min.js. It shows how to initialize DPlayer with an HLS video URL and provides an alternative method using a customType for more granular control.

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

```

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

```

```javascript
// another way, use customType
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);
            },
        },
    },
});

```

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

### Fullscreen API

Source: https://dplayer.diygod.dev/guide/index

Controls the fullscreen mode of the player, supporting both web and browser fullscreen.

```APIDOC
## Fullscreen API

### Description
Controls the fullscreen mode of the player, supporting both web and browser fullscreen.

### Properties

- **`dp.fullScreen`**
  - Description: Object for managing fullscreen.
  - Types: `web` or `browser` (default is `browser`).

### Methods

- **`dp.fullScreen.request(type: string)`**
  - Description: Requests fullscreen mode.
  - Method: `POST` (conceptual)
  - Endpoint: N/A
  - Parameters:
    - Path Parameters: None
    - Query Parameters: None
    - Request Body:
      - `type` (string) - Optional - The type of fullscreen ('web' or 'browser', defaults to 'browser').
  - Request Example:
    ```json
    {
      "example": "dp.fullScreen.request('web');"
    }
    ```

- **`dp.fullScreen.cancel(type: string)`**
  - Description: Cancels fullscreen mode.
  - Method: `POST` (conceptual)
  - Endpoint: N/A
  - Parameters:
    - Path Parameters: None
    - Query Parameters: None
    - Request Body:
      - `type` (string) - Optional - The type of fullscreen ('web' or 'browser', defaults to 'browser').
  - Request Example:
    ```json
    {
      "example": "dp.fullScreen.cancel('web');"
    }
    ```
```

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

### DPlayer Danmaku Configuration: Bilibili danmaku addition

Source: https://dplayer.diygod.dev/guide/index

Configures DPlayer to include Bilibili danmaku from a specified API endpoint. This allows integration with Bilibili's danmaku system.

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

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

### Event Binding API

Source: https://dplayer.diygod.dev/guide/index

Allows binding event listeners to player and video events for custom handling.

```APIDOC
## Event Binding API

### Description
Allows binding event listeners to player and video events for custom handling.

### Method

- **`dp.on(event: string, handler: function)`**
  - Description: Binds a handler function to a specific player or video event.
  - Method: `POST` (conceptual)
  - Endpoint: N/A
  - Parameters:
    - Path Parameters: None
    - Query Parameters: None
    - Request Body:
      - `event` (string) - Required - The name of the event to listen for (e.g., 'ended', 'play', 'resize').
      - `handler` (function) - Required - The function to execute when the event is triggered.
  - Request Example:
    ```json
    {
      "example": "dp.on('ended', function () {\n    console.log('player ended');\n});"
    }
    ```

### Supported Video Events

- `abort`
- `canplay`
- `canplaythrough`
- `durationchange`
- `emptied`
- `ended`
- `error`
- `loadeddata`
- `loadedmetadata`
- `loadstart`
- `mozaudioavailable`
- `pause`
- `play`
- `playing`
- `progress`
- `ratechange`
- `seeked`
- `seeking`
- `stalled`
- `suspend`
- `timeupdate`
- `volumechange`
- `waiting`

### Supported Player Events

- `screenshot`
- `thumbnails_show`
- `thumbnails_hide`
- `danmaku_show`
- `danmaku_hide`
- `danmaku_clear`
- `danmaku_loaded`
- `danmaku_send`
- `danmaku_opacity`
- `contextmenu_show`
- `contextmenu_hide`
- `notice_show`
- `notice_hide`
- `quality_start`
- `quality_end`
- `destroy`
- `resize`
- `fullscreen`
- `fullscreen_cancel`
- `webfullscreen`
- `webfullscreen_cancel`
- `subtitle_show`
- `subtitle_hide`
- `subtitle_change`
```

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

### Integrate WebTorrent with DPlayer

Source: https://dplayer.diygod.dev/guide/.html

Demonstrates how to integrate WebTorrent into DPlayer for P2P streaming. It requires loading the 'webtorrent.min.js' library before 'DPlayer.min.js'. The integration can be done directly via plugin options or using a custom type for more control.

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

```

```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');
                        }
                    );
                });
            },
        },
    },
});

```

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

### DPlayer: MPEG DASH with Shaka Player

Source: https://dplayer.diygod.dev/guide/index

This snippet demonstrates integrating MPEG DASH playback using Shaka Player with DPlayer. It requires `shaka-player.compiled.js` to be loaded prior to `DPlayer.min.js`. The `shakaDash` custom type initializes a Shaka Player instance and loads the video source.

```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);
            },
        },
    },
});

```

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

### Danmaku API

Source: https://dplayer.diygod.dev/guide/index

Manages danmaku (bullet comments) including sending, drawing, and controlling their appearance.

```APIDOC
## Danmaku API

### Description
Manages danmaku (bullet comments) including sending, drawing, and controlling their appearance.

### Methods

- **`dp.danmaku.send(danmaku: object, callback: function)`**
  - Description: Submits a new danmaku to the backend server.
  - Method: `POST` (conceptual)
  - Endpoint: N/A
  - Parameters:
    - Path Parameters: None
    - Query Parameters: None
    - Request Body:
      - `danmaku` (object) - Required - The danmaku object to send.
        - `text` (string) - Required - The danmaku text content.
        - `color` (string) - Optional - The color of the danmaku (e.g., '#FFFFFF').
        - `type` (string) - Optional - The display type ('top', 'bottom', or 'right', default: 'right').
      - `callback` (function) - Optional - A callback function executed upon successful sending.
  - Request Example:
    ```json
    {
      "example": "dp.danmaku.send({\n    text: 'dplayer is amazing',\n    color: '#b7daff',\n    type: 'right', // should be `top` `bottom` or `right`\n    },\n    function () {\n    console.log('success');\n    }\n);"
    }
    ```

- **`dp.danmaku.draw(danmaku: object)`**
  - Description: Draws a new danmaku to the player in real-time.
  - Method: `POST` (conceptual)
  - Endpoint: N/A
  - Parameters:
    - Path Parameters: None
    - Query Parameters: None
    - Request Body:
      - `danmaku` (object) - Required - The danmaku object to draw.
        - `text` (string) - Required - The danmaku text content.
        - `color` (string) - Optional - The color of the danmaku.
        - `type` (string) - Optional - The display type ('top', 'bottom', or 'right').
  - Request Example:
    ```json
    {
      "example": "dp.danmaku.draw({\n    text: 'DIYgod is amazing',\n    color: '#fff',\n    type: 'top',\n    });"
    }
    ```

- **`dp.danmaku.opacity(percentage: number)`**
  - Description: Sets the opacity of the danmakus.
  - Method: `POST` (conceptual)
  - Endpoint: N/A
  - Parameters:
    - Path Parameters: None
    - Query Parameters: None
    - Request Body:
      - `percentage` (number) - Required - The opacity level, between 0 and 1.
  - Request Example:
    ```json
    {
      "example": "dp.danmaku.opacity(0.5);"
    }
    ```

- **`dp.danmaku.clear()`**
  - Description: Clears all displayed danmakus from the player.
  - Method: `POST` (conceptual)
  - Endpoint: N/A

- **`dp.danmaku.hide()`**
  - Description: Hides all danmakus.
  - Method: `POST` (conceptual)
  - Endpoint: N/A

- **`dp.danmaku.show()`**
  - Description: Shows all danmakus.
  - Method: `POST` (conceptual)
  - Endpoint: N/A

### Danmaku API Configuration

- **`danmaku.api`**
  - Description: Specifies the API endpoint for danmaku services.
  - Default API: `https://api.prprpr.me/dplayer/`

- **`danmaku.addition`**
  - Description: Allows adding external danmaku sources, such as Bilibili danmaku.
  - Example for Bilibili danmaku:
    - API: `https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]`
  - Request Example:
    ```json
    {
      "example": "const option = {\n    danmaku: {\n        // ...\n        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]'],\n    },\n};"
    }
    ```
```

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

### Video Playback Controls

Source: https://dplayer.diygod.dev/guide/.html

API methods for controlling video playback, including play, pause, seeking, and toggling.

```APIDOC
## Video Playback Controls

### `dp.play()`

**Description**: Plays the video.

### `dp.pause()`

**Description**: Pauses the video.

### `dp.seek(time: number)`

**Description**: Seeks to a specified time in the video.
**Parameters**:
* `time` (number) - The time in seconds to seek to.

**Example**:
```javascript
dp.seek(100);
```

### `dp.toggle()`

**Description**: Toggles between playing and pausing the video.
```

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

### Player Control API

Source: https://dplayer.diygod.dev/guide/index

Provides methods to control video playback such as play, pause, seek, toggle, and switch videos.

```APIDOC
## Player Control API

### Description
Provides methods to control video playback such as play, pause, seek, toggle, and switch videos.

### Methods

- **`dp.play()`**
  - Description: Plays the video.
  - Method: `POST` (conceptual, as it's a method call)
  - Endpoint: N/A

- **`dp.pause()`**
  - Description: Pauses the video.
  - Method: `POST` (conceptual)
  - Endpoint: N/A

- **`dp.seek(time: number)`**
  - Description: Seeks to a specified time in the video.
  - Method: `POST` (conceptual)
  - Endpoint: N/A
  - Parameters:
    - Path Parameters: None
    - Query Parameters: None
    - Request Body:
      - `time` (number) - Required - The time in seconds to seek to.
  - Request Example:
    ```json
    {
      "example": "dp.seek(100);"
    }
    ```

- **`dp.toggle()`**
  - Description: Toggles between play and pause states.
  - Method: `POST` (conceptual)
  - Endpoint: N/A

- **`dp.switchVideo(video: object, danmaku: object)`**
  - Description: Switches to a new video with specified options.
  - Method: `POST` (conceptual)
  - Endpoint: N/A
  - Parameters:
    - Path Parameters: None
    - Query Parameters: None
    - Request Body:
      - `video` (object) - Required - Video configuration object.
        - `url` (string) - Required - URL of the video.
        - `pic` (string) - Optional - URL of the video thumbnail.
        - `thumbnails` (string) - Optional - URL for sprite thumbnails.
      - `danmaku` (object) - Optional - Danmaku configuration object.
        - `id` (string) - Required - Danmaku ID.
        - `api` (string) - Required - Danmaku API endpoint.
        - `maximum` (number) - Optional - Maximum number of danmakus.
        - `user` (string) - Optional - Username for danmaku.
  - Request Example:
    ```json
    {
      "example": "dp.switchVideo({\n    url: 'second.mp4',\n    pic: 'second.png',\n    thumbnails: 'second.jpg',\n    },\n    {\n    id: 'test',\n    api: 'https://api.prprpr.me/dplayer/',\n    maximum: 3000,\n    user: 'DIYgod',\n    }\n);"
    }
    ```

- **`dp.destroy()`**
  - Description: Destroys the player instance, releasing resources.
  - Method: `POST` (conceptual)
  - Endpoint: N/A
```

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

### Initialize DPlayer with MSE Library (CDNBye)

Source: https://dplayer.diygod.dev/guide/index

This snippet demonstrates how to make DPlayer work with other MSE (Media Source Extensions) libraries, specifically using CDNBye for P2P HLS streaming. It checks for HLS support and uses `customType` to integrate the HLS library.

```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);
            },
        },
    },
});

```

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

### Switch Video Source in DPlayer

Source: https://dplayer.diygod.dev/guide/.html

Switches the DPlayer instance to a new video source, optionally with danmaku settings. Allows dynamic content changes.

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