編譯 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'
};