Pass thumbnails to media players via cck formatters

I'm working up support for this on branch DRUPAL-6--3 which has a few new features.

The current implementation (which works for single audio / video uploads) is that you create a second file field on your content, and you assign this the SWF Tool - thumbnail formatter.

When you upload the content you can also upload an image. When the content is rendered then if the thumbnail is present it will be used in the player.

When configuring the CCK content you have to ensure that the thumbnail image comes first as the renderer has to process the image first ready for the player to receive it.

Does this sort of approach sound like it will be useful?

I've just created a development release for DRUPAL-6--3, so when the package is generated you can get it from there if you'd like to experiment!

For what it's worth, I'm currently getting thumbnails with JW Player this way:

I have a video content type with a filefield called "media" that allows users to upload MP4 video. I also have a second filefield, "thumbnail." Media Mover is able to detect file uploads on the media filefield and, with the help of FFMPEG, grabs a still image 10 seconds into the video. It attaches this generated thumbnail to the "thumbnail" filefield. I'm also using contemplate to make sure that the thumbnail is passed as the preview image (image flashvar) to JW Player.

@bbilocura - thanks for posting your current method. What you've described as the work flow sounds like it would fit perfectly with the concept of the "SWF Tools thumbnail formatter".

I've not tried FFMPRG / Media Mover, but being able to automatically populate the right CCK field should make a pretty seamless mechanism to upload a video and generate an appropriate thumbnail.

Hi

Can I ask that I am wrong ?
1) I have installed and configured the module swf tolls (versió 3 dev)
2) I have installed and active swfobject swfobject_api
3) Player is the default jw flv 3
3) all goes well ) With the exception of thumbnail.
5) I have content type video
5a) Tvideo field (file upload)-Path settings -> File path: videos -- Display > Thumbnail swf tolls.
5b) video field (file upload) -Path settings -> File path: videos -- Display > swf tolls without download.

node/add/video

6) I upload the video1.flv (video field)
7) I upload an image (image1.jpg name) tvideo field

8) The video clearly shows but does not show thumbail.
9) in the order of fields this first tvideo (image).

Could you comment that 'm missing ..
Could you show the code placed on the contenmplate?

Thanks

This is the relevent portion of my contemplate.

In the code below, "image" refers to the name of JW Player's thumbnail flashvar. $node->field_video is the video filefield, and field_thumbnail is the thumbnail filefield.

      <?php foreach ((array)$node->field_video as $item) { ?>
        <div class="field-item"><?php print swf($item['filepath'],
          array(
            'flashvars' => array('image' => "http://example.com/" . $node->field_thumbnail[0]['filepath']),
          )
        ); ?>

Thank you very much for answering
Now trying to insert your code in the tpl.
I said that I´had managed to bring the img as follows:

1) Bring the img with node-CONTENTTYPE.tpl.php

 if ($field_videolocal[0][filepath]) {
 print swf(
 $node->field_videolocal[0]['filepath'], 
 array(
 'flashvars' => array(
 'image' => 'videolocal/' . ($node->field_thumbnail[0]['filename']),
 'params' => array('width' => '320', 'height' => '280'),
)
));
 }
 
 

2) Bring the img with content-field.tpl.php content-field-field_FIELDNAME-CONTENTTYPE.tpl.php
http://drupal.org/node/450946
1. Create a content type "video" with a field for your thumb - "video_thumb", and one for your flv - "video".
2. Copy the "content-field.tpl.php" template from the CCK theme folder into your theme folder.
3. Make a duplicate of "content-field.tpl.php" and rename it "content-field-field_video-video.tpl.php", so it will only apply to the FLV field within the video content type.
4. Within this new template, replace the line

<?php
print $item['view'] 
?>

for
Working wicht flowplayer
1
<?php
2   print swf(
3     $item['filepath'], 
4     array(
5       'flashvars' => array('image' => $node->field_video_thumb['0']['filename'])
6     )
7   );
8 
?>

Working wicht jw player
1
<?php
2   print swf(
3     $item['filepath'], 
4     array(
5       'othervars' => array('image' => $node->field_video_thumb['0']['filename'])
6     )
7   );
8 
?>
 

3) Point 1 and 2 works well to show thumbnail and to pass parameters height and width to the player in the display in teaser and node view for player.I'm using the second option .-

