Blog

Gallery2 with JW Player

I use Gallery to post and organize photos and media on this site. Gallery can also display flash videos, but I was never happy with the flash player that is installed by default with the Gallery software.

Instead, I wanted to use the very popular JW Player and searched far and wide on the Internet for instructions on how to replace the default player. Despite the power of Google, it took some time, but I finally found a solution through Krunk4Ever!’s blog, for which I am immensely grateful.

However, with the latest releases of the Gallery software, those instructions no longer worked for me. Again, a long search ensued, but to no avail.

Though I am not a programmer, I know enough to break stuff often, and fix stuff sometimes. After a lot of breaking, I finally fixed it!

So here now I share with you the changes I made to my Gallery flash module in order to use JW Player to display flash videos. I should point out that these changes are in addition to the changes applied by Krunk4Ever!

All of the changes outlined here were made in the FlashVideoRenderer.class file found in modules/flashvideo/classes within the Gallery folder.

Before:
array(‘href’ => ‘modules/flashvideo/lib/G2flv.swf’),
array(‘forceFullUrl’ => true));
$flashVars = ‘flvUrl=’ . urlencode($src) . ‘&Width=’ . $width . ‘&Height=’ . $height

After:
array(‘href’ => ‘modules/flashvideo/lib/player-viral.swf’),
array(‘forceFullUrl’ => true));
$flashVars = ‘type=video&file=’ . urlencode($src) . ‘&Width=’ . $width . ‘&Height=’ . $height

Before:
array(‘forceFullUrl’ => true, ‘forceSessionId’ => true, ‘htmlEntities’ => false));
$flashVars .= ‘&thumbUrl=’ . urlencode($thumbUrl);

After:
array(‘forceFullUrl’ => true, ‘forceSessionId’ => true, ‘htmlEntities’ => false));
$flashVars .= ‘&image=’ . urlencode($thumbUrl);

Before:
</script>
<div id=”flashvideo” style=”align:left;width:496px;height:250px”>
<div id=”soContent” style=”width: 100%%; height: 100%%”>%s</div>
</div>
<script type=”text/javascript”>

After:
</script>
<div id=”soContent” style=”width: 100%%; height: 100%%”>%s</div>
<script type=”text/javascript”>

Before:
var so = new SWFObject(“%s”, “%s”, “100%%”, “100%%”, “9.0.28.0″, “ffffff”);

After:
var so = new SWFObject(“%s”, “%s”, “%s”, “%s”, “9.0.28.0″, “ffffff”);

In this last change I added 20 pixels to the default height of the player so that the player navigation wouldn’t cover the video.

Before:
$SWFObjectUrl, $jsWarning, $playerUrl,
!empty($params['id']) ? $params['id'] : ‘movie’, $flashVars, $expressInstallUrl);

After:
$SWFObjectUrl, $jsWarning, $playerUrl,
!empty($params['id']) ? $params['id'] : ‘movie’, $width, $height+20, $flashVars, $expressInstallUrl);

So that’s what I did and it seems to be working. I hope that helps someone else out there to accomplish the same goal.