DPlayer 功能强大的 H5 视频播放器插件支持弹幕

发布于 2019-05-19 11:28:05 字数 18480 浏览 7179 评论 2

DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku，支持HLS，FLV，MPEG DASH，WebTorrent以及其他视频格式，支持截屏、热键、切换清晰度以及字幕等。

安装

使用 npm:

npm install dplayer --save

使用 Yarn:

yarn add dplayer

入门

<link rel="stylesheet" href="DPlayer.min.css">
<div id="dplayer"></div>
<script src="DPlayer.min.js"></script>

const dp = new DPlayer({
  container: document.getElementById('dplayer'),
  screenshot: true,
  video: {
    url: 'demo.mp4',
    pic: 'demo.jpg',
    thumbnails: 'thumbnails.jpg'
  },
  subtitle: {
    url: 'webvtt.vtt'
  },
  danmaku: {
    id: 'demo',
    api: 'https://api.prprpr.me/dplayer/'
  }
});

使用模块管理器:

import 'dplayer/dist/DPlayer.min.css';
import DPlayer from 'dplayer';

const dp = new DPlayer(options);

参数

名称	默认值	描述
container	document.querySelector('.dplayer')	播放器容器元素
live	false	开启直播模式, 详情
autoplay	false	视频自动播放
theme	'#b7daff'	主题色
loop	false	视频循环播放
lang	navigator.language.toLowerCase()	可选值: 'en', 'zh-cn', 'zh-tw'
screenshot	false	开启截图，如果开启，视频和视频封面需要开启跨域
hotkey	true	开启热键
preload	'auto'	预加载，可选值: 'none', 'metadata', 'auto'
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
logo	-	在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
apiBackend	-	自定义获取和发送弹幕行为，详情
video	-	视频信息
video.quality	-	详情
video.defaultQuality	-	详情
video.url	-	视频链接
video.pic	-	视频封面
video.thumbnails	-	视频缩略图，可以使用 DPlayer-thumbnails 生成
video.type	'auto'	可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型, 详情
video.customType	-	自定义类型, 详情
subtitle	-	外挂字幕
subtitle.url	`required`	字幕链接
subtitle.type	'webvtt'	字幕类型，可选值: 'webvtt', 'ass'，目前只支持 webvtt
subtitle.fontSize	'20px'	字幕字号
subtitle.bottom	'40px'	字幕距离播放器底部的距离，取值形如: '10px' '10%'
subtitle.color	'#fff'	字幕颜色
danmaku	-	显示弹幕
danmaku.id	`required`	弹幕池id，必须唯一
danmaku.api	`required`	详情
danmaku.token	-	弹幕后端验证 token
danmaku.maximum	-	弹幕最大数量
danmaku.addition	-	额外外挂弹幕，详情
danmaku.user	'DIYgod'	弹幕用户名
danmaku.bottom	-	弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: '10px' '10%'
danmaku.unlimited	false	海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
contextmenu	[]	自定义右键菜单
highlight	[]	自定义进度条提示点
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器

例如:

const dp = new DPlayer({
  container: document.getElementById('player'),
  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
  },
  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 分钟'
    }
  ]
});

API

dp.play(): 播放视频
dp.pause(): 暂停视频
dp.seek(time: number): 跳转到特定时间
```
dp.seek(100);
```
dp.toggle(): 切换播放和暂停
dp.on(event: string, handler: function): 绑定视频和播放器事件，详情

dp.switchVideo(video, danmaku): 切换到其他视频