4 ) What I fail to do is to pass parameters (whidth, height and thumbnail(img) when I do a Views and choose the Basic settings ,
Style: Unformatted
Row style: Fields, both as to block as page views no showing thumbnail and .
I always displays the default height and width put in player without thumbnail

5) now trying to insert your code in the tpl.php
BloqueROWSTYLE_FIELD: Theming information
Row style output: views-view-fields--block-2.tpl.php
o in
Field Content: video (field_video) (ID: field_video_fid):

views-view-field-VIEWSNAME--block-4--FIELDNAME-fid.tpl.php

6) I'm not programmer so I hard time modifying the code.

Thank you very much, sorry for my English

I can;t get to resize the flash player in a view block without using a thumb image.

How can I do this.

This is really tiring.

Hi,

does anyone know a way to get this to work so that this will work using a views template; views-view-field--field-video.tpl.php for example?

Thanks

Thanks bbilocura for the great code! Here's what I did to get it working. I'm using 6.x-3-dev for my SWF tools version but I'm not using any of the new features so it should be largely irrelevant. I'm using JW4 as the player.

I grabbed Contemplate (dev version), enabled it, and went to /admin/content/types/templates. I edited the template for my content type (vlog in my case) and changed the teaser and body output to this:

<?php print $node->content['body']['#value']; ?>

<?php foreach ((array)$node->field_vlogvideo as $item) { ?><div class="field-item"><?php print swf($item['filepath'],array('flashvars' => array('image' => "http://popkrazy.com/sites/default/files/imagecache/vlog_thumb/" . $node->field_vlog_thumbnail[0]['filename']),));}?></div>

This prints the body text first, and then the player + thumbnail. I changed printing the full filepath to instead use imagecache, so that's somewhat hardcoded in.

field_vlogvideo is my file field for the MP4 file, and field_vlog_thumbnail is the thumbnail. I let it accept any size image just for simplicities sake, and used imagecache to scale it back.

I'm working up a solution to this on the DRUPAL-6--3 branch, focussing on CCK for now.

There's a new formatter - CCK Thumbnail, and you assign this to a field that is ordered ABOVE the field that contains the media you want. When the content is then rendered the formatter collects all the thumbnails first, and then uses them as thumbnails against each media item. If you have a single media item you get a single thumbnail, if you have multiple items you get multiple thumbnails.

It needs polishing, but it should work for the case described in #5. It will mean no custom coding is needed.

I'm completely re-working the playlisting functions too, and the same technique can be used to assign a series of thumbnails into a playlist and output them in the JW4 player playlist.

Phew - this is hard work. There's a lot of legacy stuff in SWF Tools that is taking a while to unpick. The module is being asked to do a lot more than the original design ever imagined, so there's quite a bit of optimisation to be done, but at the same time not break the old stuff!

Anyhow, I made a bad commit last night that broke single players, but I think I fixed it so when the next dev package gets generated it's ready for trying (on a non-production site!)

At the moment I'm developing the new thumbnail formatters with JW4 (primarily because this has built in playlist generation which is a little easier than FlowPlayer3).

If anyone wants to test it please let me know how you get on. Simply create a CCK content type and assign it TWO fields. One of these will be used to hold the thumbnails, the second will be used to hold the media. In the manage fields page make sure the thumbnail field comes above the media field.

Assign the SWF Tool - Thumbnail formatter to the thumbnail field, and then assign the appropriate formatter to your media (playlist, or with/without download link).

Then create your content. Upload the thumbnails and media to the appropriate fields, and that's it. You will get either a single player, or multiple players, each with the thumbnail. If you upload few thumbnails than media then the thumbnails will be assigned until they are all used (TODO: What if there was no thumbnail with a media file in the middle of the list...?) If you turn on the JW4 playlist (set it to right, over or below as you prefer) on the settings page you will get a formatted playlist, that includes the thumbnails.

You can also experiment with the GetiD3 module. This will try to pick up ID3 data and use it in the playlist.

I ran some tests and I have to say it is pretty awesome to see a player with thumbnails just appear.

Note! When testing playlists remember that SWF Tools creates an xml playlist in the files/playlist directory. You will need to delete these so that they are regenerated with the image data. Also, some browsers cache the xml, so if you don't see the result you expect try clearing the browser cache too.

Non-playlist mode

Single media, no thumbnail = blank player, audio plays. OK.
Single media, single thumbnail = player with thumbnail, audio plays. OK.
Multiple media, no thumbnails = multiple blank players, audio plays. OK.
Multiple media, insufficient thumbnails = multiple players, thumbnails until exhausted. OK.
Multiple media, multiple thumbnails = multiple players, each with thumbnail. OK.

