最近研读了 B 站大佬 diygod 为宫园薰创造的 DPlayer，最开始是从第一次提交开始一次提交一次提交地读的，后来，在获得了一定的信息后开始读最新版本。
首先，如果要写一个播放器，我们需要考虑以下步骤
UI 界面 交互
关于 UI 美+爽 胜过千言万语。一个受欢迎的播放器，必须要长得漂亮，用的舒服。这也是为什么 B 站动漫这么少我还是喜欢在上面看动漫的原因之一。
video 标签自带的样式，可能不太理想。没有弹幕、截图、播放速度、自定义热键、特定用户习惯设定等功能，并且操作体验稍微有些抠脚。
而自己写样式和交互，便可以拥有想要的动画、更便捷流畅的交互体验、和脑海中的颜值。可塑性很高。尤其是自定义的 contextmenu，我个人尤其喜欢。
DPlayer 中具体的做法就是在 video 标签的同级，添加了三个容器 div。一个是放弹幕的，一个是放字幕的，一个是放一些操作时会出现的提示类元素。
自定义操作栏等则放在了 video 容器同级。许多 api 的设计，不仅仅是满足内部控件的需求，也向外提供了脚本化操作 video 更友好的编程体验。
吐槽一点，我觉得新版的弹幕输入体验并没有很早之前的版本体验好。
i18n
维护了个哈希表，映射。。。不知道是不是大家都这样做。没做过 i18n 的需求。
tooltip
这是个美丽的意外，发现了 balloon.css 这个不错的工具。
template
使用的是 art-template , 在前端进行数据渲染，其实无论是前端渲染或是后端渲染，模板都是一个可执行函数，执行时传入对应的参数对象，return 出 html 字符串。 这点让我想到了现在的 react、vue 之流，render 函数返回一个 VNode， 然后 patch，确实是思想的不同高度
弹幕
弹幕都是放在一个容器中，分 3 种类型展示：滚动弹幕、顶部弹幕、底部弹幕。ps: bili 的播放器中高级弹幕也是单独的一个容器。
danmaku.js 中的 draw 方法是绘制弹幕的方法，弹幕各弹道互不干扰，滚动速度由弹幕长度决定。
弹幕密度默认：滚动类型的互不冲突，通过弹幕右边是否离开 video 视口来选择插入到横向的哪一个弹道。也可以设置 unlimited，top 和 bottom 的弹幕就是单纯的 % 来决定位置。
添加弹幕时使用了 createDocumentFragment 来减少页面重排。使用 animationend 事件，在弹幕滚动出视口后销毁 dom。
清晰度切换
很暴力，记住之前当前播放的时间，然后改变视频地址，重新生成video标签
流文件的处理
直接利用的各个第三方依赖进行处理，比如 flvjs dashjs hlsjs webtorrent。需开发者手动引入。
最后
关于代码拆分，是按组件化的思想进行了文件分离，通过 new ClassName 的方式来创建对应的组件，拆分的非常细腻，合理。
除此之外，很多工作是为了暴露出合理的 api 供开发者使用，也许这才是 最重要的地方吧。其次就是兼容性的处理。
本次探险到此结束。第一次尝试进行所谓的总结，结果嘛，233。
在看到陌生的景色之前，一直走下去吧 – 樱岛麻衣学姐
