【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/。

时间: 2024-10-24 00:15:43

【JWPlayer】官方JWPlayer去水印步骤的相关文章

Vue.js搭建官方项目的步骤

搭建官方项目模板步骤:  1.npm install  vue-cli (安装vue-cli )  有的时候有看到其它两种写法:  --save-dev 和 --save的写法.这两个有一定的区别,我们都知道package.json  中有一个 "dependencies" 和 "devDependencies" 的.dependencies 是用在开发完上线模式的,就是有些东西你上线以后还需要依赖的,比如juqery , 我们这里的vue 和 babel-runt

jwplayer 隐藏属性方法记载

jwplayer().getPosition(): //播放了多少秒 jwplayer('playerdiv').play(); || jwplayer(0).play(true / false); //是否播放 0为索引 jwplayer(0).pause(true / false); //是否暂停 jwplayer(0).stop(); //停止无参 jwplayer().getBuffer(); //加载了百分之几 jwplayer().getFullscreen(); setFullsc

jwplayer 参数记录

jwplayer().getPosition()://播放了多少秒 jwplayer('playerdiv').play(); || jwplayer(0).play(true/false);  //是否播放 0为索引 jwplayer(0).pause (true/false);   //是否暂停 jwplayer(0).stop();   //停止无参 jwplayer().getBuffer(); //加载了百分之几 jwplayer().getFullscreen();setFullsc

JWPlayer第一个例子

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <

Support for AMD usage of jwplayer (require js)

使用require js 模块化代码时,其中播放器用的是jwplayer7.x 然后载入jwplayer.js后总是报license无效(license已经加入),最后在jwplayer官网论坛里找到问题: The reason seems to be that the flash player needs access to window.jwplayer. window.jwplayer is not set when using AMD (or CommonJS), therefore t

01按照官方步骤编译NanoPiM1Plus的Android

大文实验室/大文哥 壹捌陆捌零陆捌捌陆捌贰 21504965 AT qq.com 完成时间:2017/12/6 10:58 版本:V1.0 开发板:NanoPi M1 Plus/zh SDK:Android4.4.2 1.最近考虑玩一下H3,开发板使用了nanoPi Plus. http://wiki.friendlyarm.com/wiki/index.php/NanoPi_M1_Plus/zh#.E5.87.86.E5.A4.87.E5.B7.A5.E4.BD.9C_3 NanoPi M1

2.0-apache日志切割

apache在提供服务后,在/usr/local/apache2/logs下会默认产生访问日志和错误日志access_log和error_log 尤其是访问日志,在用户访问多的情况下,会产生很多条记录.随着时间增长,可能会变成几个G或十几个G. 为了缓解这种情况,按天来切割日志,删除以前没用的日志,就成了很好的解决方法. 首先来看系统默认产生的访问日志格式: vim /usr/local/apache2/conf/httpd.conf <IfModule log_config_module>

ios 开发中 --做登陆注册时编译出现的错误和解决方法

这种问题,通常出现在添加第三方库文件或者多人开发时. 这种问题一般是找不到文件而导致的链接错误. 我们可以从如下几个方面着手排查. 1.以如下错误为例,如果是多人开发,你同步完成后发现出现如下的错误. 这个是使用CocoaPods下载的BmobSDK 实现注册时出现的错 解决方法:(图示) Undefined symbols for architecture armv7: "_OBJC_CLASS_$_MyPageLogViewController", referenced from:

出现( linker command failed with exit code 1)错误总结(http://blog.csdn.net/hengshujiyi/article/details/21182813)

这种问题,通常出现在添加第三方库文件或者多人开发时. 这种问题一般是找不到文件而导致的链接错误. 我们可以从如下几个方面着手排查. 1.以如下错误为例,如果是多人开发,你同步完成后发现出现如下的错误. [html] view plaincopy Undefined symbols for architecture armv7: "_OBJC_CLASS_$_MyPageLogViewController", referenced from: objc-class-ref in Baid