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

原创文章 66获赞 4访问量 5210 关注 私信 展开阅读全文
作者：想要成仙的菜鸟前端

jplayer