在前端播放視頻，現在用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/。