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

Very nice blog post. I certainly love this site.
Thanks!

Dear Sean,

Your tutorial is terrific and I'v ebeen able to set it up for a teacher training website that i'm setting up.
I have one question : how do you add a poster image on the black screen once the page is opened before we click on play ?

I know how to do it on my internal school wbesite communication on wordpress but could not find the answer for your way of posting videos on drupal.

thanks again for your great help.

Exemple wordpress poster image : http://eifbali.com/images/stories/SKITCH/VIDEO-POSTER-IMAGE-20081010-162...

You've put together an awesome tutorial of a few modules that will make everyone's life that much easier when working with media presentation. Now I'll be spending the next 30 minutes+ checking out the rest of your informative site.

Thanks!

Thank you for the excellent video. I think I have set things up per your recipe. My problem is the files won't upload. My php settings are fine. The file extensions are correct. The upload process starts and continues but the file doesn't transfer. I must be missing something basic. Thanks for any help.

I had the same problem trying to use FlashVideo.

I'm having an issue with JQuery Media in Safari 3. Safari automatically downloads the videos instead of embedding them. I've only just started tracking the problem, but I wanted to let you all know about it.

I've reported the issue to the fine folks who maintain the JQuery Media Module. I'll let you know if I find any more useful information.

hi all! i just use the jq_media+filefield+cck+jw flv player and i copied all steps from New Video Tutorial by Sean Effel from Drupal Therapy! but no fullscreen of my video. please help me. thx

Like the others said before me, this is a great tutorial. Thank you.

How about tracking the number of views -- kind of like YouTube provides? Would this work? http://drupal.org/project/download_count

Drupal's statistics module can track page loads already, thats a part of the solution. To track proper downloads you would first have to sort out a way to download the video file at all. This screencast didn't cover any method of exposing a download option for users, but that doesn't mean its not possible.

thank you for this tutorial!
one question, how can I add a preview for the video, is there a way to create it somewhere or to load an image?

As for preview and thumbnails, I have used Imagefield and Imagecache to post thumbs of the video. Its a manual process, I don' t know if there is an automated thumbnail maker for jQuery Media yet.

Can't the filefield go in the story or blog content type? If not, why not?

Also looking for help configuring the player, the screencast doesn't cover that ...

Note that for the moment you've got to do this tutorial with:

filefield-6.x-1.0-beta3.tar.gz

as the latest version of filefield (last time I checked anyway) doesn't have the necessary widgets?? Please reply to this if you learn otherwise.

Of all the instructions i have read about this video module in Drupal (after sitting and staring on my monitor for more than 3 hours) and still totally clueless, after watching your video, I can say you have explained everything very smoothly! Thanks for your help. Now I can relax. You made my day! :D

Shopgirl11, thanks very much for the feedback. Glad I can be so helpful!

Thanks for the helpful video. It is explained really nicely.

thank you for this tutorial.
one question, how can I create a preview for the video in filefield? Is this possible

U r welcome! Continue doing the good deed! :D
looking forward to seeing more helpful video tutorials from you!

Once a create a new node, it doesn't show either a link to a video or the video at all. I followed the tutorial to the T. I configured jquery media as shown, and still nothing shows up when trying to upload a video. The movie type is a .mov and i placed it in the allowed upload file types. I ma in Drupal 6.I only have these modules enabled just as the tutorial. any ideas?

I am unable to get this working in D6. Once I create a video content type and submit it, there is no link to the actual media and does not play. Any ideas?

I enjoyed the screencast and am subscribing to your RSS feed. I hope you can pump more of these out.

That was great! This really helped me a lot, I'll be sure to use your site in the future.

very clear, and actually an entertaining programming video!

The sizing of the media player does not work properly.

My videos are 640x480 AVI. I set the dimensions accordingly, but it plays the video smaller, with huge black bars around the image.

I tried leaving both fields blank, one field blank, or tweaking both to compensate... Nothing worked. I always get the black bars.

This is happening in both firefox and IE.

Please advise.

I solved my video sizing problem.

For .AVI .WMV vids played in FireFox, the height must be set with an extra +46 pixels to compensate for windows media player's toolbar.

If your video is 640x480, you must set the dimensions in jquery media's admin menu to 640x526.

IE7 displays a larger media player toolbar than Firefox and the height must be adjusted even higher, to 640x544. Once you do this, the black bars return to videos played in Firefox.

Of course the dilemma is, do you make the dimensions perfect for FireFox or IE users?

I would be very happy to see the height issue between browsers fixed in the next release. Also, support for the JW-WMV player would be fantastic as well.

I got some display problem with filefield

Let's some screen captures

some fields are mess up
http://i108.photobucket.com/albums/n16/adrianmak/Snap1.jpg

there are many empty rows in manage fields
http://i108.photobucket.com/albums/n16/adrianmak/Snap1-200.jpg

http://i108.photobucket.com/albums/n16/adrianmak/Snap2-81.jpg

I configured jquery media as shown, and still nothing shows up when trying to upload a video. The movie type is a .mov and i placed it in the allowed upload file types. I ma in Drupal 6.I only have these modules enabled just as the tutorial. any ideas?Free Sonic Games

hi

this was a great help for me. very detailed and well edited. you have a good presentation style. i just have a question...

