"Jwplayer" official Jwplayer to Watermark step

Playing the video on the front, now with the HTML5 is a good choice, but sometimes need to use strobemediaplayback, jwplayer this kind of Flash Player, jwplayer free version with a watermark, And there are some reference JS code because some network problems are not easy to download, resulting in slow loading. I used to find some cracked version from the Internet, but these two problems are not solved very well, this article through the gradual modification of jwplayer code to solve these problems.

Jwplayer is open source, but depending on the function, some are charged. Its official website is http://www.jwplayer.com/.

Here is a list of its prices:

0 yuan, non-commercial	Core player, with watermark (logo), support HTML5 and Flash, permanent free.
149 USD/year	Basic Business Edition, including Skins, trademarks, sharing and basic analytics statistics.
299 USD/year	Media Edition for video-based site use, including skins, branding, sharing, Apple HLS streaming, video recommendations, advanced analytics.
Custom	Enterprise Edition, including video advertising commercialization, integrated video sharing, built-in Google TV Stick, in the product transfer sales Jwplayer.

Using the free version, the default upper right corner will have a logo:

The official version of the main existence of two problems, the first is a watermark, the second is its JS will go to request the other two JS file, because GFW relationship, sometimes its attempt to load will affect the video playback

Just used to find a watermark on the Internet version, but each time in the play, the upper right corner always has a load failure diagram, I did not go to find, simply own in the official version of the revision.

I downloaded the official version of 6.12.

1. Watermark Problem

