Home

Tutorials

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

Categories:

Inline Video with jQuery Media!

Sat, 08/30/2008 - 01:21 — aaron

Here's a two-step formula for simple inline video, assuming you have jQuery Media installed on your site, doing both of these configuration steps from Administration > Site configuration > jQuery Media (at /admin/settings/jquery_media):

  1. Open the Node types field set and check the node type for which you wish inline video.Check off Node Type
  2. Open the Classes field set, and enter .node .content a in the Media class text field. (You can separate classes by comma if you want to keep existing class invocations.)Set Media Class

Then just add a link to a video inline to your content. Doesn't matter if it was uploaded with the node or through FTP. (The second step assumes you're using the Garland theme, or another theme that uses that CSS class designation. You might need to check the node in FireBug if you're not sure.)

Notes: This method is easy, though admittedly a bit heavy-handed. The down-side is it will be invoked regardless of whether the node actually contains a video link (fortunately it's a lightweight jQuery plugin). If you want more fine-tuned control, you can skip the first step, use a PHP filter, and just invoke it manually from in your node, using jq_add('jquery_media') (assuming you have the jQ module enabled; jquery_media_add(); otherwise). (I don't actually recommend that, because of all the security issues involved. Just stick with the first method.)

The cool thing is this will work with pretty much any media player, including the upcoming Media Player for Drupal!

Categories:

Magic Local Video Recipe!

Sun, 07/13/2008 - 23:39 — aaron

If you haven't already, make sure to check out Sean Effel's latest Filefield + jQuery Media screencast! As was his earlier Feed API + Emfield video tutorial, this is a joy to watch: he does things in thirteen minutes that took developers hours or more to do even a few short months ago, and that's with a running commentary! By the end of the video, you will have learned a simple way to upload a video (using the light-weight File Field module) and have it properly displayed without any messy configurations or external libraries. Plus, as the recipe uses the jQuery Media plug-in wrapper module, the display will be cross-browser compliant and accessible.

Next on my plate for jQuery Media is to have it be easily added to nodes on an individual basis, so that a media clip could be linked inline and automatically turned into an embedded display. Additionally, I would like to make it an option for Views as well, perhaps as an additional setting. (Although even without that, my upcoming book Drupal Multimedia, to be published in September, goes into some detail about how this can already be done, to create powerful video and audio playlists.)

Categories:

Map a Video Feed!

Fri, 05/02/2008 - 14:31 — aaron

Sean Effel from drupaltherapy.com recently created an excellent Feed API + Emfield Recipe video tutorial.

He shows you step-by-step how to take a video feed from Blip.TV (or any other provider supported by Embedded Media Field) and aggregate it on your own site, videos, thumbnails, and all, automatically turning the remote videos into nodes on your site, ready for theming, comments, and anything else you want.


See the Video!

Syndicate content