本文是写下来分享在公司内部的一篇,发在这里备忘充数哈哈哈。正文如下:
从接手法律学校音视频业务以来,走了不少坑,将一些主要的总结一下。
一是技术选型。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