編譯 JW Player
依照 jwplayer 的授權,只要是用於非商業用途,即可自由使用、更改、和散布該程式。
「The use of the JW Player Open Source edition is governed by a Creative Commons license. You can use, modify, copy, and distribute this edition as long as it’s for non-commercial use, you provide attribution, and share under a similar license.」
因而此文之主要目的為討論如何修改與編譯 jwplayer,尤其是,大家應該是最想把那個大大的 logo (浮水印) 換成自己的,當然,只能用於非商業用途。
編譯說明
jwplayer 的原始碼可以在此下載 https://github.com/jwplayer/jwplayer,以下為該網頁之編譯說明。在此,所使用的環境是 Linux,假如是使用 Windows,一些細節請自行瞭解。
要自行編譯 JW Player,必須具備下述軟體:
- Flex SDK 4.1: http://sourceforge.net/adobe/flexsdk/wiki/Downloads/
- Ant 1.7.0: http://ant.apache.org/bindownload.cgi
Flex 和 Ant 都會用到 Java,因此必須先安裝 JDK,不能只裝 JRE,會缺 tools.jar。此外,還會用到 python,這在 Linux 的環境下,一般都有,若是在 Windows 的環境下,只能請自行安裝了。
Flex SDK 4.1 有 Adobe Flex SDK 和 Open Source Flex SDK 兩個版本,下載 Open Source Flex SDK 的版本即可。
要使用 Flex and Ant 來編譯,必須修改 build
目錄下的 build.properties
檔案:
- 將
flexsdk
設定為安裝 Flex SDK 的位置,例如/opt/flex_dsk_4.1.0
。 - 假如是用 Windows 的話,將
execextension
設為.exe
; 在Linux 下,則保持為空白。
使用 Ant 來編譯播放器的指令如下:
ant -buildfile build/build.xml
If the build is successful, 新編譯好的播放器檔案 (jwplayer.js
, jwplayer.html5.js
, jwplayer.flash.swf
) 會放在 bin-release
的目錄下。假如前面的編譯過程都沒問題,可以產生可執行的播放程式,接著就可以試著改 logo 了。
Logo 修改
logo 的圖形,並非是嵌進程式中,而是在執行時,才由網站取得並嵌進去的。
jwplayer.js 會到下面連結找 logo,例如
版本 6.4 的 logo 為 https://ssl.p.jwpcdn.com/6/4/logo.png 或 http://p.jwpcdn.com/6/4/logo.png
版本 6.12 的 logo 為 https://ssl.p.jwpcdn.com/6/12/logo.png 或 http://p.jwpcdn.com/6/12/logo.png
其中,前面的是經 https 的網址,後者則是一般未加密的 http 的網址。因此,要改成自己的 logo,就是找到連結,改成指向自訂的 logo 即可。
加嵌 logo 的程式為
- flash:
src\flash\com\longtailvideo\jwplayer\view\components\LogoComponent.as
- HTML5:
src\js\utils\jwplayer.utils.js
以及src\js\html5\jwplayer.html5.logo.js
若只是要讓 logo 消失,只要將相關的程式註解掉即可。
logo: 84*20*24 (v 6.4) 122*50*8 (v 6.12)
例如,針對 6.12 的版本,要將 logo 指向 http://abc.net/img/6/12/mylogo.png
。注意,版本要互相對應。
對 LogoComponent.as
的修改如下
protected var defaults:Object = {
// prefix: "http://p.jwpcdn.com/",
prefix: "http://abc.net/img/",
file: "mylogo.png", // "logo.png",
link: 'http://www.longtailvideo.com/jwpabout/?a=l&v='+PlayerVersion.version+'&m=f&e=o',
linktarget: "_top",
margin: 8,
hide: false,
position: "top-right"
}
對 jwplayer.utils.js
的修改如下
utils.repo = function() {
// var repo = 'http://p.jwpcdn.com/' + jwplayer.version.split(/\W/).splice(0, 2).join('/') + '/';
var repo = 'http://abc.net/img/' + jwplayer.version.split(/\W/).splice(0, 2).join('/') + '/';
try {
if (utils.isHTTPS()) {
repo = repo.replace('http://', 'https://ssl.');
}
} catch (e) {}
return repo;
};
對 jwplayer.html5.logo.js
的修改如下
logo.defaults = {
prefix: utils.repo(),
// file: 'logo.png',
file: 'mylogo.png',
linktarget: '_top',
margin: 8,
hide: false,
position: 'top-right'
};