Home › Blogs › aaron's blog

Inline Video with jQuery Media!

Categories:
Fri, 08/29/2008 - 20: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.)

Jacko

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!

Bookmark/Search this post with:
  • Delicious
  • Digg
  • StumbleUpon
  • Propeller
  • Reddit
  • Magnoliacom
  • Newsvine
  • Furl
  • Facebook
  • Google
  • Yahoo
  • Technorati
  • Icerocket

Comments

Sun, 09/07/2008 - 08:22 — Anonymous (not verified)

embedded media field question

I am trying to understand the demo on: http://drupalhub.org/videos . Does the plugin embedded media field come with that?

I mean instead of 1 Video or few on the page it goes in slideshow fashion.

Sun, 08/31/2008 - 10:43 — Doug Holton (not verified)

last lines

Sorry, forgot the last lines in that function:

drupal_add_js($js, 'inline');

        return $output;
}

Sat, 08/30/2008 - 19:23 — Doug Holton (not verified)

video_filter hack to use jquery media

Yeah I modified the video_filter module for drupal to essentially do this.
[video:linktovideo] (or a link to audio) will add the css for jquery media to handle the display of the media, plus you can control the width and height of the player box, which is more than most other options can do.

I'll post the code to the video_filter issue queue sometime soon, but here's the main stuff:

Add this in the video_filter_codec_info function in the video_filter.codecs.inc file:

        $codecs['mediaplayer'] = array(
                'name' => t('MediaPlayer'),
                'callback' => 'video_filter_mediaplayer',
//FLV, MP4, MP3, AAC, JPG, PNG and GIF
                'regexp' => '/(http.*\.(flv|mp4|mp3|aac|jpg|png|gif|mov))/i',
        );

and this function later on in the file:
function video_filter_mediaplayer($video) {
$link = $video['codec']['matches'][1];
//generate unique id for this link:
$id = chr(rand(65,90)).chr(rand(65,90)).chr(rand(65,90)).chr(rand(65,90));
$output = l($link,$link,array('class'=>$id));

$js = "
if (Drupal.jsEnabled) {
  $(document).ready(function() {
    $.fn.media.defaults.flvPlayer = '/mediaplayer/player.swf';
    $.fn.media.defaults.mp3Player = '/mediaplayer/player.swf';
";
$js .= "    $('a.".$id."').media( { width: ".$video['width'];
$js .= ", height: ".$video['height'];
$js .= $video['autoplay'] ? ", autoplay: true" : '';
$js .= "} );";
$js .= "
  }); 
}
";

Change the "/mediaplayer/player.swf'" path to the path where you have the flv mediaplayer.

Fri, 09/12/2008 - 07:49 — aaron
aaron's picture

Use CSS ID for jQuery Selector

Great idea, Doug! To make the javascript faster, you could use css id's rather than classes for the jquery selector: $output = l($link,$link,array('id'=>$id)); and $js .= "    $('a#".$id."').media( { width: ".$video['width'];.

Sat, 08/30/2008 - 07:59 — aaron
aaron's picture

Filter?

Maybe I could add a filter so it's just simply loaded into content automatically as needed...

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <strike>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options