Hey all,

I've got video.module up and running w/ auto-thumbnails working.

Is their anyway to make flowplayer show the thumbnail as a splash (screen before you push play) or upload a separate image as the splash?

Thanks

Comments

that0n3guy’s picture

Title: flowplayer splash as thumbnail or other? » Upload flowplayer splash image?
Component: Documentation » Code
Category: support » feature

So I started looking at this some more.

I think it would be pretty easy to add some extra settings and cck widget for uploadfield that allows the user to upload a splash image if using flowplayer on a node by node basis. This would also need a cck formatter.

I've never done any cck coding so I'm not sure how data is stored, but it kinda looks like it wouldnt be that difficult.

Flowplayer api has some stuff for splash, you just have a 4th paramater called $contents (see: http://drupal.org/node/697558#comment-2982598 ).

Also, I changed the title of this issue b/c I dont think we would want to use the thumbnail as the splash, mostly because it would stop looking like a video player that way. You want the splash image to look like the video player with whatever image you want in it.

-Peter

iLLin’s picture

I already have this in place but swftools wasn't working at that time. Take a look at video_formatter.inc line 137. I know you may not be using swftools flowplayer, well i have an else in there at line 143 and maybe it can be added to the clip array.

You should be able to use $video->thumbnail->filepath.

that0n3guy’s picture

Version: 6.x-3.9 » 6.x-4.0-beta2

Yeah, i'm not using swftools, I find it to be a pain. Flowplayer api just works so I'm using that.

I got splash screens to work by replacing line 159 of video_formatter.inc ( array('style' => 'width:' . $width . 'px;height:' . $height . 'px;')

with array('style' => 'width:' . $width . 'px;height:' . $height . 'px;', 'nid' => $node->nid) . This passes the NID to flowplayerapi.

Then, in flowplayer.module I added this to the theme_flowplayer function:

if (isset($attributes['nid'])) {
  $nid = $attributes['nid'];
}
$node = node_load($nid);
if (isset($node->field_lp_element_video_splash[0]) && $node->field_lp_element_video_splash[0] != NULL) {
  global $base_url;
  $img = $node->field_lp_element_video_splash[0]['filepath'];
  $contents = "<img src=$base_url/$img>";
}

Its hackish and only works with my field (field_lp_element_video_splash)... I'm not sure how to make this work with any cck field.

sparrish26’s picture

That code works great! Those are both themeable functions, so I overrode them in my theme's template.php and was able to avoid hacking the modules. The two functions to override are theme_video_flv and theme_flowplayer. Working on integrating imagecache to allow for automatic play button overlays on the splash image.

hypertext200’s picture

Version: 6.x-4.0-beta2 » 6.x-4.1-rc4

If you success with that, please post here, that would be really help to other users.

sparrish26’s picture

I was able to make that work. Granted, these functions have the image_cache preset and the cck field names hardcoded, but it does work, and since I made the changes in my theme's template.php, the modules themselves are untouched. Here are the two functions that I added to template.php. Rename the function names and the image_cache preset and cck fields as needed to work with your setup.

function theme_video_flv($video, $node) {
  if ($video->flash_player == 'swftools') {
    $options = array(
  	  'params' => array(
        'width' => $video->player_width,
        'height' => $video->player_height,
    ),
      'othervars' => array(
    //@todo: swftools bug, can't enable this until they fix their pathing for the images.
    //'image' => $video->thumbnail->swfthumb,
    ),
    );
    $themed_output = swf($video->url, $options);
  }
  elseif ($video->flash_player == 'flowplayer') {
    $options = array(
      'clip' => array(
        'url' => $video->url,
        'autoPlay' => $video->autoplay,
        'autoBuffering' => $video->autobuffering,
    ),
    );
    $themed_output = theme(
      'flowplayer',
    $options,
    $video->formatter,
    array('style' => 'width:' . $video->player_width . 'px;height:' . $video->player_height . 'px;', 'nid' => $node->nid)
    );
  }
  else {
    $themed_output = t('No flash player has been setup. ' . l(t('Please select a player to play Flash videos.'), 'admin/settings/video/players'));
  }
  return theme('video_play_flv', $video, $node, $themed_output);
}


function theme_flowplayer($config = NULL, $id = 'flowplayer', $attributes = array(), $contents = '') {
  // Prepare the ID.
  $id = form_clean_id($id);

  // Prepare the attributes, passing in the flowplayer class.
  if (isset($attributes['class'])) {
    $attributes['class'] .= ' flowplayer';
  }
  else {
    $attributes['class'] = 'flowplayer';
  }
  
  if (isset($attributes['nid'])) {
    $nid = $attributes['nid'];
    $node = node_load($nid);

  if (isset($node->field_video_splash[0]) && $node->field_video_splash[0] != NULL) {
    $contents = theme('imagecache', 'video-thumb', $node->field_video_splash[0]['filepath']);
  }
  }
  
  $attributes = drupal_attributes($attributes);

  // Add the JavaScript to handle the element.
  flowplayer_add('#'. $id, $config);

  // Return the markup.
  return "<div id='$id' $attributes>$contents</div>";
}

To get a play button on the splash images, I used ImageCache Actions (http://drupal.org/project/imagecache_actions) to overlay a transparent png play icon onto the image. That is the action referenced in the theme_flowplayer function as "video-thumb".

hypertext200’s picture

Project: Video » Flowplayer API
Version: 6.x-4.1-rc4 » 6.x-1.x-dev

this should done by the Flowplayer API module.

jphil’s picture

Solution for splash image using flowplayer API and suggestions from this page in the flowplayer docs:
http://flowplayer.org/demos/configuration/playlist-splash.html

try this, works for me :)

			// work with flowplayer API :)
			flowplayer_add('#video_player', array(
				//'log' => array( 'level' => 'debug'), // firebug debug log - very very very verbose!!!!
				'playlist' => array(
					array(
						'url' => 'url to image',						
						'scaling' => 'orig',
					),
					array(
						'url' => 'http://vod01.netdna.com/vod/demo.flowplayer/flowplayer-960.mp4',
						
						// this is the SubRib file with captions info
						// 'captionUrl' => $captions_file_path, 
						
						'autoPlay' => FALSE, // Turn autoplay off							
						
						// video will be buffered when splash screen is visible
						'autoBuffering' => true 
					),
				),
			));
bkat’s picture

I have an unofficial patch the video module that adds the thumbnail as a splash screen if you aren't autoplaying the video: http://drupal.org/node/973950

yan’s picture

#9 is what I was looking for, thanks!

johnhanley’s picture

Working w/ Flowplayer API in Drupal 7. #9 worked for me as well to output splash image--thanks.