Inline Video with jQuery Media!

Share this

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

330, 'media height' => 270)); ?> 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!

AttachmentSize
jacko.jpg10.55 KB
jacko.flv1.36 MB
inline-video-node-types.png11.53 KB
inline-video-classes.png18.97 KB

Comments

vijayan's picture

use views module for display the video but not display

i try to list out the video using views modules but can't display the video

Anonymous's picture

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.

eligio's picture

the demo actually work as a

the demo actually work as a slide show. but i have question, is it possible to play the video on the demo without changing if the cursor is not mouseover? thanks

Doug Holton's picture

last lines

Sorry, forgot the last lines in that function:

drupal_add_js($js, 'inline');

        return $output;
}

Doug Holton's picture

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.

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'];.

aaron's picture

Filter?

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

The Society for Venturism has chosen me as the recipient of its charity for this year, to hopefully offer me cryonic preservation when the time comes. And this month, Longecity, an excellent forum for the discussion of issues related to extending the lifespan of humans, has offered up a matching grant of up to a thousand dollars to help out! So help out! Please.