Updated Gallery2 to Use JW FLV Media Player

So this little exercise started with the fact I was introduced to the JW FLV Media Player a few weeks back. Today, I wanted to share an flash video and thought it would be a good time to hack Gallery2 to use this flv video player.

If you’ve seen flash videos in my Gallery before, you’ve noticed it was using the default G2flv (Gallery2 Flash Video) player:

G2flv Player

One of the things I disliked about it was that it didn’t have a full screen mode, and it’s double-size feature behaved differently in IE and Firefox.

So I downloaded the latest version of JW FLV Media Player (currently at 4.3) and uploaded into the libs folder: /modules/flashvideo/lib

Then I had to modify modules/flashvideo/classes/FlashVideoRenderer.class to tell it to use the new flv player. I would highly recommend you back up that file before you modify it. Here’s a copy of what my resulting FlashVideoRenderer.class looks like: FlashVideoRenderer.class using JW FLV Media Player.

I’ll explain the changes I made.

I disabled forceSessionId as the url generated wasn’t like by the script. I’m guessing it did not like the ‘?’. I also added a pointer to the new .js file and updated the playerUrl.

$urlGenerator =& $gallery->getUrlGenerator();
$src = $urlGenerator->generateUrl(
        array('view' => 'core.DownloadItem',
              'itemId' => $entity->getId(),
              'serialNumber' => $entity->getSerialNumber()),
        array('forceFullUrl' => true,'forceSessionId' => false,
              'htmlEntities' => false));
list ($width, $height, $title) =
        array($entity->getWidth(), $entity->getHeight(),
              $item->getTitle());
GalleryCoreApi::requireOnce(
    'lib/smarty_plugins/modifier.markup.php');
$title = smarty_modifier_markup($title, 'strip');
 
/* Default player: G2flv.swf */
$swfObjectUrl = $urlGenerator->generateUrl(
        array('href' => 'modules/flashvideo/lib/swfobject.js'),
        array('forceFullUrl' => true));

$playerUrl = $urlGenerator->generateUrl(
        array('href' => 'modules/flashvideo/lib/player.swf'),
        array('forceFullUrl' => true));
$flashVars = 'flvUrl=' . urlencode($src) . '&Width=' . $width .
            '&Height=' . $height . '&title=' .
            urlencode($title);
$extraAttr = '';

This remaining was basically following the instructions on JW FLV Media Player on how to use their code. I also added another paragraph where I would put the fallback code (e.g. Download Movie). If you prefer that to only show up when the item could not load, I would suggest putting the %s in the paragraph above.

return sprintf(
    '<div id="flashvideo">
 
        <p id="%s" %s%s></p>
        <p id="fallback">%s</p>
 
        <script type="text/javascript" src="%s"></script>
        <script type="text/javascript">
        var s1 = new SWFObject("%s","player","%s","%s","9");
        s1.addParam("allowfullscreen","true");
        s1.addParam("allowscriptaccess","always");
        s1.addParam("flashvars","file=%s");
        s1.write("%s");
        </script>
 
    </div>',
 
    !empty($params['id']) ? $params['id'] : 'movie',
    !empty($params['class']) ?
        ' class="' . $params['class'] . '"' : '', $extraAttr,
    $fallback, $swfObjectUrl, $playerUrl, $width,
    $height, $src,
    !empty($params['id']) ? $params['id'] : 'movie');

I’ll probably update my Gallery2 mp3 audio player to use this new player some time in the future.

