【JWPlayer】官方JWPlayer去水印步骤

在前端播放视频，现在用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/。