DPlayer - Custom HTML5 Video Player Integration
Tags: html, javascript, video, sh20raj
Published: 2023-06-08 11:30:08

> DPlayer :- https://dplayer.diygod.dev/

> See Demo :- https://tutorials.sh20raj.repl.co/add-dplayer-html5-video-player/index.html

---

Here is the basic Integration Guide :- 

### 1. Place the CDN.

```html
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js"></script>
```

### 2. Place the container where you want to see the video player and the put it in this JavaScript Function.
```html
<div id="dplayer"></div>
<script>
    const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot: true,
    video: {
        url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4',
        pic: 'https://tutorials.sh20raj.repl.co/add-dplayer-html5-video-player/DPlayer.png',
thumbnails: 'https://tutorials.sh20raj.repl.co/add-dplayer-html5-video-player/DPlayer.png',
       
    },
    subtitle: {
        url: 'webvtt.vtt',
    }
});

  </script>
```
Where you will place `<div id="dplayer"></div>` the video player will be appear there...

Your basic video has been integrated. See the guide to get more updates.

---

# Quality switching

---


```javascript
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        quality: [
            {
                name: 'HD',
                url: 'https://tutorials.sh20raj.repl.co/add-dplayer-html5-video-player/raining_1080p.mp4',
                type: 'normal',
            },
            {
                name: 'SD',
                url: 'https://tutorials.sh20raj.repl.co/add-dplayer-html5-video-player/raining_480p.mp4',
                type: 'normal',
            },
        ],
        defaultQuality: 0,
        pic: 'demo.png',
        thumbnails: 'thumbnails.jpg',
    },
});
```

---

# More Features

---
you can use many more features see analyze and edit suitably.

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

{% github https://github.com/MoePlayer/DPlayer %}

---

This video player has many features. You can See their guide here :- https://dplayer.diygod.dev/guide/