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

how to display it on views modules????

After reading all the comments, I finally got this to work in Firefox 4. But it doesn't work in IE9. Could it be a caching issue or something else?

I have followed the same steps as in this video. But when I choose a file and click the upload button, an alert box appears and display the error like

An HTTP error 0 occurred.
/drupal_videos/filefield/ahah/video/field_filefield/0

I don't know what is the problem. Can any one solve my problem???

You need update filefield module

Thanks for video.
msprojectegitimi.com

I just followed the screencast and I have a problem

I don't know that its the JW-player that played my video's.
When I upload an .avi, I see Windows Media Player and if I upload an .mov, I see a Quicktime player
in my drupal website on my localhost.

Can anyone solve my problem?

I have the same problem

I just followed the screencast and I have a problem

I don't know that its the JW-player that played my video's.
When I upload an .avi, I see Windows Media Player and if I upload an .mov, I see a Quicktime player
in my drupal website on my localhost.

Can anyone solve my problem?

I just followed the screencast and I have a problem

I don't know that its the JW-player that played my video's.
When I upload an .avi, I see Windows Media Player and if I upload an .mov, I see a Quicktime player
in my drupal website on my localhost.

Can anyone solve my problem?

Would this work for uploading a PDF file and automatically embedding it into the page, opening it with the user's pdf viewer?

Like it is told multiple times, without a player you just get the download link.
After following the instructions in the video (or before) you download a player, e.g. the JW Player (jw-flv-player)
You download and unpack it into your drupal site, e.g. in /jwplayer

Now you change the jquery Media settings:

Classes / Media / Media class: .filefield-file a

and:

Default Players / Flash Player (flvPlayer): jwplayer/player.swf

Sorry, my fault, it's just not running on MY pc. Some misconfiguration i guess ;-)

There is no video.

hi all,

this tutorial didn't work for me in the beginning. all i had to do to get it to work is that:

go to "admin/settings/jquery_media" then
1. under "media" sction, change "media class" to ".filefield-file a"
2. download jw-player from here "longtailvideo.com/players/jw-flv-player/", upload to your site, then add a reference to the player under "default player" section.

that's all :).

Ruudi33...

Thanks, that did the trick. It's been frustrating getting video to work with drupal, so I appreciate the help.

not working at all just showing link to video thanks anyway

after four hours of random digging through google page listings, I made this thing work.

First off, you have to install jw player module, found on a modules search of drupal.org. Be sure to follow the instructions because it requires a couple of downloads.

Second off, working from a sub directory install and the default garland theme, I discovered by changing the media class it magically started working. Go to Administer > jQuery Media > Classes > Media > and replace ".filefield-item a" with ".filefield-file a" (without the quotation marks).

Bing bang boom I got it working. Hope that helps someone.

i added the .filefield-file a but my video is downloading automatically instead of playing. any suggestions?

How did you get jQuery Media to work with the jw player module? What path setting did you use for the default player in the jQuery Media settings? I can't seem to get this working following any of these instructions.

Thanks!

best sohbet

I just see the link of the video file, a common problem it seems. Nowhere on this site to help with that problem (even though many people keep saying that have that problem)

oh well, guess them and I are just aren't good enough to be helped or responded to.

Thanks for the video. You are a very good presenter.

thanks for this tutorial ... it helps me too much

very well, and how we can configure not view video on (just showing title). and if i click on this title, i will see video in lightbox2 modal window

you are the best dude your video are the best, nice and simple and clean like a water :P

Hi Sean,

Thanks for your tutorial !!!
I just have a question... In the teaser text, you say that "It's a great replacement for the video module" and I would like to know what are the benefits of "Jquery Media" module from the "Video" module ?

Best regards

I loved everything about these videos. They were clear, informative, engaging and useful. Everything, from the presentation right through to the final close out was done just right. Excellent work!

Nice tutorial.

Seems like there can be a couple of pitfalls, and I think I found each.

Thought my problem was with the path to the swf player, but it was the css selector. Either I didn't follow directions (which I am notorious for) or just a difference in versions some place?

My solution was to go to jq media and change the Media class: to .filefield-flie a. Suddenly, the sun came out from behind the clouds and angels singing...

Did I mention this is a great tutorial?

The tutorial is really excellent. I am newbie in drupal and I know certain post link this would help a lot in my CMS sites. Keep up the good work dude. This is one of the coolest things online.

i saw this video tutorial but i still have two problems:
1. although i enabled jquery and jquery media and configure it as in the video tutorial but i still see the link of the uploaded file,
i download JW player on drupal project (\wamp\www\drupal-6.14\sites\all\modules\player\mediaplayer.swf) but nothing change.
another problem: i want to allow users to upload fiels so, i gave the permission to authinticated users to upload files but i cant see the upload field in the user account page.
Best regards

Great Video, thank you so much.

