jPlayer插件使用踩过的坑

业务需要,对于好几年前的老项目进行二次开发。项目的主要技术使用jquery+require.js。
最近需要做一个可以在系统中播放录音的需求,使用了兼容ie8的jPlayer插件。
这个插件已经有很长的历史了,最新一次的版本是2015年的。。。。。
没办法还得硬着头皮上。。。

首先我们需要知道,现在大部分使用的谷歌还有火狐,ie10以上的,在页面中加载音视频的时候,都使用的html进行加载的,但是ie8以下的浏览器,在播放音视频的时候是需要依赖flash Player 的,是依赖于flash才能播放的。

第一个坑:solution:html,flash

在ie8下,必须配置 solution:html,flash 意思就是优先使用html加载,不能使用Html的就使用 flash 进行读取音视频就文件。这个属性是必须要写的,而且顺序不要变

第二个坑:jPlayer.jPlayer.swf 路径问题

在出现ie8上浏览器播放不了音频文件的时候,百度搜了很多,都说这个必须写成 和当前文件同一级目录,还有说必须写成绝对路径的(jPlayer官方文档上是这样建议的),都试了一遍,虽然我这次遇到的问题不是路径问题,但是最好写成官网建议的路径格式。这个路径是容易出现问题的很大的可能。(这个文件的用处就是在ie8下,用这个swf文件来读取音频文件的,没有这个swf文件是播放不了的。所以这个必须加上,而且注意路径一定要正确)

第三个坑:流文件在jPlayer组件上不显示整个音频总长度

这个问题,苦恼了整整两天,每天熬到12点,一直搞不明白。这个怎么解决
这里我先说一下,出现问题的解决思路。首先一点,不要慌,镇定。。。接下来依次排查问题所在,查看问题到底出在哪里(谷歌和火狐浏览器都可以正常播放,说明html是可以正确读取的,就是ie8播放不了)

  • 查看是否是当前的电脑上没有装flash player,我把它重新卸载又安装一次。结果不是这个问题(因为我们读取文件是使用项目中的swf文件去解析的,不能依赖用户去装flash player这个软件)
  • 查看是否声明了swf文件,并且路径是否正确。排除
  • 百度搜索收集问题,并一一测试。发现并没有用
  • 翻官方文档。全英文,虽然看不下去,但是静下心来看,有很多意想不到的收获,会帮助你进一步理解这个插件的执行原理(没解决)
  • 对比正常的请求头和响应头,一个一个的比对分析,发现谷歌浏览器器中在请求同一个音频文件的时候,谷歌中有三个字节但是ie8中却没有这几个字节,这几个字节分别是 Range (请求头中), content-Length,content-Range (响应头中)
ie8: 可以看到响应头中有Content-Length:0.就是因为为0,所以进度条才拖动不了!! 响应头中也没有content-Range 这个字节

jPlayer插件使用踩过的坑_第1张图片

谷歌:可以看到同样请求流文件,却有这个三个字节

jPlayer插件使用踩过的坑_第2张图片

终于解决

后端在返回响应头的时候,加上了 Accept-Ranges:bytes;Content-Length:当前文件流的字节;Content-Range:bytes 0-当前文件流的字节
jPlayer插件使用踩过的坑_第3张图片
虽然并不是 在请求头中加了 Range,而是在响应头中加了 Accept-Range,没有太懂什么意思,但是却能拖动进度条了。

最后说一点,自己把自己蠢哭的bug。

自己埋的坑,哭着也要自己爬出来。。。。

当时在测试文件的时候,因为要可能播放好几个音频文件。我就不想自己去每一种音频下载一个了,是偷懒下载了一个mp3和一个m4a文件,然后我把这个m4a文件,直接在本地把后缀名改成了.mp3(我也不知道我当时改了哪个文件,当时想的是,我先测试一下,能不能播放,不能播放就再使用格式工厂把音频换成另外一种),改完之后,直接在谷歌上测试了一个,可以播放没问题,然后就把它忘了。。。。最后在ie8上死活就是不出来,就是因为ie8对于音频的频率等比较严格(我猜的),就是识别不出来,播放不了。看了jPlayer官网文档,发现里面有这一条对于音频的频率有要求,才想起来我之前的蠢操作。。。。。(同时我再次换了一个原本的音频ie8上就可以播放了)

总结一下,就是在对于插件的原理不了解的时候,改起来真的很难,完全就是黑盒子,所以最快速和正确的还是要阅读官方文档,百度上搜出来的可能每个人遇到的情况不一样。遇到问题,冷静的一点点的去分析,去排查。自己在另外一个环境上写一个测试demo,才能一点一点的定位问题。还有自己在操作什么东西的时候,必要的自己要主动记录下来,别自己给自己挖坑。

你可能感兴趣的:(jPlayer插件使用踩过的坑)