28 Replies to “Updated Gallery2 to Use JW FLV Media Player”

  1. I’ve tried to use the modifications on my site but I get a 2032 error. I am currently using Jw player with gallery by adding the following to the .class file.

    $playerUrl = $urlGenerator->generateUrl(
    array(‘href’ => ‘modules/flashvideo/lib/player.swf’),
    array(‘forceFullUrl’ => true));
    $flashVars = sprintf(‘type=video&controlbar=over&autostart=true&stretching=none&file=%s’,
    urlencode($src));

    This works but I have to set the player to a fixed size. I would like for the player to automatically fit the video. Should your implementation allow for this?

  2. You’ll need to reference height and width in your flashVars.

    If you copied and pasted my code, that might explain the 2032 error since WordPress has a tendency to replace my singe/double quotes with stylized quotes.

  3. I downloaded the file from your link. That is where I got the 2032 error.
    I don’t know anything about code. I have reverted back to the original FlashVideoRenderer.class that is included with the G2 Flashmodule. I have made the changes that I indicated above. This allows the videos to play but the player size is fixed based on the following line:

    Do you know of a way that I can set this height and width based on the dimensions of the video so that is sized correctly for every video?

    Thanks

    John

  4. As suggested earlier, you should try referencing the height/width in $flashVars:

    $flashVars = sprintf('type=video&controlbar=over&autostart=true&stretching=none&file=%s&height=%s&width=%s#39;,
    urlencode($src),$height,$width);

  5. My current .class file is here
    http://blueskeyes.com/temp/FlashVideoRenderer.class

    Here is a link to one movie that is 512×384. This is the size that the player is set to in the .class file. http://blueskeyes.com/gallery/main.php?g2_itemId=29052

    Here is a link to a movie that is vertical 288 x 384. I have set the background in the .class file to match the background in my gallery. This makes it appear as though the player is sized correctly but you can tell from the control bar that it is not. http://blueskeyes.com/gallery/main.php?g2_itemId=28979

    I think if I understood the syntax I would be able to figure it out but I’m at a total loss.

    Thanks for taking the time to look at this. I really appreciate it.

  6. Try tinkering with the following:

    var so = new SWFObject("%s", "%s", "100%%", "100%%", "9.0.28.0", "ffffff");

    the 2 100%% represent width and height respectively. Telling it to use 100% would make it expand to the size of it’s container, which is currently defined in:

    <div id="flashvideo" style="align:left;width:512px; height:384px">

    What I would suggest is replace the 2 100%%s above with %s, and stick $width and $height in the correctly location in parameters (basically before $SWFObjectUrl)

  7. Thanks,

    I made the suggested change to the var so line.

    The $height and $width were added as follows

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

    I didn’t understand what all of the %s were for. Thanks again for all of your help. I’ve been messing around with this for days. Now everything works the way that I wanted.

  8. Hi can you help me out im trying to align my JW player by % or px … example 100px to the left do you know the html for that?

  9. Hmmmm, that’s really weird. Usually if it’s detected as an unknown type, instead of automatically redirecting you to download, it opens a page with a Download link. You appear to be using some custom theme. Have you tried 1 of the default themes?

  10. I am using the default matrix theme, with the custom header and footer used from my site, I just added a wmv file and it launches the media player instead. Do check it out and let me know if you have any suggestions.

  11. The problem was with the thumbnail manager, I uninstalled it, ffmpeg then started doing its job, after reinstalling thumbnail manager things are still ok! It was quite an experience I went through!
    Warm regards.

  12. I’ve used your instructions in the past to successfully switch out the flash player in Gallery2, but I seem to hitting a brick wall this time around. What’s interesting to note is that the FlashVideoRenderer.class files are different between the two installs, even though the version of the FlashVideo plug-in in both installs of Gallery2 is 1.0.3.

    The revision number of the class file that works for me is 15953 and the revision number of the class file I can’t get to work with the JW player is 17580.

    Have you had any experience with trying to change out the flash player in Gallery2 on this newer version of class file? My attempts have failed and my search for an answer has been fruitless.

  13. @bcj: I haven’t actually touched any Gallery2 code for some time nor updated to the recent versions.

    I know there’s been some changes to JW FLV Player where type=flv should be changed to type=video.

    Also, does the jw player code show up on the generated page? That’ll show if you’re actually executing that part of the code or not. If it’s showing up, then you’ll need to find out why that code isn’t displaying the video anymore. If it’s not showing up, you’ll need to trace why it’s not entering the flash video code anymore.

  14. Success at last. Turns out there are a handful of words that changed between versions. Your input was very helpful as I was able to get to a point where the player showed but no video, so that helped me focus my search on why the video wasn’t loading.

    Soon as I find some time this week I’ll post my findings. Thanks!

  15. Hi there,

    very usefull instructions! Thanks

    Is there a way to display the thumbnail of the video also.

    Thanks in advance!

    1. @Bjoern Unfortunately I’ve stopped using Gallery2 for quite some time and don’t really remember much about it anymore. I did get it JW Player working with mp3s and if I recall, there was some way to map it in their admin panel to do that.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.