dp.switchVideo({
  url: 'second.mp4',
  pic: 'second.png',
  thumbnails: 'second.jpg'
}, {
  id: 'test',
  api: 'https://api.prprpr.me/dplayer/',
  maximum: 3000,
  user: 'DIYgod'
});

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.volume(0.1, true, false);
```
dp.video: 原生 video
- dp.video.currentTime: 返回视频当前播放时间
- dp.video.duration: 返回视频总时间
- dp.video.paused: 返回视频是否暂停
- 支持大多数原生video接口
dp.danmaku
- dp.danmaku.send(danmaku, callback: function): 提交一个新弹幕
```
dp.danmaku.send({
   text: 'dplayer is amazing',
   color: '#b7daff',
   type: 'right'   // should be `top` `bottom` or `right`
}, function () {
   console.log('success');
});
```
- dp.danmaku.draw(danmaku): 实时绘制一个新弹幕
```
dp.danmaku.draw({
   text: 'DIYgod is amazing',
   color: '#fff',
   type: 'top'
});
```
- dp.danmaku.opacity(percentage: number): 设置弹幕透明度，透明度值在 0 到 1 之间
```
dp.danmaku.opacity(0.5);
```
- dp.danmaku.clear(): 清除所有弹幕
- dp.danmaku.hide(): 隐藏弹幕
- dp.danmaku.show(): 显示弹幕
dp.fullScreen: 两个类型：web 和 browser，默认类型是 browser
- dp.fullScreen.request(type: string): 进入全屏
```
dp.fullScreen.request('web');
```
- dp.fullScreen.cancel(type: string): 退出全屏
```
dp.fullScreen.cancel('web');
```

事件绑定

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

清晰度切换

在 video.quality 里设置不同清晰度的视频链接和类型，video.defaultQuality 设置默认清晰度

const dp = new DPlayer({
  container: document.getElementById('dplayer'),
  video: {
    quality: [{
      name: 'HD',
      url: 'demo.m3u8',
      type: 'hls'
    }, {
      name: 'SD',
      url: 'demo.mp4',
      type: 'normal'
    }],
    defaultQuality: 0,
    pic: 'demo.png',
    thumbnails: 'thumbnails.jpg',
  }
});

弹幕

弹幕接口

danmaku.api

现成的接口

链接: https://api.prprpr.me/dplayer/

每日备份: DPlayer-data

自己搭建

DPlayer-node

bilibili 弹幕

danmaku.addition

API: https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]

const option = {
  danmaku: {
    // ...
    addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]']
  }
}

MSE 支持

HLS

需要在 DPlayer.min.js 前面加载 hls.js。

<link rel="stylesheet" href="DPlayer.min.css">
<div id="dplayer"></div>
<script src="hls.min.js"></script>
<script src="DPlayer.min.js"></script>

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

// 另一种方式，使用 customType
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);
      }
    }
  }
});

MPEG DASH

需要在 DPlayer.min.js 前面加载 dash.js。

<link rel="stylesheet" href="DPlayer.min.css">
<div id="dplayer"></div>
<script src="dash.min.js"></script>
<script src="DPlayer.min.js"></script>

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

// 另一种方式，使用 customType
const dp = new DPlayer({
  container: document.getElementById('dplayer'),
  video: {
    url: 'demo.mpd',
    type: 'customDash',
    customType: {
      'customDash': function (video, player) {
        dashjs.MediaPlayer().create().initialize(video, video.src, false);
      }
    }
  }
});

FLV

需要在 DPlayer.min.js 前面加载 flv.js。

<link rel="stylesheet" href="DPlayer.min.css">
<div id="dplayer"></div>
<script src="flv.min.js"></script>
<script src="DPlayer.min.js"></script>

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

// 另一种方式，使用 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();
      }
    }
  }
});

WebTorrent

需要在 DPlayer.min.js 前面加载 webtorrent。

<link rel="stylesheet" href="DPlayer.min.css">
<div id="dplayer"></div>
<script src="webtorrent.min.js"></script>
<script src="DPlayer.min.js"></script>

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

// 另一种方式，使用 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');
          });
        });
      }
    }
  }
});

配合其他 MSE 库使用

DPlayer 可以通过 customType 参数与任何 MSE 库一起使用

<link rel="stylesheet" href="DPlayer.min.css">
<div id="dplayer"></div>
<script src="pearplayer.js"></script>
<script src="DPlayer.min.js"></script>

const dp = new DPlayer({
  container: document.getElementById('dplayer'),
  video: {
    url: 'https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4',
    type: 'pearplayer',
    customType: {
      'pearplayer': function (video, player) {
        new PearPlayer(video, {
          src: video.src,
          autoplay: player.options.autoplay
        });
      }
    }
  }
});

直播

你可以把 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 danamku via WebSocket', danmakuData);
      callback();
    }
  },
  video: {
    url: 'demo.m3u8',
    type: 'hls'
  }
});

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

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

CDN

常见问题

为什么播放器不能全屏？

如果播放器被包含在 iframe 里，尝试在 iframe 上添加 allowfullscreen 属性。

为了完善的浏览器兼容性，它应该是这样：

<iframe src="example.com"
    allowfullscreen="allowfullscreen"
    mozallowfullscreen="mozallowfullscreen"
    msallowfullscreen="msallowfullscreen"
    oallowfullscreen="oallowfullscreen"
    webkitallowfullscreen="webkitallowfullscreen"></iframe>

为什么播放器不能在手机上自动播放？

大多数移动端浏览器禁止了视频自动播放。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

创建 Docker Swarm 集群

重建 CentOS 或 RHEL 上被损坏的 RPM 数据库

如何退出无响应的 ssh 会话

Maven 中 optional 关键字

jQuery.pjax.js 使用 AJAX 和 pushState 无刷新加载网页

Koa 基于 Node.js 平台的下一代 Web 开发框架

React.js 最佳实践 2016

用 Python 预测今后的北京高考人数

上一篇： Croppic 基于 jQuery 免费开源图片裁切插件

下一篇： At.js 实现监听输入框关键字实现自动完成仿微博@功能插件

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

JSmiles 回复 yangchin9 2021-03-15 16:53:22

我去官方 github（https://github.com/DIYgod/DPlayer）地址下载了 demo 查看，发现 css 样式是动态生成的，文章的内容有误，给您造成的困扰十分抱歉，现奉上 demo 示例：https://www.wenjiangs.com/wp-content/uploads/2021/03/dplayer-demo.zip

回复收藏 0