Media Player

How to Use jQuery Media for Audio & Video

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

Splash Screen for Media Player!

Drupal Media Player. Splash screen.

A picture is worth a thousand words.

(Image credit reway2007)

My Plans for August

Sadly, my plans for August don't include Drupalcon Szeged. Already too much travel this summer, and the dates conflict with a training my partner is doing, so that would be hard on our 4yo.

Back in June, I made a list of personal project plans, so I figure I'll revise that list for the rest of the summer.

First, the status report on the projects from June:

  • I finished writing Drupal Multimedia! And we're about half way through the editing process. The book is scheduled to be published in September, and can be pre-ordered now.
  • The Embedded Media Field port to Drupal 6 is still in process. It's ready for testing on new installations now, but I still need to write an upgrade path from Drupal 5.
  • Morbus Iff and I have made strides with the engine for 5 Second Game. The module allows character creation and the combat engine is nearly ready for play.
  • Except for some experimentation with audio metadata, I ended up not really working on GetID3. I'll probably end up waiting till the fall to work on this, unless I get new inspiration.
  • I haven't written any tutorials yet, but hope to do that regularly once the book has been published and I have more free time available.

New projects of mine in progress and on the horizon:

That's all for now.

Home-Brewed Drupal Media Player in the Works!

Here's a sneak peek of the new flash Drupal Media Player, developed by yours truly with OpenLaszlo!

Obviously, it's still rough on the edges, and all the options in the theme function aren't hooked up yet. Although it works already (after a fashion), don't use it yet unless you're willing to suffer the consequences.

When it's done, this module will come with its own player, fully GPL'd, and will support others out of the box as well, such as JW Flash Media Player and Wimpy. But who's going to want those anymore?

The module adds theme functions and a simple API that should be easily usable by other media modules, such as Embedded Media Player, jQuery Media and whoever else wants to jump on board. The other modules won't need to worry about where a particular player lives or how to invoke it; the theme functions provided will be robust enough to handle player colors, sizes, icons (including placement, layout, and other customization options), splash screens, playlists and more. Administrators will be able to override any of the defaults, including player of choice. Additionally, it'll be easy enough to invoke manually as well:

print theme('media_player_player', $filepath);

And best of all, since it's in OpenLaszlo and GPL, with the source included in the module, it's easy for developers to modify even the player, without even needing a Flash IDE. (The whole thing is created with an XML.)

Kudos to EclipseGc for nudges and encouragement to get this project going!

Next on the list: volume controls, playlists, override color/logo/splash options, settings pages, pull in the other players, youtube/blip.tv/other provider support, tie into other media modules

(Cross-posted at gdo.)

Syndicate content