How To Play Flash Video in Coppermine With Flowplayer

[mrdee]

If anyone is interested, I have made a small addition/mod to allow me to use Flowplayer http://flowplayer.org/ to view movie files.  It gives an experience similar to YouTube (I also run a similar mod in the Enlargeit plugin), and is very flexible with various plugins for streaming/hd etc.  It involves uploading 3 files to the root directory of coppermine (I attach the latest here corresponding to the date of this post) and then editing the theme.php for the theme(s) which you may use on your site.

Steps to follow:

1.  Make sure you add the flv file type to the allowable movie types in the normal config page.

2.  Upload the swf player files to the root of your coppermine directory (attached here or downloadable from Flowplayer).  The file with "tube" in the name is not essential, but I use it and to use my code suggestions without amendments you need it.

3.  Add this code before the

Code Select Expand

?> in the theme.php of the theme you use:

Code Select Expand

/******************************************************************************
** Section <<<theme_html_picture>>> - START
******************************************************************************/
// Displays a picture
function theme_html_picture()
{
    global $CONFIG, $CURRENT_PIC_DATA, $CURRENT_ALBUM_DATA, $USER, $LINEBREAK;
    global $album, $lang_date, $template_display_media;
    global $lang_display_image_php, $lang_picinfo, $lang_common, $lang_errors;

    $superCage = Inspekt::makeSuperCage();

    $pid = $CURRENT_PIC_DATA['pid'];
    $pic_title = '';

    if (!isset($USER['liv']) || !is_array($USER['liv'])) {
        $USER['liv'] = array();
    }
    // Add 1 to hit counter
    if ((!USER_IS_ADMIN && $CONFIG['count_admin_hits'] == 0 || $CONFIG['count_admin_hits'] == 1) && !in_array($pid, $USER['liv']) && $superCage->cookie->keyExists($CONFIG['cookie_name'] . '_data')) {
        add_hit($pid);
        if (count($USER['liv']) > 4) array_shift($USER['liv']);
        array_push($USER['liv'], $pid);
    }

    // The weird comparision is because only picture_width is stored
    if ($CONFIG['thumb_use']=='ht' && $CURRENT_PIC_DATA['pheight'] > $CONFIG['picture_width'] ) {
        $condition = true;
    } elseif ($CONFIG['thumb_use']=='wd' && $CURRENT_PIC_DATA['pwidth'] > $CONFIG['picture_width']) {
        $condition = true;
    } elseif ($CONFIG['thumb_use']=='any' && max($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight']) > $CONFIG['picture_width']) {
        $condition = true;
        //thumb cropping
    } elseif ($CONFIG['thumb_use']=='ex' && max($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight']) > $CONFIG['picture_width']) {
        $condition = true;
    } else {
        $condition = false;
    }

    if ($CURRENT_PIC_DATA['title'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['title'] . $LINEBREAK;
    }
    if ($CURRENT_PIC_DATA['caption'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['caption'] . $LINEBREAK;
    }
    if ($CURRENT_PIC_DATA['keywords'] != '') {
        $pic_title .= $lang_common['keywords'] . ": " . $CURRENT_PIC_DATA['keywords'];
    }

    if (!$CURRENT_PIC_DATA['title'] && !$CURRENT_PIC_DATA['caption']) {
        template_extract_block($template_display_media, 'img_desc');
    } else {
        if (!$CURRENT_PIC_DATA['title']) {
            template_extract_block($template_display_media, 'title');
        }
        if (!$CURRENT_PIC_DATA['caption']) {
            template_extract_block($template_display_media, 'caption');
        }
    }

    $CURRENT_PIC_DATA['menu'] = html_picture_menu(); //((USER_ADMIN_MODE && $CURRENT_ALBUM_DATA['category'] == FIRST_USER_CAT + USER_ID) || ($CONFIG['users_can_edit_pics'] && $CURRENT_PIC_DATA['owner_id'] == USER_ID && USER_ID != 0) || GALLERY_ADMIN_MODE) ? html_picture_menu($pid) : '';

    $image_size = array();

    if ($CONFIG['make_intermediate'] && $condition ) {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'normal');
    } else {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
    }

    list($image_size['width'], $image_size['height'], , $image_size['geom']) = cpg_getimagesize(urldecode($picture_url));

    $pic_title = '';
    $mime_content = cpg_get_type($CURRENT_PIC_DATA['filename']);

    if ($mime_content['content']=='movie' || $mime_content['content']=='audio') {

        if ($CURRENT_PIC_DATA['pwidth']==0 || $CURRENT_PIC_DATA['pheight']==0) {
            $resize_method = $CONFIG['picture_use'] == "thumb" ? ($CONFIG['thumb_use'] == "ex" ? "any" : $CONFIG['thumb_use']) : $CONFIG['picture_use'];
            if ($resize_method == 'ht') {
                $pwidth = $CONFIG['picture_width']*4/3;
                $pheight = $CONFIG['picture_width'];
            } else {
                $pwidth = $CONFIG['picture_width'];
                $pheight = $CONFIG['picture_width']*3/4;
            }

            $CURRENT_PIC_DATA['pwidth']  = $pwidth; // Default width

            // Set default height; if file is a movie
            if ($mime_content['content']=='movie') {
                $CURRENT_PIC_DATA['pheight'] = $pheight; // Default height
            }
        }

        $ctrl_offset['mov']=15;
        $ctrl_offset['wmv']=45;
        $ctrl_offset['swf']=0;
        $ctrl_offset['rm']=0;
        $ctrl_offset_default=45;
        $ctrl_height = (isset($ctrl_offset[$mime_content['extension']]))?($ctrl_offset[$mime_content['extension']]):$ctrl_offset_default;
        $image_size['whole']='width="'.$CURRENT_PIC_DATA['pwidth'].'" height="'.($CURRENT_PIC_DATA['pheight']+$ctrl_height).'"';
    }

    if ($mime_content['content']=='image') {
        if ($CURRENT_PIC_DATA['mode'] != 'fullsize') {
            $winsizeX = $CURRENT_PIC_DATA['pwidth'] + $CONFIG['fullsize_padding_x'];  //the +'s are the mysterious FF and IE paddings
            $winsizeY = $CURRENT_PIC_DATA['pheight'] + $CONFIG['fullsize_padding_y']; //the +'s are the mysterious FF and IE paddings
            if ($CONFIG['transparent_overlay'] == 1) {
                $pic_html = "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td background=\"" . $picture_url . "\" width=\"{$image_size['width']}\" height=\"{$image_size['height']}\" class=\"image\">";
                $pic_html_href_close = '</a>' . $LINEBREAK;
                if (!USER_ID && $CONFIG['allow_unlogged_access'] <= 2) {
                    if ($CONFIG['allow_user_registration'] == 0) {
                        $pic_html_href_close = '';
                    } else {
                        $pic_html .= '<a href="javascript:;" onclick="alert(\''.sprintf($lang_errors['login_needed'],'','','','').'\');">';
                    }
                } elseif (USER_ID && USER_ACCESS_LEVEL <= 2) {
                    $pic_html .= '<a href="javascript:;" onclick="alert(\''.sprintf($lang_errors['access_intermediate_only'],'','','','').'\');">';
                } else {
                    $pic_html .= "<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">";
                }
                $pic_title = $lang_display_image_php['view_fs'] . $LINEBREAK . '==============' . $LINEBREAK . $pic_title;
                $pic_html .= "<img src=\"images/image.gif?id=".floor(rand()*1000+rand())."\" width=\"{$image_size['width']}\" height=\"{$image_size['height']}\"  border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
                $pic_html .= $pic_html_href_close . '</td></tr></table>';
                //PLUGIN FILTER
                $pic_html = CPGPluginAPI::filter('html_image_reduced_overlay', $pic_html);
            } else {
                $pic_html_href_close = '</a>' . $LINEBREAK;
                if (!USER_ID && $CONFIG['allow_unlogged_access'] <= 2) {
                    if ($CONFIG['allow_user_registration'] == 0) {
                        $pic_html = $pic_html_href_close = '';
                    } else {
                        $pic_html = '<a href="javascript:;" onclick="alert(\''.sprintf($lang_errors['login_needed'],'','','','').'\');">';
                    }
                } elseif (USER_ID && USER_ACCESS_LEVEL <= 2) {
                    $pic_html = '<a href="javascript:;" onclick="alert(\''.sprintf($lang_errors['access_intermediate_only'],'','','','').'\');">';
                } else {
                    $pic_html = "<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">";
                }
                $pic_title = $lang_display_image_php['view_fs'] . $LINEBREAK . '==============' . $LINEBREAK . $pic_title;
                $pic_html .= "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
                $pic_html .= $pic_html_href_close;
                //PLUGIN FILTER
                $pic_html = CPGPluginAPI::filter('html_image_reduced', $pic_html);
            }
        } else {
            if ($CONFIG['transparent_overlay'] == 1) {
                $pic_html = "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td background=\"" . $picture_url . "\" width=\"{$CURRENT_PIC_DATA['pwidth']}\" height=\"{$CURRENT_PIC_DATA['pheight']}\" class=\"image\">";
                $pic_html .= "<img src=\"images/image.gif?id=".floor(rand()*1000+rand())."\" width={$CURRENT_PIC_DATA['pwidth']} height={$CURRENT_PIC_DATA['pheight']} border=\"0\" alt=\"\" /><br />" . $LINEBREAK;
                $pic_html .= "</td></tr></table>";
                //PLUGIN FILTER
                $pic_html = CPGPluginAPI::filter('html_image_overlay', $pic_html);
            } else {
                $pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />" . $LINEBREAK;
                //PLUGIN FILTER
                $pic_html = CPGPluginAPI::filter('html_image', $pic_html);
            }
        }
    } elseif ($mime_content['content']=='document') {
        $pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'thumb');
        $pic_html = "<a href=\"{$picture_url}\" target=\"_blank\" class=\"document_link\"><img src=\"".$pic_thumb_url."\" border=\"0\" class=\"image\" /></a><br />" . $LINEBREAK;
        //PLUGIN FILTER
        $pic_html = CPGPluginAPI::filter('html_document', $pic_html);
    } else {
        $autostart = ($CONFIG['media_autostart']) ? ('true'):('false');

        if ($mime_content['player'] == 'HTMLA') {
            $pic_html  = '<audio controls="true" src="' . $picture_url . '" autostart="' . $autostart . '"></audio>';
        } elseif ($mime_content['player'] == 'HTMLV') {
            $pic_html  = '<video controls="true" src="' . $picture_url . '" autostart="' . $autostart . '"' . $image_size['whole'] . '></video>';
        } else {

            $players['WMP'] = array('id' => 'MediaPlayer',
                                    'clsid' => 'classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" ',
                                    'codebase' => 'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" ',
                                    'mime' => 'type="application/x-mplayer2" ',
                                   );
            $players['DIVX'] = array('id' => 'DivX',
                                    'clsid' => 'classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616"',
                                    'codebase' => 'codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab"',
                                    'mime' => 'type="video/divx"'
                                   );
            $players['RMP'] = array('id' => 'RealPlayer',
                                    'clsid' => 'classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" ',
                                    'codebase' => '',
                                    'mime' => 'type="audio/x-pn-realaudio-plugin" '
                                   );
            $players['QT']  = array('id' => 'QuickTime',
                                    'clsid' => 'classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ',
                                    'codebase' => 'codebase="http://www.apple.com/qtactivex/qtplugin.cab" ',
                                    'mime' => 'type="video/x-quicktime" '
                                   );
            $players['SWF'] = array('id' => 'SWFlash',
                                    'clsid' => ' classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ',
                                    'codebase' => 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ',
                                    'mime' => 'type="application/x-shockwave-flash" '
                                   );
            $players['UNK'] = array('id' => 'DefaultPlayer',
                                    'clsid' => '',
                                    'codebase' => '',
                                    'mime' => ''
                                   );

            $player = $players[$mime_content['player']];

            if (!$player) {
                $player = 'UNK';
            }

        if ($mime_content['content']=='movie' && $mime_content['extension']=='flv') {
    $flv = $CONFIG['fullpath'] . $CURRENT_PIC_DATA['filepath'] . $CURRENT_PIC_DATA['filename'];
            $pic_height = $CURRENT_PIC_DATA['pheight']+20;
            $pic_width = $CURRENT_PIC_DATA['pwidth'];
            $pic_html = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='$pic_width' height='$pic_height' id='single5' name='single5'>
                          <param name='movie' value='flowplayer-3.2.2.swf'>
                          <param name='allowfullscreen' value='true'>
                          <param name='allowscriptaccess' value='always'>
                          <param name='flashvars' value='config={\"clip\":{\"url\":\"$flv\",\"autoPlay\":false,\"autoBuffering\":true,\"scaling\":\"fit\"},\"plugins\": {\"controls\":{\"url\":\"flowplayer.controls-tube-3.2.1.swf\",\"height\":\"20\",\"timeColor\":\"#D00000\",\"durationColor\":\"#FFFFFF\",\"timeBgColor\":\"#000000\"}},\"canvas\":{\"backgroundColor\":\"#000000\",\"backgroundGradient\":\"[0.1, 0]\"}}'>
                          <embed
                            type='application/x-shockwave-flash'
                            id='single6' name='single6'
                            src='flowplayer-3.2.2.swf'
                            width='$pic_width'
                            height='$pic_height'
                            allowscriptaccess='always'
                            allowfullscreen='true'
                            flashvars='config={\"clip\":{\"url\":\"$flv\",\"autoPlay\":false,\"autoBuffering\":true,\"scaling\":\"fit\"},\"plugins\":{\"controls\":{\"url\": \"flowplayer.controls-tube-3.2.1.swf\",\"height\":\"20\",\"timeColor\":\"#D00000\",\"durationColor\":\"#FFFFFF\",\"timeBgColor\":\"#000000\"}},\"canvas\":{\"backgroundColor\":\"#000000\",\"backgroundGradient\":\"[0.1, 0]\"}}'/>
                         </object><br />\n";

        } else

            $pic_html  = '<object id="'.$player['id'].'" '.$player['classid'].$player['codebase'].$player['mime'].$image_size['whole'].'>';
            $pic_html .= "<param name=\"autostart\" value=\"$autostart\" /><param name=\"src\" value=\"". $picture_url . "\" />";
            $pic_html .= '</object><br />' . $LINEBREAK;
        }

        //PLUGIN FILTER
        $pic_html = CPGPluginAPI::filter('html_other_media', $pic_html);
    }

    $CURRENT_PIC_DATA['html'] = $pic_html;
    $CURRENT_PIC_DATA['header'] = '';
    $CURRENT_PIC_DATA['footer'] = '';

    $CURRENT_PIC_DATA = CPGPluginAPI::filter('file_data',$CURRENT_PIC_DATA);

    $params = array('{CELL_HEIGHT}' => '100',
        '{IMAGE}' => $CURRENT_PIC_DATA['header'].$CURRENT_PIC_DATA['html'].$CURRENT_PIC_DATA['footer'],
        '{ADMIN_MENU}' => $CURRENT_PIC_DATA['menu'],
        '{TITLE}' => bb_decode($CURRENT_PIC_DATA['title']),
        '{CAPTION}' => bb_decode($CURRENT_PIC_DATA['caption']),
        );

    return template_eval($template_display_media, $params);
}
/******************************************************************************
** Section <<<theme_html_picture>>> - END
******************************************************************************/

4.  I manually take the thumbnail file from my camera, and rename it to .jpg and give it the same file prefix as used/configured in your Coppermine (the same prefix as you see Coppermine auto-generates when you add standard images).  There are other ways of doing it.  The remainder of the filename after the prefix needs to be identical to the main movie filename.  Upload the thumb file to the same album directory as you intend to upload the movie to.

5.  I upload the movie file, which for me is either in flv format or mp4 (encoded in H.264) to the desired album directory where I stored the thumb file and name it accordingly - see point 4.  I kept the code above simple and saved some work by making it expect all flash movie files to have the .flv extension (even if they are actually MP4).  The only requirment is that the file content is playable by the flash plugin in the browser.  The flash plugin detects the file type and plays it.

6.  Use the batch add process in Coppermine to add the movie file with associated thumb.  Once I have done this I add height/width parameters into the file properties in Coppermine.  I do this because lately I upload high def movie clips which, though compressed in H.264, use 1080P resolution.  Lots of monitors/displays would have to downsize this to play it and hence I put in 881x496 for the window size.  This just happens to be good for the movie aspect ratio I use.  This gives me a movie "window" which I'm guessing fits in most user's screen nicely.  The reason I do it this way is so that when/if they click on the "full-screen" option when playing the movie it will display the movie in the highest quality that flash can produce on the particular monitor (rather than upscaling).  Hence, when playing in the 881x496 window flash is downscaling it.

NB:  You may notice in the code above that I set the control bar to a height of 20 pixels.  I also then added a corresponding 20 pixels in another line to compensate for this (and avoid black bars around the movie).  If you change the height of the control bar then I recommend you also change the compesation value.

[phill104]

Nice mod and all but we are trying to move away from mods in favour of plugins. This I am sure would work well as a plugin. Simply take a look at one of Andre's and you will see how he has achieved it using another player.

[Αndré]

take a look at one of Andre's

Flash Media Player plugin with visual integration (play flv/mp4/mp3/aac files)

[phill104]

Cheers Andre. I cannot do links on my PDA.

[mrdee]

Nice mod and all but we are trying to move away from mods in favour of plugins. This I am sure would work well as a plugin. Simply take a look at one of Andre's and you will see how he has achieved it using another player.

Thanks Phil and Andre.  I guess if that's the policy then please feel free to delete/move my post.  I personally don't have the time or will at the moment to convert this into a plugin.  Having spent time making this work I simply wanted to share the code for others to use (either directly or as a step to finalising a plugin), which I thought was the 'big-picture' principle of projects such as Coppermine.

Only a very small percentage of my users will actually need this functionality, as most script-enabled users will see the same player in an EnlargeIt popup.  Also, having seen that Andre made a plugin already (and having read the title of that plugin) it would probably be more appropriate and efficient use of time/energy to modify that plugin for anyone really needing/wanting the flexibility and look/feel of Flowplayer.  My code contribution could save a bit of time for anyone wanting to take it to the next stage.

[Arvy]

Hi.

I've modified the codebase.php file of Andre's plugin so that it automatically uses Flowplayer IF AVAILABLE in the flash media player folder.  If it detects the presence of flowplayer.min.js it uses that with a js_include() call.  Otherwise, it just uses flowplayer.swf in object mode with flashvars config settings.  In either case, with autoBuffering set true, it will automatically display an initial still image (the first frame of the video clip) regardless of Coppermine's $CONFIG['media_autostart'] setting.

Other than using get_pic_url($CURRENT_PIC_DATA, 'fullsize') for its video file selection, most other Flowplayer configuration settings are "hard coded" in the modified codebase.php file (attached) to suite my own preferences.  Andre or anyone else is entirely welcome, of course, to change that if it's considered worthwhile working on the plugin's configuration.php file to provide greater flexibility for individual user preferences.  I may do it myself later, but Flowplayer has so many configuration options it will take me a while to get to it.

Regards to all,
Richard  - http://virtech.org/images/cpg/

[Αndré]

I had a short look at the flowplayer features. Seems that it can handle more video formats than jw player. I'll have a closer look and maybe integrate that player (+ config page) into my plugin.

[Arvy]

Hi Andre.

Although all of them have their own strengths and weaknesses, I like Flowplayer a lot, both because of its format handling and also because of all the open source plugins available from the developers' web site.  I haven't tried the audio plugin, but it could also be useful.  It all appears to be a very active project.

On the downside, it's tricker than JWplayer if you want to use any kind of initial overlay image, but that's not really needed for Flowplayer anyhow.  With autoBuffering enabled, it displays the initial frame even if autostart is set false.  IMO, that looks better than using an expanded thumb.  It also lets you add a "stop" button to automatically resets the clip, which I've never figured out how to do with JWplayer.

Hope you have fun with it.  I'll be looking forward to downloading your improvements over my "quick and dirty" customization attempt.

Best regards,
Richard.