where does the player have to reside? in the folder where filefield is putting the actual media or in the jquery media module folder?

i have added the mdoules as described, but they show up still as a clickable link which then opens a new page and they play in the center. no matter what i tweak, im stuck at the stage of the video where you see the media, but its not being sniffed out. to make a long story short, where does the player have to reside so that it sniffs out the filefield embedded media.

thanks a lot sean...i look forward to more therapy!

Joe, Did you get it working because I have the very same problem? No matter what settings I use or move the player to, I get no video playing - just the link which opens in another window. I'm getting what I think is the right js code in my html source for the page, but doesn't seem to be providing this info to the in the body of the page. I've been almost two weeks on this (part time) and am about to give up! It looked so simple in the screencast and just what I was looking for, but now ... Can anyone please provide an answer?

Joe, Cybergeggy, others: Very sorry to say that I don't have any added insight here either.

I've started an issue on the jQuery Media project page with some of your descriptions, please go there and describe your issues as clearly and with as much detail as possible. The issue tracker is where the developer(s) who made the module usually lurk and are so much more likely to have insight. Let me point you there:

JW FLV Player config issue

Ditto with Joe. jquery_media doesn't seem to kick in so the filefield just shows my mp3 file. It seems that installing this module and the players outsmarted me. jquery_media-6.x-1.3 I tried putting the player in various places but couldn't get it to work.

To those not getting a link, make you sure check off "FULL HTML" when creating a video node.

Hi,

Please could you run through the steps on how to install the player and configure it?

Thanks

John

Great tutorial Sean. This is such a great solution.
I have a question maybe someone can assist with. Using JW Player and uploading mp3's, but it's creating a large black video area that is not needed. Don't want to make default size changes in the jqmedia area to w=400 h=20 because that will affect things that we do for video files.
Can someone point me to what I would need to do to make the player adjust for whatever is being called - mp3, flv, mov, etc.?

Serrato, I don't have any advice on that point - next best thing is to create an issue on the jQuery Media project:

http://drupal.org/project/issues/jquery_media?projects=238348&states=1

This is delightful! I've been using variations on this technique for the past nine months or so, and it works great. It is a great recipe, in general, for progressive enhancement.

Note: The jQuery media plugin has a few bugs which I've been meaning to submit back as a patch to the project.

I'm migrating our college website onto Drupal and used your method for our video testimonials page using a list view.

It works as intended except for some reason the DIV containers for each list item aren't coming out properly. In my list template I tried putting a 20 pixel spacer between videos (by putting an image spacer at the bottom of the template) but it has no effect. When I look at the DIV's using Firebug the container size isn't big enough to hold the entire video and two 350 pixel tall videos end up in a div container about half that size. Dunno what's up think I'm going to have to use some HTML tables in my list template.

I did make two minor tweaks - I put a display: none on the CSS class that outputs the media type icon and I also removed the javascript inside the jquery media that outputs the filename.

Thanks for the vid!

Hei, how to remove the the javascript inside the jquery media that outputs the filename?
cause i need to remove both file name and the icon

Hello...thanks for the screencast...this works like gem..but now i have a question...does the video always have to be played in quicktime player...can't i say use vlc player instead?...

You can change the player chosen for a given format, although it currently requires a manual call to the jQuery Media plug-in. See http://malsup.com/jquery/media/ for more instructions; in this case, you would need to call the jQuery function $.fn.media.mapFormat. Unfortunately, there is currently no UI element for this built into the module; maybe I can add that into the next release.

Great tutorial as always! Just a few short months ago, setting up a similar interface that would work as smoothly would have easily taken an hour or more, assuming the developer had a good understanding of the necessary modules. And even then, it was difficult to get working properly.

Now you've done it publicly in thirteen minutes, and that's while you're taking the time to talk about it!

Other benefits of using this fantastic combo: it's automatically standards compliant (even degrading gracefully to a link to the media if someone has javascript turned off); works with flash video and audio just as easily; supports various flash video players out of the box, such as the JW FLV Media Player or Wimpy; and lots of other advanced features. And it's light-weight to boot!

Thanks for the excellent tutorial! I look forward to seeing more in the future.

Aaron

Holy shit, I had no idea that stuff like this can be done with filefield! And I'm co-maintaining that module :P

Awesome video, as always :)

LOL. Thanks for the note, Jakob.

You just made my life so much easier. Thanks for the awesome screencast.

Thank you very much!

Your screencast is the best of them I have seen ever.

You explain Clearly, and neatly.

Thank you so much.

I look forward to seeing more screencast from you.

thx for your great work again. Keep on doing that and i am going to be a drupal prf soon;)

Yeah, yust succeedd the other two screencasts and was thinking: damn, there could be a new one now and took a quick look at your site. There it as, new and fresh.

thx, keep on doing that, and i am going to be a Drupal prof soon ;)

True-ly therapeutic! Great job Sean. This Drupal screencast also has the best video backdrop ever ;)

I'll prescribe this video to my friends --that's for sure.

Thanks for the great screencast.

Your example is using Drupal 6. Am I right to assume there is no way to do this with Drupal 5?

Yes, it will work just fine for D5 - I learned this recipe in d5 first. Aaron actually ported his jQuery Media module to 6 when I threatened to screencast about it, so thanks to him for both versions.

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