close

DPlayer Guide: Embed and Configure MP4, HLS, FLV Videos

What is DPlayer?

DPlayer is a powerful and flexible open-source video player. It supports not only common video formats like MP4 but also handles HLS and FLV streams, making it ideal for live video playback. DPlayer stands out with its minimalist, customizable interface and a built-in "danmaku" (floating comments) feature.

A Detailed Guide to Using DPlayer

To use DPlayer, you need to embed the library and any necessary dependencies, then configure the player.

Step 1: Get the Necessary Libraries

Using a CDN is the fastest way to get these libraries. DPlayer will automatically detect and use the dependent libraries if you include them on your page.

  • For MP4 (default):

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

  • For HLS (.m3u8):

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>

  • For FLV (.flv):

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>

Step 2: Create HTML and Configure the Player

After embedding the libraries, you can create a <div> element to display the video and then configure DPlayer with specific properties.

<!DOCTYPE html>
<html>
<head>
    <title>Advanced DPlayer Example</title>
    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
</head>
<body>

    <h1>How to Use DPlayer</h1>

    <div id="dplayer-container-1"></div>

    <hr>

    <div id="dplayer-container-2"></div>

    <hr>

    <div id="dplayer-container-3"></div>

    <script>
        // DPlayer configuration for MP4
        const dpMP4 = new DPlayer({
            container: document.getElementById('dplayer-container-1'),
            autoplay: false,
            lang: 'en',
            loop: true,
            hotkey: true,
            preload: 'auto',
            screenshot: true,
            video: {
                url: 'https://example.com/videos/my-video.mp4',
                pic: 'https://example.com/images/my-video-thumbnail.jpg',
                thumbnails: 'https://example.com/images/video-thumbnails.jpg',
                type: 'mp4'
            }
        });

        // DPlayer configuration for HLS
        const dpHLS = new DPlayer({
            container: document.getElementById('dplayer-container-2'),
            autoplay: true,
            lang: 'en',
            theme: '#ff6666',
            loop: false,
            hotkey: true,
            preload: 'metadata',
            video: {
                url: 'https://example.com/live/my-stream.m3u8',
                type: 'hls',
                customType: {
                    hls: function (video, player) {
                        const hls = new Hls();
                        hls.loadSource(video.src);
                        hls.attachMedia(video);
                    }
                }
            }
        });

        // DPlayer configuration for FLV
        const dpFLV = new DPlayer({
            container: document.getElementById('dplayer-container-3'),
            autoplay: true,
            lang: 'en',
            theme: '#0077c2',
            loop: false,
            hotkey: true,
            preload: 'auto',
            video: {
                url: 'https://example.com/live/my-stream.flv',
                type: 'flv',
                customType: {
                    flv: function (video, player) {
                        const flvPlayer = flvjs.createPlayer({
                            type: 'flv',
                            url: video.src,
                        });
                        flvPlayer.attachMediaElement(video);
                        flvPlayer.load();
                    }
                }
            }
        });
    </script>
</body>
</html>

Detailed Explanation of Properties

Common Properties (applicable to all video types)

  • container: The DOM element where DPlayer will be rendered. Required.

  • autoplay: true or false. Automatically plays the video when the page loads.

  • theme: Hex color code (e.g., '#FADFA3'). Sets the accent color of the player.

  • lang: The user interface language, e.g., 'en' for English.

  • loop: true or false. Loops the video after it ends.

  • hotkey: true or false. Enables keyboard shortcuts (e.g., spacebar to play/pause).

  • preload: 'auto', 'metadata', or 'none'. How the browser preloads the video.

    • 'auto': Preloads the entire video.

    • 'metadata': Only preloads metadata (duration, dimensions).

    • 'none': Does not preload anything.

  • screenshot: true or false. Allows users to take screenshots of the video.

  • video.url: The path to your video file.

  • video.pic: The path to the thumbnail image.

  • video.thumbnails: The path to a thumbnail sprite for the seek bar.

Properties for HLS and FLV

These video types require external libraries to function. DPlayer automatically uses them, but you can also customize their behavior via the customType property.

  • video.type: Specifies the video type.

    • 'mp4': Default, can be omitted.

    • 'hls': For .m3u8 videos.

    • 'flv': For .flv videos.

  • video.customType: An object that lets you customize the processing logic for each video type.

    • Example with HLS: The code within customType.hls creates an Hls instance and attaches it to DPlayer's <video> element. This is useful for handling special cases or gaining more control over the HLS stream.

    • Example with FLV: Similarly, this code creates an flvPlayer and attaches it to the <video> element to handle the FLV stream.

With these properties, you can create a powerful and highly customizable video player for any need, from simple videos to live streams.