Dplayer - 一款非常优秀的开源弹幕H5播放器

Dplayer简介

Dplayer是一款非常优秀的开源的HTML5弹幕视频播放器，基于JavaScript编写，遵守MIT开源协议。支持的流媒体格式包含：HLS FLV MPEG DASH WebTorrent ，自定义流媒体格式等。多媒体格式支持： MP4 H.264 WebM Ogg Theora Vorbis。附上项目文档及地址：

# 官方文档地址

https://dplayer.diygod.dev/

# 项目仓库地址

https://github.com/DIYgod/DPlayer

另外，DPlayer系列播放器还包含Vue和React版本。

Dplayer demo

DEMO HTML

<link rel="stylesheet" href="DPlayer.min.CSS">
<!-- ... -->
<div id="player" class="dplayer"></div>
<!-- ... -->
<!--HLS和FLV支持需要在 DPlayer.min.js 前面加载 hls.js或者flv.js-->
<script type="text/JavaScript" src="hls.min.js"></script>
<script type="text/javascript" src="flv.min.js"></script>
<script type="text/javascript" src="DPlayer.min.js"></script>

DEMO JS

var dp = new DPlayer({
    container: document.getElementById('player'),
    autoplay: false,//自动播放
    preload: 'auto',//视频预加载
    volume: 0.7,//默认音量
    video: {
        url: https://xxx.com/index.M3U8,//视频地址
        type: 'auto',//视频类型
        pic: '',//视频封面
        thumbnails: '',//缩略图
    },
});

Dplayer参数

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: false,//自动播放
    live: false,//直播模式
    theme: '#FADFA3',//主题颜色
    loop: true,//循环播放
    lang: 'zh-cn',//语言选择
    screenshot: true,//截图选项
    hotkey: true,//热键开启
    airplay: false,//在 Safari 中开启 AirPlay
    lang: 'zh-cn',//语言
    preload: 'auto',//视频预加载
    logo: 'logo.png',//LOGO
    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: [//自定义进度条提示点参数
        {
            time: 20,
            text: '这是第 20 秒',
        },
        {
            time: 120,
            text: '这是 2 分钟',
        },
    ],});

Dplayer API

Dplayer有比较全面的API，结合Dplayer的事件绑定能够满足大部分开发者对视频页面的设计与控制，例如：

1、在暂停视频的同时，插入一个广告图片

2、在视频播放完毕之后，切换到下一个视频

3、当播放器加载视频失败时，弹出一个显示错误的提示框

等等...

dp.play(): 播放视频
dp.pause(): 暂停视频
dp.seek(time: number): 跳转到特定时间
dp.toggle(): 切换播放和暂停
dp.on(event: string, handler: function): 绑定视频和播放器事件
dp.switchVideo(video, danmaku): 切换到其他视频
dp.notice(text: string, time: number): 显示通知，时间的单位为毫秒，默认时间 2000 毫秒，默认透明度 0.8
dp.switchQuality(index: number): 切换清晰度
dp.destroy(): 销毁播放器
dp.speed(rate: number): 设置视频速度
dp.volume(percentage: number, nostorage: boolean, nonotice: boolean): 设置视频音量
dp.video: 原生 video
dp.video.currentTime: 返回视频当前播放时间
dp.video.duration: 返回视频总时间
dp.video.paused: 返回视频是否暂停
dp.danmaku
dp.danmaku.send(danmaku, callback: function): 提交一个新弹幕
dp.danmaku.draw(danmaku): 实时绘制一个新弹幕
dp.danmaku.opacity(percentage: number): 设置弹幕透明度，透明度值在 0 到 1 之间
dp.danmaku.clear(): 清除所有弹幕
dp.danmaku.hide(): 隐藏弹幕
dp.danmaku.show(): 显示弹幕
dp.fullScreen: 两个类型：web 和 browser，默认类型是 browser
dp.fullScreen.request(type: string): 进入全屏
dp.fullScreen.cancel(type: string): 退出全屏

DPlayer 事件绑定

//格式:
dp.on(event, handler)

//例子:
dp.on('ended', function () {
    console.log('player ended');
});
    
//视频事件
abort
canplay
canplaythrough
durationchange
emptied
ended
error
loadeddata
loadedmetadata
loadstart
mozaudioavailable
pause
play
playing
progress
ratechange
seeked
seeking
stalled
suspend
timeupdate
volumechange
waiting

//播放器事件
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
subtitle_show
subtitle_hide
subtitle_change