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
Thanks for another great video! You have a talent for explaining things =)
Great screenie, Sean. Pleasure to see a good overview and a unique solution. Very expandable since CCK is at the heart.
These are exactly the type of sollutions I love in drupal! I'd like to see the expanded version also using media mover. Same thinking as behind the whole imageFeild -> imageCache solution. I don't like big monolithic modules as these combinations are so much more powerfull. Of course the problem is that people need to be taught these recipies as opposed to downloading a "Everything you need to do Video in one place module" So great work in getting the word out about this one.
Thanks man!! great stuff
Very useful video indeed. Thank you so much.
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?
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.
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 ;)
thx for your great work again. Keep on doing that and i am going to be a drupal prf soon;)
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.
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.
You just made my life so much easier. Thanks for the awesome screencast.
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.
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
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!
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.
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.
Very useful video again, thank you.
I had someone asking for a site that would host their video clips (they're a film production company) and this seems like the perfect solution.
This is slightly off-topic, but how does one handle the bandwidth issues when hosting lots of videos on a site? I investigated Amazon S3, but it seems the bandwidth costs are quite high. Could they host the clips on youtube or blip and still use filefield or would that require a different module?
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
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!
Hi,
Please could you run through the steps on how to install the player and configure it?
Thanks
John
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
very clear, and actually an entertaining programming video!
That was great! This really helped me a lot, I'll be sure to use your site in the future.
I enjoyed the screencast and am subscribing to your RSS feed. I hope you can pump more of these out.
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?
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?
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.
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
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!
U r welcome! Continue doing the good deed! :D
looking forward to seeing more helpful video tutorials from you!