在前端播放视频,现在用html5的video标签已经是一个不错的选择,不过有时候还是需要用StrobeMediaPlayback、JWPlayer这一类的flash播放器,JWPlayer的免费版本带有一个水印,并且有一些引用的js代码因为某些网络问题不容易下载到,从而导致加载很慢。 以前我也从网上找到过一些破解版,不过这两个问题解决的都不是很好,本文就通过逐步修改JWPlayer的代码来解决这些问题。
JWPlayer是开源的,但是根据功能的不同,有一些是收费的。它的官方网站是http://www.jwplayer.com/。
下面是它的价格表:
0元,非商用 |
核心播放器,有水印(logo),支持HTML5和Flash,永久免费。 |
149美元/年 |
基础商业版,包括皮肤、商标、分享和基础分析统计。 |
299美元/年 |
媒体版,为基于视频的站点使用,包括皮肤、商标、分享、Apple HLS streaming、视频推荐、高级分析。 |
定制 |
企业版,包括视频广告商业化、整合视频分享、内置的google电视棒、在产品中转售JWPlayer。 |
使用免费版,默认右上角会有logo:
使用官方版本主要存在两个问题,第一是有水印,第二是它的js会去请求另外俩个js文件,因为GFW的关系,有时候它的尝试加载会影响视频的播放
刚用的时候在网上找了一个去水印的版本,但是每次在播放的时候,右上角总是有一个加载失败的图,我也没有再去找,干脆自己在官方版本上修改。
我下载的官方的6.12版。
1. 水印问题
根据chrome控制台上的网络请求记录,可以找到这个logo是请求了这个资源(略长,我也都粘在这儿了):
data:image/png;base64,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
对于这个URL,我只能说是叹为观止。这个请求过程是在jwplayer.html5.js里面触发,在这个js文件里可以找到这个URL,我在它请求的其他图片里面,找了一个透明的图片,替换到这里,就可以了,也就是说我并没有尝试去删这个图,而是换了一张透明的:
改为
a.defaults.file="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAgCAYAAAA1zNleAAAAD0lEQVQoU2NgGAWjADcAAAIgAAEeEYatAAAAAElFTkSuQmCC"
2. 对p.jwpcdn.com的网络请求
JWPlayer在jwplayer.js中会请求http://p.jwpcdn.com/6/12/jwpsrv.js,在jwpsrv.js中会请求http://p.jwpcdn.com/6/jwpsrv_frq.js,而这个jwpcdn有时候是不能访问的,但是浏览器会一直尝试访问,在某一次能访问的时候,我先把这两个文件下载到本地(其实不下载也可以,这两个文件好像主要是统计分析,把p.jwpcdn.com换成一个能够访问的地址就可以,这样能够迅速得到404回应,不会一直在等),首先在jwplayer.js中修改,在这个文件中搜索p.jwpcdn.com,可以找到:
b.repo=function(){var a="http://p.jwpcdn.com/"+f.version.split(/\W/).splice(0,2).join("/")+"/";
针对6.12版,就会得到http://p.jwpcdn.com/6/12/ 这个路径,所以我把它改为jwplayer.js同路径下的jwpsrv.js:
修改为:
b.repo=function(){
var js=document.scripts;var a="./";for(var i=js.length-1;i>=0;i--){if(js[i].src.indexOf("jwplayer.js")>-1){a=js[i].src.substring(0,js[i].src.lastIndexOf("/")+1);}};
根据这段代码也能看出来,这要求当前的js文件必须叫做jwplayer.js,不能改名。
同样的方法在jwpsrv.js中搜索p.jwpcdn.com,可以找到:
H="http"+("https:"===document.location.protocol?"s://ssl.":"://")+"p.jwpcdn.com/6/jwpsrv_frq.js"
同样的方法,在这些变量定义的最前面加上这段代码,以防变量名冲突,我把a改成了path:
var js=document.scripts;var path="./";for(var i=js.length-1;i>=0;i--){if(js[i].src.indexOf("jwplayer.js")>-1){path=js[i].src.substring(0,js[i].src.lastIndexOf("/")+1);}};
之后把H变量的定义修改为:
H=path+"/jwpsrv_frq.js"
修改之后的jwplayer源码下载。
JWPlayer的API
http://support.jwplayer.com/customer/portal/topics/564475-javascript-api/articles,这里有一系列文档和Demo,下面是详细的API列表:
http://support.jwplayer.com/customer/portal/articles/1413089-javascript-api-reference。
举几个例子便于理解调用方式:
var player = jwplayer('container').setup();
获取视频的时长:
player.getDuration();
获取视频状态:
player.getState();
定位到第几秒:
player.seek(second);
视频播放:
player.play(true);
视频暂停:
player.play(false);
视频停止:
player.stop();
为视频添加时间,当时间变化时回调:
player.onTime(function(e){......});
这里有一个未解决的问题,事件添加后我没有找到清除的方法,如果重新设置一个空的onTime,也只是叠加,不替换原有的,不知道后续版本会不会修复。
对于前端的Flash播放器,还有一个StrobeMediaPlayback可以使用,这里也顺带提一句,这是一个纯开源的实现,不像JWPlayer一样默认有水印,界面也相对比较好看,由Adobe支持。它的下载地址在:http://sourceforge.net/projects/smp.adobe/files/,最新的1.6.328,已经是好多年未曾更新了。解压之后可以在对应的Flash版本目录下找到大量的demo。但是我却没有找到它的官方文档。有一个没有太大用处的文档,可以参考:http://sourceforge.net/adobe/smp/wiki/JavaScript%20API/。