Excellent dude, im from Peru and im makin a site with UberCart, Im a newbieein all Drupal stuff so although I didnt need the Media ScreenCast module, the info on CCK is very helpfull. Thankz Sean

Great! Really helpful video.

thank you. you saved my life.

Thank You Very much
it is very good and useful video
Syrian Drupal Developer

thanks sean!! how about a therapy in toronto?!! :D

You should enable recaptcha module for comments.

I've just installed as per the instructions on drupal 6 and in Safari the media files (*.mov, *.mp4, *.wmv, *.avi) all just download to my downloads folder and open in Quicktime Player rather than playing in the browser. In Firefox they play OK. Tested on three different macs.

Sean:

Thanks for the tutorial. I am a relative newbie to Drupal but not to CMS in general.

Had problems at first with file size. Searching Drupal.org gave the possible solutions as changing the .htacess to override php settings(did not work for me) or editing the php.ini file (This worked) On my host (HostMonster) I am able to place a copy of php.ini in the public_html folder so it can be edited. There are two settings in there that deal with file size. One is upload file size the other is post size. Don't remember exactly but search helped me find the variables I needed to change.

Next I missed the permissions for file field.

Uploaded an AVI file did not get window, tried with .wmv and worked fine. Guess there is no player in browser to play AVI. Will have to check on that, but I use mainly wmv anyway.

Only posted above to help others with similar problem.

Glad I found this site. I have a long way to go to get my video cooking site running on Drupal, but your vid helped a lot.

Pablo Maiorino

Hi my family member! I want to say that this article is amazing,
nice written and come with approximately all significant infos.
I would like to peer more posts like this .

My weblog

Thanks a lot for these very helpful videos.

this helped me a LOT. Thank you so much! :D

For some reason this recipe doesn't work for me at all.

I am using drupal 6.12, and the Garland Theme (modified only the color set to Olivia instead of Blue Lagoon, that's it).

Then, here's the config:

1. jq-6.x-1.2
2. jquery_media-6.x-1.4-beta1
3. cck-6.x-2.2
4. filefield-6.x-3.0
5. JW Player 4.4 (latest)

I have thoroughly followed the turorial several times and configured the Jquery Media to use the player.swf which I placed in my sites/default/files directory.

I have also created the "video" content type, added the upload field, etc , etc ...

When I create content, I upload a test.mov file but after I click Save and want to view it, I am getting a blank page in FF (white with no header ..) it only displays :

Wed, 05/27/2009 - 11:24 — admin

In IE7 it gives me a 500 error.

Strange is that this is happening on my Linux Centos VPS.

I have another Drupal installation on my laptop and use MoWes as a local webserver. I tried it with local installtion too and the error is different.
I am gettin the movie somehow embedded, and it is not resized and I can't use the controls even though I suppose that if I could, it's still a quicktime movie, the player seems like it doesn't recognize it.

I found this Jquery solution after playing a bit with Flashvideo which I actually got working, but this seems better to me, even though it doesn't support thumbnails.

Thank you for any feedback.

Is your site in a subdirectory? I had a problem like this, and I finally figured out that I need to configure the path to the JWplayer differently. Here's my example (using the same modules as you):

The domain to my site was something akin to www.example.org/site1

I put the mediaplayer directory(which was unzipped from JW player download) in my drupal6 folder.

In jquery_media I configured the path to the player as "mediaplayer/player.swf" - no luck - I got a big white box where there should have been media.

Using firebug I saw that the path to the player on the page was listed as "date='/site1/mediaplayer/player.swf?..etc.."

I went back to jquery_media and changed the path to the JWplayer to: "../mediaplayer/player.swf" - now it loads as it should.

This problem is similiar to the cleanURL problem with multisites in subdirectories - you have to add special rewrite rules for each site... took me forever to figure that out. :)

I hope this helps someone!

Best,
Evan

PS. Thank you for the great tutorials, Sean, you were my intro to Drupal media several months ago!

I tried this and it's still not working for me, it just won't use the JW player and instead brings up the quicktime plugin. I even copied the player.swf file to every relevant directory I could think of just to test it.
Anyone got any other ideas?

JW player plays Flash video, not quicktime mov files.

awesome! Thanks!

thank you very much sean! this was a very helpful tutorial. do you know how i can put a poster frame (.jpg) as an overlay to a movie? i was able to play a movie (.flv) in drupal 6 per your tutorial but i could not figure out how to add the poster frame. i'm currently using:
1. jq-6.x-1.2
2. jquery_media-6.x-1.4-beta1
3. cck-6.x-2.2
4. filefield-6.x-3.0-rc1
and i'm using jw player 3.16.
thank much in advance for your help.
-paul

Thank you very much. As clear and straightforward as it comes, as always.

Hello Sean,

Great Screencasts :-)

I dont wanna Upload my Files on Youtube or Blip ...
Rather i wanna host my Video selfs!

Could you tell me how to implimentate the self Hosted
Videos on my Page? I only found stuff about Embedding.

Thanks
Josh

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