DPlayer

To use DPlayer for live streams with danmaku, set live: true and provide an apiBackend object to handle WebSocket communication.

Initialization

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    live: true,
    danmaku: true,
    apiBackend: {
        read: function (options) {
            // Logic to receive danmaku via WebSocket
            // Call options.success(danmakuArray) when data arrives
            options.success([]);
        },
        send: function (options) {
            // Logic to send danmaku via WebSocket
            options.success();
        },
    },
    video: {
        url: 'demo.m3u8',
        type: 'hls',
    },
});

Manually drawing danmaku You can manually trigger a danmaku to appear on the screen using dp.danmaku.draw():

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

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

When implementing a custom MSE library (like Hls.js) via the customType option, you must manually manage the lifecycle of the external library instance to avoid memory leaks.

Specifically, you should listen for the destroy and quality_end events on the DPlayer instance to call the cleanup method (e.g., hls.destroy()) of your library. If a quality switch occurs, ensure you only destroy the old instance if it is no longer the active one.

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

To support FLV, load the flv.js library before DPlayer.min.js.

Option 1: Using built-in FLV support

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.flv',
        type: 'flv',
    },
    pluginOptions: {
        flv: {
            mediaDataSource: {
                // mediaDataSource config
            },
            config: {
                // config
            },
        },
    },
});
console.log(dp.plugins.flv); // Access the flv instance

Option 2: Using customType

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

To support HLS (.m3u8), you must load the hls.js library before DPlayer.min.js. You can use the built-in hls type and pass configuration via pluginOptions.

Option 1: Using built-in HLS support

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

Option 2: Using customType If you need manual control, define a customType function:

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

To support WebTorrent (magnet links), load the webtorrent library before DPlayer.min.js.

Option 1: Using built-in WebTorrent support

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

Option 2: Using 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');
                        }
                    );
                });
            },
        },
    },
});