Based on the Web request record on the Chrome console, you can find this logo as a request for this resource (a little longer, I'm stuck here too):

data:image/png;base64,ivborw0kggoaaaansuheugaaahoaaaaycamaaackjd/ Xaaacnvbmveuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaajcqksehiaaaaaghoa aaaiiiirkysaaaaxmteaaaa4odg+ Pj4aaabereqaaabjsukaaabotk5tu1nxv1dcxfxiymjmzmzqamptbw1xcxf0dhr3d3d9fx2agichh4ekioqmjiyojo6qkjcskpkuljswlpaymjidnz2enp6io qkjo6olpawmpqanp6epqamqqqqurq6vr6+wslcxsbg0tls1tbw2tra3t7e6urq7u7u8vly9vb2+vr6/v7/ awmdcwslfxcxfxcxhx8fiymjjycnkysrnzc3ozs7ozs7pz8/pz8/ q0ndr0dhr0dhs0tlu1ntv1dxw1tbw1tbw1tbx19fx19fa2trb29vb29vc3nzc3nzf39/f39/f39/f39/g4odh4ehj4+pj4+ pk5otk5otk5otk5otl5exn5+fn5+fn5+fn5+fn5+fo6ojo6ojq6urq6urq6urr6+vr6+vr6+vt7e3t7e3t7e3t7e3u7u7u7u7v7+/v7+/ w8pdw8pdw8pdw8pdy8vly8vly8vly8vly8vly8vly8vly8vl09pt09pt09pt09pt09pt09pt09pt29vb29vb29vb29vb29vb29vb29vb29vb39/ F39/f39/f39/f39/f4+pj4+pj4+pj5+fn5+fn5+fn5+fn5+fn5+fn5+fn6+vr6+vr6+vr6+vr6+vr6+vr8/pz8/pz8/pz8/pz8/pz8/pz9/f39 /f39/f39/f39/f39/f39/f39/f39/f3+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7// 9kpi5jaaaa33rstlmaaqidbaugbwgjcgsmdq4pebesexqvfhywfxcygbgzgroaghsbhbwdhr4ehx8gisiiiyqmjicoksoqkywtli4umdeymj m0ntu2njc5ojo7ozw9pj5aqujcq0zgselksktmtu5puffrulrvvlzxwfpbxv5ex2bhymvmz2hpamtsbw5vchfyc3r2d3h5enx9fn+ bgokdhiwgiymki4ynjo+qkzktljwwl5eymzqbnj2enp+goakkpaamp6ipqqusra6vslkzs7w2t7i5uru8vb6/wmhcwspexcbhymnjysvmvk8y+ Qaab5fjrefuenrfmp2f3eqdx8kmm2yy2wqzmzkjl3bj2rb12mtp8sikibuuxvkfvisiihv62ckciok0uvvk1bp07mitbevjuvso0duw1xo9et0f6jn47bv3u9 +/xe83kyzr0+vll7t8xq9ubplpvhfm+7i54p+uvkbp2gwdfpgnytfa+ Ntalpycxzz1rsm0tsvgv5xse0wwu1joxdylule0dkttslcqfovmq1wzohxatcadsgxqbcsunwdxnbzmlq51wlsuz0lmoctwclzffa1ghlubruwbdq396kavk5 s6hofdlb8fulonb66rlgnd5s8bwkknovmsfew3xioj97hmox2updp5kml7jglp/ec8yzbkntwdmcnwa7tpturkwlrliw2gtc+ 0tdnhvdmau1hj19plyncp0lgkijp/hjteei5v8sjj4pz2mtp1rb7pf5c5jbvcn0cuha7jpe5wx9oeu6us8yltuh8grfqc+ qzkwukvvdtjxuwo0z5nk2tnkwndzgled+4tdnwrkppbi20ytvywk+lrqlppchk3vivm1zccdd7jt8fugmynoelpjzkw+ 1vqysjjyc72zkbwsoqqhpn+99r/rn99wddlbjvihzbjirkwtjdkzparbhta2jfg7ldkv1id9awaz5ctztd0pvb2aypb9xypktauxec7bkkjea1dhyjtu+xbfgy/riakp2lysm28rajmatfts6c4xp9g0gycuqkpedglegzpl3mqtl6owcdl9eirool20/ u6zyzgvjzpev6l7dhl18vp1/n8v1r1vqonszih1npkkmdbchbaiprheygfl65tzmxazguyxdol8bcyqlhrb0w/ m3wy412yrtud7skefikzibq8dbhhewgsjklb7gws54wxwcoorqyq+qyhfga9viyxnfckq2vte3k3wtb1talx+fvcntryxnu4yq/ 8wey9m7pvkvjhsesaam5srrrwh0ybhml14zv7prz62+lad/jwe0vhinu6ougxyc0mt5gilw/+6blv8eo4ty8b6t3qvbszonuy+ hjgfaiumelfhq6rrae4jzgvwxcfplx69yzdz1ciorb03ayed52vr0x6/zokhbxs+p5o7oc3kfrkxforv392d+nwfaeaxvk652cw+ xtao9cs5ar0vkcfy9brgnrfmvn0soh+gpfwtgn8l7km6pci2fsrjutm7kc0kxlf2xchd/1xwxxvmv1qlb9/5cjobdikixklcmi4shj5ej/ qotsqu6/bbc4jn6boqsan71doi1mnm+b0rjlavgabo/gz2v/ll8frsehkkfzzyiouoqxf31jz3de7kq5db6jp1a+ vsuqnoxrroujpn2xogumjpwcebfhdv4qeadk1qwqdohkmqdayyyk6hohr3tmd4/uli/ ddbnfxhk1tdbdanrhodu7kdztw16lr6ncchzgxhnt3jao/rrsu8pptex+ jpyj4npagkxsg16fowp1xp5bu8uwdyxsxjxryj0zectsegdsm4qslbbwchf3l+ff5hhbscndh1lesagwvmodntl7chvruniblxikjr6bq+9+ R9rzko7cbadwcdzbrodaq/jgdqhmlmytsr8jkpwl9aaoxf9bddhsb9t5ev/rkk6n398sidj3x5zfdzi1bdpxdhnwwwcochs27funer+eoyti0rcyklim20vpzyoobeh4ljsz/hynarpgrstwg9tpzlz5xhyosdlzykdeklseyl08cg0w9ew+ u4b1ezzmty7j13pxceheg0mrpjlh8ylij/mytfqifvqvntaez/ cmrfwhhpjc7apzh0csap5arokppwxyioejkaonm7uiiofkkrjejveaguhzhuy1shb3vh1tcxys0ovgtal+/imubqolmxykfa6u8i+ i0pqwyeca3amyvemphczxedbubokwcshsatfnudyzndinclqld8ctygqhscjexjnpvof9rssrztt3ub3f2s0dku35myiy6z6lyjbmdx+ hvo7pd11/egbtcvh7mfvs+p70rl8l0yu8r7wroyxb5b77dxemv+i7l82wmxoey53u9+/ k8he1zvbq4egqfh1sna0keo5tzvcxwxs7kluuwizjrmsrhtsb95f4b50jwztgurthywsbjvgphtiuifeb9kn4pjzhxuohmlxpi3ug/ 5qh6bjs1uwprrdlnku3ywpnw4rkvssqfpklq3k3bizxmvfha+njqqxqlhyxka9egfjgvqkcrqd2zlojrql7qgq4vw9dkfn0ahp73b+ln3hpqy/ xkjeo1cc2p6t49uop/fd+r5qphsbvaslttqb8yzr1os7/5ry0p8vdnozk6t8pnzpdw4bb9zwpq2nptlhxf/a5ypuapt+0/ mp2uqy5nlkaklyzycuokcp13u9mwxxasol4staapyyprn1p5cvkr1nd5pxz9jqdpu1pvbii3yklqmr2u/ ltdur9fngelp0nqwdsmirptolrwjdxoiqrp9yr8xgitk3xyxf2efuw3+ju5arjl1yu+f+lmm1eiexc6/lk0quwpyhkd3xt+usfoxhd2wkpo6w/ To3buo8h/bb7rwub6w7b7aaaaaelftksuqmcc

For this URL, I can only say is breathtaking. This request process is triggered in the jwplayer.html5.js, in this JS file can find the URL, I in its request for the other images, found a transparent picture, replaced here, it is possible, that is to say I did not try to delete the diagram, but instead of a transparent:

Switch

A.defaults.file= "Data:image/png;base64, IVBORW0KGGOAAAANSUHEUGAAAAQAAAAGCAYAAAA1ZNLEAAAAD0LEQVQOU2NGGAWJADCAAAIGAAEEEYATAAAAAELFTKSUQMCC "

2. Network requests to p.jwpcdn.com

Jwplayer will request Http://p.jwpcdn.com/6/12/jwpsrv.js in Jwplayer.js and will request http://p.jwpcdn.com/6/jwpsrv_ in Jwpsrv.js Frq.js, and this jwpcdn is sometimes inaccessible, but the browser will always try to access, in a certain time to access, I first downloaded the two files to the local (in fact, do not download it can also, these two files are mainly statistical analysis, the p.jwpcdn.com to a accessible address can be, so that the Get 404 response, will not always wait), first modified in Jwplayer.js, in this file search p.jwpcdn.com, can be found:

B.repo=function () {var a= "http://p.jwpcdn.com/" +f.version.split (/\w/). Splice (0,2). Join ("/") + "/";

For the 6.12 version, you will get http://p.jwpcdn.com/6/12/this path, so I changed it to jwplayer.js under the same path jwpsrv.js:

Modified to:

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);}};

