Home

Combining Audio and Video

Submission of a form on this page has been disabled as you do not have JavaScript enabled in your browser.
Categories:

How to Use jQuery Media for Audio & Video

Thu, 09/11/2008 - 21:16 — aaron

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)!

Syndicate content