介绍

DPlayer是一款开源的基于浏览器的H5视频弹幕播放器，DPlayer是一个基于MIT开源协议的项目，完全免费使用，在Github上相当的受欢迎，目前已经拥有9.2k的stars，即将突破万星。而且顺便告诉大家，DPlayer是开发者的毕设作品，后经不断完善，也越来越强大！

Github

https://github.com/MoePlayer/DPlayer

安装使用

• 安装

使用 npm:

npm install dplayer --save

使用 Yarn:

yarn add dplayer

• 快速开始

我们先尝试初始化一个最简单的 DPlayer

加载播放器文件:

或者使用模块管理器:

import DPlayer from 'dplayer';

const dp = new DPlayer(options);

在 js 里初始化:

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

一个最简单的 DPlayer 就初始化好了，它只有最基本的视频播放功能

丰富的参数

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://***',
        token: 'tokendemo',
        maximum: 1000,
        addition: ['https://***/bilibili?aid=4157142'],
        user: 'DIYgod',
        bottom: '15%',
        unlimited: true,
    },
    contextmenu: [
        {
            text: 'custom1',
            link: '***',
        },
        {
            text: 'custom2',
            click: (player) => {
                console.log(player);
            },
        },
    ],
    highlight: [
        {
            time: 20,
            text: '这是第 20 秒',
        },
        {
            time: 120,
            text: '这是 2 分钟',
        },
    ],
});

弹幕接口

弹幕接口可以使用现成的，也可以自己搭建

https://github.com/MoePlayer/DPlayer-node

直播使用

你可以把 DPlayer 用在直播当中，但如果你想要直播弹幕，你需要自己准备一个 WebSocket 后端。

初始化播放器:

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    live: true,
    danmaku: true,
    apiBackend: {
        read: function (endpoint, callback) {
            console.log('Pretend to connect WebSocket');
            callback();
        },
        send: function (endpoint, danmakuData, callback) {
            console.log('Pretend to send danmaku via WebSocket', danmakuData);
            callback();
        },
    },
    video: {
        url: 'demo.m3u8',
        type: 'hls',
    },
});

通过 WebSocket 获取到弹幕之后，通过 dp.danmaku.draw 绘制弹幕:

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

总结

DPlayer是一个非常不错的播放器，支持的格式也非常丰富，还有非常实用的弹幕功能，爱折腾的小伙伴们可以折腾一下了，支持开发者，enjoy it！