According to this code can also be seen, this requires the current JS file must be called Jwplayer.js, cannot be renamed.

The same method of searching for p.jwpcdn.com in Jwpsrv.js can be found:

H= "http" + ("https:" ===document.location.protocol? ") S://ssl. ":"://") +" P.jwpcdn.com/6/jwpsrv_frq.js "

In the same way, by adding this code at the top of these variable definitions to prevent variable name collisions, I changed a to 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);}};

The definition of the H variable is then modified to:

h=path+ "/jwpsrv_frq.js"

Modified after the jwplayer source download.

Jwplayer's API

Http://support.jwplayer.com/customer/portal/topics/564475-javascript-api/articles, here are a series of documents and demos, here is a detailed list of APIs:

Http://support.jwplayer.com/customer/portal/articles/1413089-javascript-api-reference.

For a few examples, it is easy to understand how to call:

var player = jwplayer (' container '). Setup ();

Get the length of the video:

Player.getduration ();

Get Video Status:

Player.getstate ();

Navigate to the first few seconds:

Player.seek (second);

Video playback:

Player.play (TRUE);

Video pause:

Player.play (FALSE);

Video stop:

Player.stop ();

Add time for video, callback when time changes:

Player.ontime (function (e) {...});

Here is an unresolved issue, after the event has been added I did not find a way to clear, if you reset an empty OnTime, also just overlay, do not replace the original, do not know whether the subsequent version will be repaired.

For the front-end Flash player, there is also a strobemediaplayback can be used, here also incidentally, this is a pure open source implementation, not like the Jwplayer default watermark, the interface is relatively good-looking, supported by Adobe. Its in: http://sourceforge.net/projects/smp.adobe/files/, the newest 1.6.328, which had been for many years never renewed. After the decompression can be found in the corresponding flash version of the directory to find a large number of demo. But I didn't find the official documentation for it. There is a document that is not of much use and can be consulted: http://sourceforge.net/adobe/smp/wiki/JavaScript%20API/.

"Jwplayer" official Jwplayer to Watermark step