Training and Development for Drupal

Filefield + jQuery Media Screencast

FAIL (the browser should render some flash content, not this).

If you like this screencast, you can show it by pitching in to a special fundraising effort. (And here's why.)

Here is a fast lesson on one of the many (many) ways of hosting and presenting video on your own Drupal website.

The CCK Filefield and jQuery Media modules are a one-two knockout combination that allow users to upload media files to fields in your custom content types and then play back the media files in the correct player or handler. It's a great replacement for the video module and integrates nicely with any modules that like to do things with fields.

Let this screenie get you started in only 13 minutes, and please drop me a line or leave comments if this is meaningful to you. Also note that the Boston Drupaltherapy workshop on July 25, 2008, is coming right up - if you are seeking excellent training this summer, this is a great opportunity.

This screencast was produced with great insight from Aaron Winborn. Aaron is publishing a book this summer, Drupal Multimedia, which talks about this recipe and many more.

In order to best understand this screencast you should have working knowledge of Drupal including the installation of contributed modules and exposure to the Content Construction Kit (CCK).

Comments

Thank you for grate video.

File size is limited by filefield,
so i would like to know tha way to write
in URL or PATH at.

Any idea ?

I did a clean fresh drupal install with latest version of cck, filefield, jq, jquery media module but not work.
mp4 just show a link,
flv just show a video canvas area

Just as easy as useful! Thank you very much!

Another really useful tutorial, thanks. Couldn't get SWFTools working for love nor money, but your way worked straight out of the box.

Thanks a ton! I have watched nearly all of your screencasts and I sincerely appreciate the help.

Hi Sean!

Excellent screencast!

But I have one question: Is there a possibility to have different size settings for audio and video files. At the moment with the standard settings I have an area of e.g. 400x300px for audio files and I just need the control bar ...

Best regards,

Christian

Hi,

.mov files play correctly. .avi files do not play at all. the windows media player is loaded in the browser (both IE and Firefox) but when clicking play, nothing happens. any idea?

9yk5x3oux1izfihj

Hey Sean,

Thank you for the quick and informative screen cast! The way you presented it was complete and informative. Right after watching I downloaded the modules you suggested to give it a try with great joy and anticipation.

Now, I need therapy as filefiled forces PHP 5.2+. I'm running on a RedHat EL 5 server. The current level of PHP for this level of RHEL is 5.1.6 and there is no released code from RH to move to PHP 5.2. So it seems that your simple solution it driving a change at the os level that I do not have the ability to make. I recommended upgrading PHP to my hosting company -- they say they only support configurations of RHEL that RH supports.

Please don't get me wrong here. I think you are doing a great job with the screen cast -- it just doesn't work for me. It is really too bad that filefield is driving the need for PHP 5.2 ahead of RH delivering and supporting this level. It looks like I need another solution for playing an MP3 file that integrates with CCK and Views. Any ideas?

Thanks in advance for the therapy!! Greg

Greg, it's not just Filefield that is driving the move to PHP 5.2, but the entire Drupal project! Drupal 7 will be a PHP 5.2 only release. Read here for more:

http://drupal.org/gophp5

I would recommend you consider moving hosts to a company that can see the future. Unfortunately, moving hosts is a crappy job but we have come to accept this as part of the lifestyle, read here:

http://drupaltherapy.com/node/53

Hi
I have jq media and JW Player working fine with one filefield cck flv, however, the formating is howfull with an icon of the file and a name. Another problem I have is how to put two or more files in a filefields and showing them up in the player with a playlist. The only problem I see is I can't set two files to open in JW Player and xspf playlist doesn't work eather, as xspf_node_playlist has an installation erron on line 55. How can one integrate JQuery Media with CCK and set JW Player to show up with a playlist of files in the same node.
Things get worst when a user has or wants to put a video in a percise place.
How about a tutorial on that?

Thanks in advance.
Nuno Ribeiro

As far as I know, multiple files in the same field are not supported for playback in any of the jQuery Media solutions I know. By that I mean not supported out of the box. If there are any hacks or tricks to this Aaron Winborn would be the best resource. Open up an issue at the project page: http://www.drupal.org/project/jquery_media

oh hai! ily! thanks for a GREAT informative screencast! can't wait to put it in motion!

I know some had trouble making this recipe work. I did as well for a day or so. The primary problem for me was related to permissions for all users for the filefield that I created. Simple but frustrating when new to drupal.

Secondarily, determining the appropriate player to use and its web path location trouble me for a bit. The player ended up in:

(webspace root):~/_drupal-6/mediaplayers/JWplayer/(all the files in JWplayer)

and in JQ media module settings default player as:

mediaplayers/JWplayer/player.swf

You're video really helped me get the features I've been looking for. I'd like to thank you for your great and hard work, if it weren't for this, I'd still be clueless as to what to do. Kudos to you, keep up the great work of helping and assisting others:)

I'm having a small issue, everything seems to be fine but I can't get the size of my video to go beyone the "current limit of 2MB" I followed as it stated and everytime I save the configuration, and go to Create Content, then Videos, the size is still 2MB. I'm not sure if I'm doing something wrong, or maybe there isn't an issue at all and I only have the option of uploading a 2MB vid. Can you offer any insight please?

The 2MB limit on your video file is not a Drupal problem, it's actually a server problem. It sounds like your web host has set a "file upload limit" on the server side and you may need to contact them to change or raise it. The real bummer is that sometimes shared web hosts are unwilling to change that limit because it will take effect for all 5000 clients on the server. Sounds like a phone call or trouble ticket, I'm afraid.

Thanks for the quick response, I will surely look into that, I guess in the meantime, I'll just have to deal with it. Thanks again:)

I have implemented the implemented this recipe and it works well. The only issue I am having is getting FLV files to be recognised as media, it just displays them as a code file.

How do I get FLV’s to display?

Thanks.

Adrian

Nice.. it helped me sort some stuff out that I have been missing..

hai ,

i tried to use this jquery + filefield thing in drupal with the version of 5.x thing ,i install all the modules and while configureing i get an error like this as follows:

warning: Missing argument 2 for xspf_playlist_flvmediaplayer_file_use() in C:\wamp\www\learn\modules\xspf_playlist\xspf_playlist.module on line 264.
warning: Missing argument 3 for xspf_playlist_flvmediaplayer_file_use() in C:\wamp\www\learn\modules\xspf_playlist\xspf_playlist.module on line 264.

i don't know how to resolve it.
it also shows, sorry , you need to install flash player,
but i already installed flash player.
any solutions please, reply me.

Two thoughts. Make sure the path to the media player is set properly in the jQuery Media settings. Second, the screencast is for Drupal 6, not Drupal 5, so I can't promise that all the configuration steps in this cast will work for D5. Double check the installation instructions that came with the D5 version.

First I tried this method on an already installed drupal 6.9 install.. didn't work.. I just get the link displayed.. so JQ media doesn't load I think...

PS I used JW player.. and did set the path.. but alas.

after trying everything.. I installed a fresh 6.9 with only drush, cck, JQ, jquery_media, filefield and the JW player...

the same thing.. just the link... so I have no clue why this is... it's on a fresh drupal install... filefield

The only thing I set was a width & height in jquery media and I set the path for the JW player.. too bad I dont get any errors for troubleshooting!

HELP?

If you have enabled the content permission module in CCK, check the permission access. It seems permissions access needs to be granted for all users for the specific file field in permissions.

Also make sure your player is installed in the correct location at your with in the drupal root directory. (not as subdirectory ie (sites/domain.com/player) as you might be temped with a multi-site install.)

It sounds like you haven't enabled that content type to display the movies URL as a media player instead. You set this configuration in the jQuery Media setting area, select the content types that you want jQuery Media to work on. From the top of my head, thats the only advice I have.

thanks for a respone Sean.. I rechecked everything again.. and again.. and again...

the advice you give me is good but actually I'm not that n00b to forget such a thing ;) I did enable it.. I even tried to force it to work by adding specific nodes to the field below the check boxes for node-types.. but nothing..

by checking page source I can see it loads the java scripts... I was dumb enough to not think of that before..

if (Drupal.jsEnabled) {
$(document).ready(function() {
$.fn.media.defaults.flvPlayer = '/drupal6/mediaplayer/player.swf';
$.fn.media.defaults.mp3Player = '/drupal6/mediaplayer.swf';
});
}

//-->

The last thing I can think of is that it doesn't go into that if??

Let's try to isolate the problem further. jQuery Media will work without the mediaplayer application, so lets remove that from the equation. With the media player active, your browser will determine which helper application will launch the video file. Do some tests with the most general format of video there is - quicktime or mpeg or something.

If this doesn't lead us to a solution then I would recommend opening up an issue at http://www.drupal.org/project/jquery_media. There are more people watching that venue than there are here.

Thanks much for the tutorial. The video was well-made, concise, and high quality. Much appreciated.

Fantastic video, really helpful and get me going!

One quick question. I like to work in m4v files, creating them in iMovie under the 'mobile' setting. The files are small and easy to work with. Is there any way to be able to use these files too?

Thanks!

Hey your a graet man, these are the best videos if seen for drupal.
Wich you keepgoing on with them, makes understanding Drupal much more easy. Especially understanding the how moduls work together.

Thanks a lot

George

Hi, I’m new at drupal and this video was exactly what I needed. I followed all the steps and it worked just fine.

The thing is that after I log out from my drupal account, the video does not appear. I have been reading a lot and it seems that I need to get a media player.
I was looking for information on JW FLV Media Player but it seems not clear for me how to install it on drupal. Does anyone have a video or written information about it?
Is there any other player easy to install?
Please, help me!!

My drupal version is 6.8

Hey! This was an awesome tutorial, thanks! My husband works with Drupal and he jokingly told me to figure out how to get a video on a site, because I don't know anything about drupal or programming. With only minimal help from, he was pleasantly shocked (surprise really doesn't do it justice) when I showed him the site with a beautiful video on it! So Thanks!

