本文是写下来分享在公司内部的一篇，发在这里备忘充数哈哈哈。正文如下：

从接手法律学校音视频业务以来，走了不少坑，将一些主要的总结一下。

一是技术选型。HTML5自带有很好的自媒体支持，例如用于媒介回放的 video 和 audio 元素，但其中一大不足是样式无法修改。这对拥有良好UI设计，具有强烈风格的法律学校而言，无疑是无法满足需求的，所以有必要寻找轮子，以达成自定义样式要求。

开始选择了Video.js插件，这款插件有很多成功的应用，但最后基于一些原因也没有选择。一是文档，虽详细但无中文，且api分类不明晰，对初次接触的人——没错就是我，在api中翻找很费劲。二是手动销毁播放器时会连带销毁对应的DOM，这给当时的功能实现带来较大的麻烦。三是语法相对啰嗦，就不展开了。

后来自己在网上搜索，发现了一个宝贝。就是DPlayer插件，点击跳转其github地址。

学习强国，嘀哩嘀哩，小红书等应用证明它是比较稳定的，且中英文文档均非常友好，对视频格式的支持也很多样，对新手友好等等优点让在下迫不及待与卜同学分享，并最终选择了它。对了，由同一作者开发的APlayer插件是一款音频插件，此处也是真香警告。

选型完成，接下来就是实现功能。很多与怪兽搏斗的经历都忘了，除了它，currentTime。有很多bug都指向了这个问题，即拖动进度条会产生一系列诡异效果。开始不清楚什么原因，想着通过手动设置媒体的currentTime尝试解决，并不如意，就搜了搜，才发现问题所在：Chrome浏览器不支持音视频媒体的currentTime属性，这直接导致了进度条失效，在每次拖动后都重置为0。找到问题就解决问题的一半了，哈哈哈，我果然是个哲学家。

经过不断尝试和搜索，确定了这是和response headers有关的一个问题，对Chrome来说，Content-Type:application/octet-stream,Content-Length 与 Accept-Ranges必须有才可以更改currentTime，使进度条生效。

Firefox浏览器支持currentTime。（ps:火狐真得也是个极好的浏览器）

工欲善其事，必先利其器。事实证明找对好的轮子是多么重要。

内事不决问百度，外事不决问谷歌。这是一首曾经流传于大街小巷的儿歌，然而，时移事易，推荐多用谷歌搜索。我真得很好.jpg