Playlist mode
Single media, no thumbnail = blank player but audio plays. OK.
Single media, single thumbnail = single thumbnail, image in player, plays. OK.
Multiple media, no thumbnails = one player, no thumbnails, plays. OK.
Multiple media, insufficient thumbnails = one player, thumbnails until exhausted, plays OK.
Multiple media, thumbnails = one player, thumbnails, plays OK.

Thumbnails from CCK are now passing to JW4 and FP3. The basic approach is to create the content type and place a filefield / textfield / linkfield first and configure it to use the SWF Tools thumbnail formatter. Then create a second field to hold the actual content and configure this with an SWF Tools formatter.

The thumbnail is then collected and passed to the player. If you have multiple filefields then you should have the same number of thumbnails as there are filefields as the formatter simply consumes the thumbnails is the same order as the media itself.

I've not tested, but if you have a separate module that can create thumbnails and put the result in to the appropriate CCK field then you should be able to automatically get thumbnails that way.

Local testing has been good, in particular with JW4. It looks great if you combine a playlist with thumbnails with the Flow plug-in to create an iPod style cover flow playlist. A regular JW playlist will also automatically pick up thumbnail images.

FP3 playlists with thumbnails isn't working right yet, but the work on FP3 formatted playlists is still in progress so this will hopefully will improve. But the thumbnails will appear correctly in the main player.

Setting to "needs review" as the code is now basically stable and I'd like to know if other users find this feature works ok.

I am looking to have a simple thumbnail displayed for each video I upload on my flowplayer3 rather than the solid color that displays by default but after the hours of research and trying what is listed above I still am not getting any joy. Here is my setup:

