一切的开端

我用 DPlayer 的时候有用户说弹幕(从右到左移动)飘的太快了，翻了几次文档都没有看到对应的设置。发了 issue 一直都没有回应(有一些中文 issue 是有回应的，所以排除是用中文发 issue 的原因)，因为想自己做一个支持大范围自定义设置的。

了解到 B 站(默认)和 DPlayer 的弹幕都是用 css 的 animation 驱使弹幕从右往左飘的，才知道原来我的 issue 的要求还是挺难实现的，毕竟 animation 的时间都是写死在 css 的。

因此我决定要用 Canvas 绘制弹幕，就可以用 js 控制弹幕的速度了(也埋下了一个坑，就是弹幕多了会卡顿)

操起键盘就是干之前，发现 DPlayer 有 tg 群，进群了解了一下群众的情况。有人说用 TypeScript 做吧，我说那行吧，顺便把 ts 学了。

所以这是我第一个 TypeScript 项目，新手上路，如果有翻车的情况希望各位大佬帮忙抢救一下。

想不出什么好名字了，那就叫 DanPlayer 吧，logo 还挺好做

DanPlayer 弹幕播放器诞生 Github 和 Demo

功能主治：

• 使用 Canvas 绘制弹幕

• 支持的自定义设置：

  • 播放器的高亮颜色
  • 播放器右下角的扩展按钮
  • 弹幕右键菜单的功能按钮
  • 普通 /直播 视频模式
  • 开 /关 全屏功能
  • 开 /关 底部控制栏中间的发弹幕功能区域
  • 显示 /隐藏 全部弹幕
  • 弹幕的全局透明度
  • 弹幕的全局字体大小
  • 流动式弹幕的移动速度(从右到左移动的弹幕)
  • 固定式弹幕的隐藏时间(固定在视频顶部和底部的弹幕)
  • 限制弹幕的显示区域，效果接近 B 站的相关设置

• 支持的视频格式：

  • 优先检测浏览器能否原生支持播放，例如 mp4 视频文件，mp3 音频文件
  • 当浏览器不支持 HLS 视频，则使用hls.js
  • 当浏览器不支持 MPD 视频，则使用dash.js

Demo 的功能非常齐全，上面提到的大部分自定义设置都做了对应的功能，放出截图

Demo 的弹幕右键菜单也添加了自定义按钮，这里单独放一个截图

复制按钮是默认自带的，举报那个按钮就是自定义的功能按钮

npm 上的 danplayer 包如果翻车了请发 issue