How to Use jQuery Media for Audio & Video

Share this

I sometimes hear a complaint that jQuery Media can't be used for both audio and video on the same site, because it makes the player too large.

This is not true at all. Although it does currently require some finagling.

I plan to reconfigure the module soon to make it easier to pull in the proper configurations for audio and video. Meanwhile, here's a quick hack.

jQuery Media for both Audio and Video

1. Enable the FileField module and create types for your audio and video clips.

2. Enable the jQuery Media module, and configure it for your custom video node type. We won't turn it on for the custom audio type, because we'll be calling it manually, coming right up.

3. Make sure you have a media player installed in the file directory and configured properly at /admin/settings/jquery_media (or /admin/settings/jq if you're using the jQ module). I suggest JW FLV Media Player for now, as Drupal's Media Player doesn't yet support audio. Just stick it in the site's root directory to work automatically, or put it wherever you want and configure jQuery Media with the proper folder.

4. In your theme's template.php, create the following function, replacing 'custom_audio_type' with your site's custom audio content type.

<?php
function phptemplate_preprocess_filefield_file(&$variables) {
 
$node = node_load($variables['file']['nid']);
  if (
$node->type == 'custom_audio_type') {
   
$variables['classes'] = 'filefield-file-audio';
    if (
module_exists('jquery_media')) {
     
jquery_media_add(array('media class' => '.filefield-file-audio a', 'media height' => 20, 'media width' => 200));
    }
  }
  else {
   
$variables['classes'] = 'filefield-file';
  }
 
$variables['original_file'] = $variables['file'];
}
?>

(Note: we need to copy the $variables['file'] to a new variable because of a known bug in Drupal 6 at http://drupal.org/node/297952.)

5. Create a filefield_file.tpl.php file in your theme directory, with the following code:

<?php
  $path
= $original_file['filepath'];
 
$url = file_create_url($path);
 
$icon = theme('filefield_icon', $original_file);
  print
'<div class="'. $classes .' clear-block">'. $icon . l($original_file['filename'], $url) .'</div>';
?>

That's it. It should work automatically after that. Note that this tutorial assumes you're using Drupal 6.4, CCK 6.x-2.0-rc6, FileField 6.x-3.0-alpha4, and jQuery Media 6.x-1.4-beta1.

Note that I write about this in more detail in Drupal Multimedia (pre-order now)!

AttachmentSize
jquery-for-both-audio-video.png83.82 KB

Comments

Li's picture

Playing audio in groups - album?

Hi

I am still looking for solutions for my situation and couldn't get the audio player to work the way I want, Can someone help please.

I am new to Drupal, and so far I am very happy with the whole system, (I even managed to upgrade to the latest 6.13) I bought the book "Drupal Multuimedia" (a very good book, thanks), and I managed to upload audio and video files within a node. However, I am still having difficulties in the issues below:

1. Embed albums (with different tracks) with in a page (article) - I want to have "extended" players for different albums placed in different parts of a single page/article.

2. Link the tracks from different server - The server that hosts my website has a limited space, I have another server with unlimited space, I want to use the second server to host media contents, and my main server host system.

3. hide the links.

That is all I want. Please help.

Thanks

Li

Pedya's picture

thanks, the lord !

thanks, the lord !

john259's picture

Cool Stuff

Hey this is really cool stuff. I can actually use this on my music lyrics site for integration with music videos. I was looking for a way to integrate video feeds from various places like youtube, aol and yahoo and this looks like a viable solution.

cfabric's picture

audio & video on the same page?

Hello,

Is it somehow possible to get audio and video on the same page with different player sizes?

Thanks for your posting!
Chris

Eric Mckenna's picture

thickbox?

Aaron, have you worked with displaying videos with thickbox and jquery media plugin? I've looked around and can't see to find anything solid. I can get a thickbox to render with my video link, but the jquery media decorations can't seem to find the css classes to attach too.

any thoughts? Thanks.

Eric Mckenna's picture

I got it

I was blinding myself with thinking it was more complicated then it needed to be. Adding the small script to the pop-up page was all I needed.

Eric Mckenna's picture

cck preprocess

For some reason, the phptemplate_preprocess_filefield_file() call is not running. Do I need to rename that function with the field name of my cck filefield (field_media) ?

And why does it have to be phptemplate? Could the name be mytheme_preprocess_fieldfield_file() ?

Thanks for the post. It's helped alot. Just need to get it working now ;)

Eric Mckenna's picture

!DOH

I forgot about the bug that requires you to have a template file present before the template preprocess function will run.

And for those using the Jq module use

<?php
   
// ...
   
$variables['classes'] = 'filefield-file-audio';
    if (
module_exists('jq')) {
     
jq_add('jquery_media', array('media class' => '.filefield-file-audio a', 'media height' => 20, 'media width' => 200));
    }
  }
  else {
 
// ...
?>

Ian's picture

Yes!

Thanks Eric,
that Jq module code change in the template.php file worked for me. Nice one. And thanks to Aaron. Delighted to have got this working.
Ian

Ian's picture

Re D6.5 - forgive my ineptitude

Apologies for ineptitude of my previous post. On better examination I am seeing the soundfile, but it's still displaying the player at the original size specified in the Jquery Media settings.
In the head of the relevant page source, I'm seeing:

if (Drupal.jsEnabled) {
$(document).ready(function() {
$.fn.media.defaults.flvPlayer = '/cfj/sites/default/files/player.swf';
$.fn.media.defaults.mp3Player = '/cfj/sites/default/files/player.swf';
$('.filefield-file a').media( { width: 320, height: 260 } );
});
}

I'm assuming that the last line should read something like:
$('.filefield-file-audio a').media( {width: 200, height: 20} );

Ian

aaron's picture

That is inserted by the

That is inserted by the jQuery Media module, which means at least it's being activated for that page. However, those are the default settings specified at Administer > Site configuration > jQuery Media (admin/settings/jquery_media). You don't want to change that if you're using the module to display both audio and video on the site, as specified in this blog entry.

Did you enter the code from step 4 into your theme's template.php file? Did you remember to change custom_audio_type to your node type? Did you create the filefield_file.tpl.php as specified in step 5?

Ian's picture

Yes, I've inserted the code

Yes, I've inserted the code into template.php and have changed the node type to the correct type (I've checked that it matches the relevant entry in the node_type table in the database). I've also uploaded the filefield_file.tpl.php file into the theme directory.
Since then I've compared the 2 page source codes generated - one without the theme changes and one with the changes.
The only difference I can see between them is in the following line.

With the template changes - this page only displays the file as an attachment. The player doesn't show up:
<div class="filefield-file-audio clear-block">

Without the template changes - this page plays the file at the default settings size:
<div class="filefield-file clear-block">

Thanks for your time.

Ian

Ian's picture

D6.5

Dear Aaron,
I don't know if you ever get to revisit this stuff, but I thought I'd give you some feedback (while I await delivery of your book, which I've pre-ordered ;) ).
I've just tried this solution - which is exactly what I'm looking for - on a test site using Drupal 6.5, FileField 6.x-3.0alpha5, CCK 6.x-2.0-rc10 and Jquery Media 6.x-1.3.
Unfortunately it causes my sound files to simply disappear from the node. All the field class divs are no longer there on the page source.
If you or any of your readers have any thoughts I'd be interested to hear them.
All best,
Ian

Lopo Lencastre de Almeida's picture

Just a note

Take a look at Anarchy Media Player at http://an-archos.com/anarchy-media-player/
Not directly usable here but many ideas can be borrowed.

1,
Lopo

aaron's picture

It was brought to my

It was brought to my attention you can't use this particular solution within a single node type. A better, more generic solution, would be to examine the file's extension (quick hack) or getID3 (more robust) and channel after that. It would then work for any audio field, without the $node->type hack. I'll try to write that up soon.

Matt Petrowsky's picture

A cool feature would be...

Aaron, a cool feature for jquery_media would be to optionally use the jquery metadata method of adding dimensions and other values about the media and you could also add optional fields into the admin settings area of jquery_media. Stick with me here.

The optional fields one could set would be 'named cck field references' created by the user/admin for the content type. For example,

At admin/settings/jquery_media you would add a new form group titled 'Media Attribute Values'. Within that, you would provide some standard options for setting WIDTH, HEIGHT and DURATION references. The admin would input the names of the cck fields which contained those values (e.g. field_media_width, field_media_height, etc.) - provide these were optional fields on that content type.

Of course, with files stored on the local server, adding a getID3 dependency would make things even nicer when you could specify optional PHP code to simply extract these values from the file directly.

Taking that one step further for performance, you could provide mapping of the getID3 values acquired into the cck fields (which could be hidden) so they are persistently stored and you don't have to keep hitting the file.

Taking this a step further, which is my goal for GotDrupal.com is to use filefield's post upload function to acquire the media attributes (width, height, etc.), store them, then copy the file to Amazon's S3 and use themeing to rewrite the url to point to the S3 version of the file.

Wow! would that be cool!

Does this sound reasonable for jquery_media or am I way off track?

aaron's picture

This is a great idea! We

This is a great idea! We could even use form_alter to stick them right in the file field's form. As far as getID3, it's on my back-burner to expand that module's API to store information automatically, so individual modules don't need to bother. This is yet another case use for it.

I think I'll implement this next month, after my book's out. Thanks!

Doug Holton's picture

Let people control the size of each clip.

A better solution is to let people (optionally) specify the width and height of each video or audio clip they want to display, rather than assuming each video should be shown at the same size. I hacked up video_filter (which supports width and height parameters) to insert jquery media code using random ids for each media clip being displayed.
There are some videos where 400x400 or whatever is fine, but other videos (like screencasts) you may need much bigger sizes.

aaron's picture

I was already in the process

I was already in the process of allowing per-node overrides, which would just about do what you want. I think it's important to also allow standard dimensions, as many editors don't want to have to think about how to best fit a clip on a page.

I like your video_filter ideas. Your solution at http://www.aaronwinborn.com/blogs/aaron/inline-video-with-jquery-media#c... looks good.

The Society for Venturism has chosen me as the recipient of its charity for this year, to hopefully offer me cryonic preservation when the time comes. And this month, Longecity, an excellent forum for the discussion of issues related to extending the lifespan of humans, has offered up a matching grant of up to a thousand dollars to help out! So help out! Please.