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.
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)!
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):
.node .content a in the Media class text field. (You can separate classes by comma if you want to keep existing class invocations.)
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!
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.)
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.
very nice
We're considering using drupal for a new electrical business that we are starting here in New Zealand. This has helped cement my ideas about it. Thanks!
I'm having theming problems, could you explain how you themed yours? Mine is here - http://iommo.com/feature and it's really bare bones. Thanks for a great demonstration!
@Danny Concannon, you've never sat beside someone who knew nothing about the things you do, and watched them try to post something/anything on Drupal, have you?
I wish this was available for D6.
thank you so much for posting about this. Amazing mess of modules to do this but awesome recipe! Soooo glad that someone's taking advantage of the new file api in 7 and even in quickly playing with it this is going to make upgrading to D7 a must for us. Sooo much better media integration and sets up for better resource management similar to Apture's simple way of getting web 2.0 content sources into 1 area. Love the way your doing this, keep up the great work.
I may have to look into writing a plugin to suck data in from other sources like Vimeo, Picasa, Scribd.