I am hosting my own mp4 video files (don't need flv file compatibility) so I created a custom content type that has a video field (file) and a video thumbnail field. On the main page I use a view to display the video in a Carousel "Style: Views Carousel". Flowplayer works great and I use a custom template file similar to what's listed in #8.

My first problem is that in the carousel, I just get the image and the video, one after the other - it seems flowplayer can be used to display images so I have to use JW4 so I get a JW4 player and then a flowplayer.

Second problem is that on the actual node page I get a similar thing going on, the two items, image and video are displayed separately.

What is going on here, seems I am almost there. I can manually generate a thumbnail for each video but it seems I am missing the code that superimposes the thumbnail on top of video, js or css magic perhaps ??? Perhaps Flowplayer3 can't do this and I have to use the JW4 player?? I hear people talking about thumbnail generator.

I also see this data for flowplayer:
Thumbnails: No
Autoplay: Yes
RSS attachment: No

Seem like no one has got this working? Help, my site is useless without thumbnails !!!

Please don't change a thread title from its original description, and definitely not to something like "not working" which isn't helpful to anyone! It was also a feature request, which has been addressed, so if you need to raise a support request make it a separate thread.

Reverting to original title and category.

Rant over.

This thread describes a specific feature request, and post #15 describes the solution that is proposed and available in the BETA3 / DRUPAL-6--3 code. The new code is designed for use in a single node, and lets you easily pass a thumbnail to the video player.

This will probably fix what you are trying to do on a single node page, but I'm not sure about displaying multiple fields.

Please try the BETA3 code and if it doesn't work in the specific way this original thread requested please raise a new support request.

Stuart, thanks for the prompt response and sorry about changing the title.

One more question: How do I configure the thumbnail field to use SWF Tools thumbnail formatter, when I created the thumbnail filefield I didn't see this as an option.

Thanks for your work on this module, it rocks!
Richard

Thumbnail formatters are a new feature, so you'll need to grab 6.x-3.x-BETA3 to try it out.

You create two file fields on your content. Format the first (that's important!) as the thumbnail formatter, and the second as the normal SWF Tools formatter (or create an all-new SWF Tools profile!).

That's it.

Note you must put the thumbnail field/formatter first - the render process has to collect the thumbnail ready to be attached to the player with the movie.

I installed 6.x-3.x-BETA3 and managed to get it working, works like a charm, thanks! I'm having an issue with IE 8 not displaying flowplayer at all but I'll post a new issue for this.

have thumbnails working via media mover / ffmpeg / swftools / jwplayer 5 - friggin' awesome. Thanks all.

I know this is a few months old, but to clarify for those who might read this thread later - you format the thumbnail field on the "display fields" page: admin/content/node-type/CONTENT TYPE/display.

I missed how to do this too, until I poked around a little further.

Just edited my last post, as I've resolved a bit of the difficulty I was having.

Following the directions given above, I'm now able to pass thumbnails to JW5 player just fine using this method of formatting my CCK fields. However, when the thumbnail is loaded into the player, it renders the player controls completely inoperable.

If you visit this page: http://video.uncc.edu/testing/drupal/ (top story, 49ers Insider-Darius Law)
You will see in the source that the player is looking for the file like this: file=/testing/drupal/sites/default/files/sites/default/files

...even though my embed is formatted like this: [swf file="mp4:FILENAME.f4v" stream="rtmp://FLASHSERVER/APPLICATION"] and default filetype is set to RTMP.

Specs are as follows: JW 5.2.1 (licensed), Drupal 6.17, PHP 5.1.6, SWF Tools 6.x-3.0-beta3, all media served from Flash Media Streaming Server and not via http from my web server.

I'm really just trying to make it as easy as possible for my producers to post content, using the CCK formatters like this to pass a splash image to the player would be ideal. Should I just wait for the release and define my flashvars in the embed code for the time being?

Thanks to anyone who can help.

Forget it, I'm going a different route for a solution. Maybe I'll try SWFT again when 6x-3.0 is released.

Hi Stuart Greenfield - I'm a bit unclear of what you mean by this comment.

Where do I specify which imagecache preset to use? Is it on the View configuration (or) is under "ImageCache" at (admin/settings/swftools/profile/CONTENT_TYPE/configure/wijering4)?

I'm using 6.x.-3.0-beta4 with JW Player 4.

Thanks for the tip in #13 Stuart, been working on this all day. :)

Great, great module, too.

I have added a documentation page to assist users in configuring SWF Tools to work with a thumbnail. http://drupal.org/node/1061304

I used following code :

$link = "https://s3.amazonaws.com/{$bucket}/{$resource}?{$authentication_params}";
echo swf($link,
array(
'flashvars' => array('image' => 'http://112.jrmlive.prg/'. $node->field_cp_video_file[0]['data']['video_thumb']. '?q='.rand()),
'params'=>array('height'=>'200', 'width'=>'342'),

)
);

It display thumnail over video when I clear cached from admin side otherwise not display.
is there any caching problem? have you any solution please reply.

Thanks

I got solution from http://drupal.org/node/305225#comment-1278452

I managed to create a cck template that can display thumbnails using the sfw() function, here's the code:

<?php if (!$field_empty) : ?>
<div class="field field-type-<?php print $field_type_css ?> field-<?php print $field_name_css ?>">
  <?php if ($label_display == 'above') : ?>
    <div class="field-label"><?php print t($label) ?>:&nbsp;</div>
  <?php endif;?>
  <div class="field-items">
    <?php $count = 1;
    foreach ($items as $delta => $item) :
      if (!$item['empty']) : ?>
        <div class="field-item <?php print ($count % 2 ? 'odd' : 'even') ?>">
          <?php if ($label_display == 'inline') { ?>
            <div class="field-label-inline<?php print($delta ? '' : '-first')?>">
              <?php print t($label) ?>:&nbsp;</div>
			<?php } ?>
			<?php
				print swf(
				$item['filepath'],
					array(
						'othervars' => array('image' => 'http://mywebsite.com/'.$item['data']['video_thumb'])
					)
				);
			?>
        </div>
      <?php $count++;
      endif;
    endforeach;?>
  </div>
</div>
<?php endif; ?>

I am using swftools v3, the cck video field and flowplayer as player (even though this syntax would be just fine for every player, as stated in http://drupal.org/node/305225 )

Hi Stuart Greenfield!
Thanks for all your great work. I already got thumbnails working with swf tools 6.x-3.0 and cck formatters. As you said, I used an image above the video field and its rendered as the video, but... (there is always a but:(... ) I only get this watching the video on firefox, but on IE (I hate IE 10 000 times!!!) the video is shown with no thumbnail at all. Just the first frame of the video again.
Have you seen this issue before or its just me?

thanks in advance

Please not that JW player also takes the image as a flashvar as follows:

<?php
  print swf(
    $node->field_video[0]['filepath'],
    array(
      'flashvars' => array('image' => 'http://www.mysite.com/'.$node->field_video_image[0]['filepath'])
    )
  ); ?>

For confirmation check out the JW Player config: http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12...

Extrapolating from #5 and spending a few hours of trial an error has led me to figuring out how to automate this completely and fairly painlessly.. Decided to blog about it when I was done although the fact that I've been away for 24 straight hours surely much contribute to my poor writing: http://blog.netflowdevelopments.com/2011/11/20/drupal-fun-auto-generatin...