pass a dynamic Flashvar to JW Media player ?

subscribe

I discovered this post and I was wondering if anybody implemented this one using jQuery Media and could show us how he/she did it. Or someone could may be give me a hint how to do it. May be put the code in the default.js file? How would a sample default.js file look like?

would be interested in this as well
-Peter

For those using JW Media player, at the moment it does not do it. There are two things that need to be done :
- render the picture of the preview from the .flv
- make jQuery Media pass that picture to the player as a Flashvar

For the first issue, I'm not so interested since I anyway have an Imagefield which is a chosen snapshot of the .flv (not the first frame). Also, it depends on the flash player. So if you're using another flash player, and that it provides the option, everything should work for you ? Anyway this does not depend on Drupal. The only way Drupal could do it would be with access to ffmpeg I guess, which is not an issue in jQuery Media.

For the second issue, let's say we have the image URL, but it changes for every video of course, so passing a static "image" Flashvar would not work. Any way to pass a dynamic variable like $node->field_imagefield[0]['filepath'] ?

I am using JW player currently with an imagefield like this:

drupal_add_js("$(document).ready(function() {
          $('a.video').media( {
            width: ". $node->field_video_width[0]['value'] .",
            height: ". $node->field_video_height[0]['value'] .",
            flashvars: { image: '" . base_path() . $node->field_video_still[0]['filepath'] ."' }
          } );
        });", 'inline');

This way, I can set video width and height and upload a still image for my videos.

YMMV and please remember: The above code is pasted straight from a q&d prototype.

How could I miss that ? Thanks a lot Daniel !!!

If someone else wants to use this, in the jQuery Media settings you must NOT have the .video class in Classes > Media > Media class , this code does it. Or fully disable Auto-invoke Media class.

Hey Daniel, where do you put that code?

Subscribed as well. Would love to see this feature.

I've been looking for a fix for just adding a preview image in for videos.

Code should look like

<swf file="productvideos/superscan11-short_VP6_CDwide.flv" flashvars="image=decpreview.jpg">

rather than

<swf file="productvideos/superscan11-short_VP6_CDwide.flv" image="decpreview.jpg">

and we're done ;)

Creating the equivilant for a node type should be nice and easy too.

Just have new content type, with 2 cck fields. File src & image. Use contemplate for ease of use and add the script into the template for that node type. Something along the lines of..

<swf file="<?php print $node->field_video[0]['filepath']; ?>" flashvars="image=<?php print $node->field_video_still[0]['filepath']; ?>">

..for your content type and bobs your aunts husband.

That should work fine for you.

I was able to successfully use Daniel's code with one issue. It uses the class name to set the flashvar for the image. This means that if you have a video gallery, with more than one FLV Media Player instance on the page, then all of the preview images are set to the same image. There doesn't seem to be a unique ID on the elements for which to define an image. Does anyone have any ideas?

I am currently using this...

<?php drupal_add_js("$(document).ready(function() {
          $('.filefield-file a').media( {
            width: ".$node->field_width[0]['value'].",
            height: ".$node->field_height[0]['value'].",
            allowfullscreen:true,
            caption:false,
            flashvars: { image: '" . base_path() . $node->field_image[0]['filepath'] ."' },
          } );
        });", 'inline'); ?>
<?php print $node->teaser ?>

However, it would seem that
$('.filefield-file a')
should be replaced with the element's ID, such as
$('video" . video-$node->id . "').

This would only work if the element had the ID set as "video-nid", or something of the sort.

Another possibility would be to get the array of elements by using $('.filefield-file'), then looping through the child elements a and setting the flashvars that way? I may give that a try, if there are no other suggestions.

Thanks,
Jim

This will work in both FF and IE.

In the Content Template, you use the following for the teaser field:

<?php drupal_add_js("
  $(document).ready(function() {
    $('.filefield-file a').media( { allowfullscreen:true, caption:false } );
    containerelem = $('#node-" . $node->nid . " .filefield-file div:last-child');
    containerstyle = containerelem.attr('style');
    containerstyle = containerstyle + '; width:" . $node->field_width[0]['value'] . "px; height:" . $node->field_height[0]['value']."px;';
    containerelem.attr('style', containerstyle );
    additionalflvars = 'image=" . base_path() . $node->field_image[0]['filepath'] ."'
    if ( $.browser.msie ) {
      objectelem = $('#node-" . $node->nid . " object');
      objectelem.attr('width', '" . $node->field_width[0]['value'] . "');
      objectelem.attr('height', '" . $node->field_height[0]['value'] . "');
      // Don't overwrite existing flashvars
      flvparamelem = $('#node-" . $node->nid . " param:last-child');
      flvars = flvparamelem.attr('value');
      if ( flvars ) {
        flvars = flvars + '&' + additionalflvars;
      } else {
        flvars = additionalflvars;
      }
      flvparamelem.attr('value', flvars );
    } else {
      embedelem = $('#node-" . $node->nid . " embed');
      embedelem.attr('width', '" . $node->field_width[0]['value'] . "');
      embedelem.attr('height', '" . $node->field_height[0]['value'] . "');
      // Don't overwrite existing flashvars
      flvars = embedelem.attr('flashvars');
      if ( flvars ) {
        flvars = flvars + '&' + additionalflvars;
      } else {
        flvars = additionalflvars;
      }
      embedelem.attr('flashvars', flvars );
    }
  });", 'inline'); ?>
<?php print $node->teaser ?>

The following goes in the body field:

<?php drupal_add_js("
  $(document).ready(function() {
    $('.filefield-file a').media( { allowfullscreen:true, caption:false } );
    containerelem = $('#node-" . $node->nid . " .filefield-file div:last-child');
    containerstyle = containerelem.attr('style');
    containerstyle = containerstyle + '; width:" . $node->field_video_width[0]['value'] . "px; height:" . $node->field_video_height[0]['value']."px;';
    containerelem.attr('style', containerstyle );
    additionalflvars = 'image=" . base_path() . $node->field_image[0]['filepath'] ."'
    if ( $.browser.msie ) {
      objectelem = $('#node-" . $node->nid . " object');
      objectelem.attr('width', '" . $node->field_video_width[0]['value'] . "');
      objectelem.attr('height', '" . $node->field_video_height[0]['value'] . "');
      // Don't overwrite existing flashvars
      flvparamelem = $('#node-" . $node->nid . " param:last-child');
      flvars = flvparamelem.attr('value');
      if ( flvars ) {
        flvars = flvars + '&' + additionalflvars;
      } else {
        flvars = additionalflvars;
      }
      flvparamelem.attr('value', flvars );
    } else {
      embedelem = $('#node-" . $node->nid . " embed');
      embedelem.attr('width', '" . $node->field_video_width[0]['value'] . "');
      embedelem.attr('height', '" . $node->field_video_height[0]['value'] . "');
      // Don't overwrite existing flashvars
      flvars = embedelem.attr('flashvars');
      if ( flvars ) {
        flvars = flvars + '&' + additionalflvars;
      } else {
        flvars = additionalflvars;
      }
      embedelem.attr('flashvars', flvars );
    }
  });", 'inline'); ?>
<?php print $node->body ?>

Here are the field names and meanings for my video content type:

field_width : the desired display width for teaser
field_height : the desired display height for teaser
field_video_width : the desired display width for full node
field_video_height : the desired display height for full node