have you tried using jquery media plugin with thickbox? Can't see to get it to work.

Awsome! Thank you so much for sharing this!
I'm going to test it right away!!

Hey boringkid,

My quick look on Drupal.org turned up this module. It's not officially released but it could get you most of the way with providing copy-able embed code of your Drupal nodes.

http://drupal.org/project/embed_widgets

Good luck!

Hi Sean,
First thanks for a fantastic screencast, it is tough starting out with drupal etc and sites like your mean so much when you stumble across them (light enters the room angels sing etc etc)

I love the set up but really want the content we add (out own video and audio) to be embeddable on other sites. I have seen this function on loads of media players and indeed on our own (old and dysfunctional site)

Is there any way to get either the player or a separate field to generate the embed code needed for that file. Have found loads of forums and tuts on getting feeds in but can't find any on getting it out. In my mind I see something like the rating flag field. Or can it be done via different player such as wimpy rave
Would really appreciate the help am a bit of a newbie and drown easily.

Sean,

Thanks for the simple, clear tutorial. I have another set of sites on Drupal 6 and look forward to setting this up.

QUESTION: Will this work for audio files?

thanks
g

I haven't tested for audio, though all the docs suggest that audio files can be configured in Filefield.

Sean - Thanks for the clear instructions - I just bought Aaron's book and was diving in to try to embed video this way when I ran across the link to here at the JQuery_Media project page. Keep up the cool work - the videocast was very helpful.

