Tommy 碎碎念

Tommy Wu's blog

« 上一篇 | 下一篇 »

將 Gallery 2 用來播放影片的方式改用 JW Player 來播放
post by tommy @ 14 十二月, 2011 10:29

Gallery 2 裡頭, 原本播放影片的方式是使用 QuickTime plugin 來處理. 不過... 這個 plugin 並非所有的使用者都有裝, 所以... 我們可以改用 JW Player 來處理.

首先, 當然是去 JW Player 的網站抓最新的版本, 然後把裡頭的 jwplayer.js 與 player.swf 放到 Gallery2 的 lib 目錄下頭, 然後修改 modules/core/classes/GalleryMovieItem.class 這個檔案, 在 function render() 裡頭對 video/quicktime (雖然 Gallery 2 也有 video/mp4 的 mime_type, 不過... 我傳上去的 .mp4 檔案都還是被認為是 video/quicktime) 的處理加上對 mp4/flv 的檔案檢查並轉用 JW Player 使用:

      switch ($this->getMimeType()) {
case 'video/mp4':
case 'video/flv':
case 'video/x-flv':
case 'video/quicktime':
if (in_array(strtolower(substr($this->getPathComponent(), -4)), array(".mp4", ".flv")))
return sprintf(
"<script type=\"text/javascript\" src=\"%s\"></script>
<div id=\"movie-item-%d\">%s</div>
<!-- type => %s -->
<script type=\"text/javascript\">
jwplayer(\"movie-item-%d\").setup(
{
'height': '%d',
'width': '%d',
'file': '%s',
'title': '%s',
'autostart': 'true',
'bufferlength': '10',
'controlbar': 'bottom',
'display.showmute': 'true',
'stretching': 'uniform',
'wmode': 'transparent',
'modes': [
{ 'type': 'flash', 'src': '%s' },
{ 'type': 'html5' },
{ 'type': 'download' }
]
});
</script>"
,
$urlGenerator->makeAbsoluteUrl('lib/jwplayer.js'), $this->getId(), $fallback,
$this->getMimeType(), $this->getId(), $height+20, $width,
$src, htmlspecialchars($this->getTitle()), $urlGenerator->makeAbsoluteUrl('lib/player.swf'));
 
return sprintf(
'<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="%s" height="%s" id="%s"%s>
<param name="src" value="%s"/>
<param name="controller" value="true"/>
<param name="autoplay" value="true"/>
<param name="loop" value="false"/>
<embed src="%s" width="%s" height="%s" type="%s"
pluginspage="http://www.apple.com/quicktime/download/"
controller="true" autoplay="true" loop="false"/>
<noembed>%s</noembed>
</object>'
,
 
$width, $height + 16,
!empty($params['id']) ? $params['id'] : 'movie',
!empty($params['class']) ? ' class="' . $params['class'] . '"' : '',
$src, $src,
$width, $height + 16,
$this->getMimeType(),
$fallback);

注意一下, 那個 video/mp4 的 case, 在原本後頭也有, 要記得把它拿掉. 這樣子改就會對 mp4/flv

改成這樣子的好處應該有:

  • 一般的 browser 只要有 flash 的支援就可以看, 不需要有 QuickTime plugin (當然, 還是有些格式仍使用這個) 了.
  • 如果沒有 flash, 只要有支援 HTML5 的 video tag, 在載入 JW Player 時, 會改寫成 video tag 來處理, 一樣可以看.
  • 其他非 .mp4/.flv 的格式, 一樣可以用 QuickTime plugin 來處理.
  • browser 對畫面的縮放處理變正常. (原本 QuickTime 的畫面, 影片大小並不會跟著 browser 一起縮放)

不過, 也可能會有其它的問題:

  • 只支援 h.264 格式的 MP4, 其他的會無法播放. (其實就算是 h.264, 我也碰過有聲音沒畫面或有畫面沒聲音的情形, 不過... 這類的檔案再轉一次似乎又正常), 所以如果你有非 h.264 的 .MP4 檔案, 反而會不能看.

對我來說, 目前看起來是好處多於壞處, 所以就這樣子改來用了.


另外, JW Player 另外有個 Sliverlight 的版本, 可以用來播放 .asf 與 .wmv 的檔案. 同樣, 下載之後, 把 silverlight.js wmvplayer.js wmvplayer.xaml 放到 Gallery 2 的 lib 目錄下面, 然後, 同樣在 modules/core/classes/GalleryMovieItem.class 裡頭加上這面的程式:

      case 'video/x-ms-wmv':
$classId = 'CLSID:05589FA1-C356-11CE-BF01-00AA0055595A';
case 'video/x-ms-asf':
case 'video/x-ms-asx':
if (in_array(strtolower(substr($this->getPathComponent(), -4)), array(".asf", ".wmv")))
return sprintf(
"<script type=\"text/javascript\" src=\"%s\"></script>
<script type=\"text/javascript\" src=\"%s\"></script>
<div id=\"movie-item-%d\">%s</div>
<!-- type => %s -->
<script type=\"text/javascript\">
var elm = document.getElementById(\"%s\");
var src = '%s';
var cfg = {
file:'%s',
width:'%d',
height:'%d',
windowless: 'true',
autostart: 'true'
};
var ply = new jeroenwijering.Player(elm,src,cfg);
</script>"
,
$urlGenerator->makeAbsoluteUrl('lib/silverlight.js'), $urlGenerator->makeAbsoluteUrl('lib/wmvplayer.js'), $this->getId(), $fallback,
$this->getMimeType(), $this->getId(), $urlGenerator->makeAbsoluteUrl('lib/wmvplayer.xaml'), $src, $height+20, $width);

這樣就可以用 JW WMV Player 來放這類格式的檔案了.

Del.icio.us Furl HEMiDEMi Technorati MyShare
迴響
暱稱:
標題:
個人網頁:
電子郵件:
authimage

迴響

  

Bad Behavior 已經阻擋了 139 個過去 7 天試圖闖關的垃圾迴響與引用。
Power by LifeType. Template design by JamesHuang. Valid XHTML and CSS