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 这个字节

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

终于解决

后端在返回响应头的时候，加上了 Accept-Ranges:bytes;Content-Length:当前文件流的字节；Content-Range:bytes 0-当前文件流的字节

虽然并不是 在请求头中加了 Range,而是在响应头中加了 Accept-Range，没有太懂什么意思，但是却能拖动进度条了。

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

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

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

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