Cheers from Robert - Brisbane, Australia

Thanks is probably the best tutorial for Drupal I've seen.
After weeks of trying to get video to work, this is the first one I've seen that did it!

I was ecstatic... until I discovered it only worked with FF, but not with IE.

Any help anybody?

Thanks.

Okay, I'm an idiot.

I discovered the problem was a permissions issue ("view filefield uploads"), once I realized I was logged into different accounts on each browser!

So, I'm much happier...
although autoplay doesn't seem to be working, and I'm having trouble passing other parameters. Will keep trying...

Thanks for a couple of great lessons. As a teacher your clear explanations blow me away...It's especially nice to have the task-based demos: sometimes the infinite swiss army knife nature of drupal, and getting modules to play nicely with each other, is a bit to get one's head around.
Keep it up!

Thank you for another clear, informative AND timely tutorial! THX!

I am looking for tip how to insert flash games to page with CCK. Can you make some video lesson with insert of flash? Thanks. Libor.

Thanks for a great screencast. Much appreciated :)

Chris

Totally cool! It is what I was looking for and I will use it! Putting videos on was never hard, but to do it in an extremely user (site editors) friendly way was never so easy. Excellent!

First a big thanks for weaving all these useful modules together! Between them and drupal its allowed us to create an impressive site in record time.

However, I hope you can help, my goal is to have a grid of 160x120 videos but when I try to create them as a View there doesnt seem to be a way to control the size on JUST this View page.

I think a lot of people would prefer this layout but i've yet to find one and help but feel I'm overlooking something simple...

Thanks in advance,
-Peter
http://www.artscientific.com

Thanks for the screen cast. Lots of excellent information.

Sean, I'm feeling pretty dumb right now. I watched your tutorial and thought, great! Now I have a way to post all of my swf tutorials!

But no. I got filefield working and have uploaded a couple samples, but can't get drupal to embed them on the page for playing. I'm stumped on the JQuery stuff. I put jg and jquery_media into my sites/all/modules directory, but they are not showing on the Admin modules page. I can't enable them, in other words.

Do these jquery guys go in sites/all/modules, or is there some secret other place for them?

Looking forward to your response.

BC

Post new comment

  • 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>
  • Lines and paragraphs break automatically.

More information about formatting options

Most Recent Screencast

See video

Support the Association