Flash Video in Drupal 5: A complete multimedia tutorial.

Posted February 5th, 2007 by travist


When I first started getting very familiar with Drupal about 5 months ago, I realized that, while it was an incredible CMS, it still lacked the video capabilites of todays leading Web 2.0 websites. Although I was very impressed with the versatility of the current Video module, I was not impressed with how incredibly non-user friendly the module was... well, from a non-developer point of view. You see, my goal was to create a user-generated video website. You know what I am talking about. You see them everywhere! YouTube, Google video, AOL video, and I could just go on and on.

The problem with the current Video module is that is was not designed for a User-generated video website. It was only created to allow a web developer the ability to easily upload a video, and display that video. This web develpoer is able to do this by creating a Video node and provide what seems like a thousand different parameters to embed that video in his site. This is where I see the problem... First of all, I don't beleive that a video should be considered a "node". A video is simply a file, and should be treated as such. And Drupal already has a fantastic module that allows a user to easily upload files to any node in the system, the Upload module. What is even more cool about this module is that the user is given the ability to upload as many files to their node as they wish. This got me thinking... This should also apply to video; Why shouldn't I be able to upload as many videos to my node as I wish? If a video is not considered a node, but rather a file, then this would be possible using the Upload module. In fact, it would be stupid easy for anybody creating content. So stupid easy, that in fact, anybody (not just a web developer) can do it. You see where I am going here, don't you. By using this video content philosophy... You would, in fact, have a brand new video module built for the user-generated websites, and as far as I am concerned, the websites that WILL be and ARE the future of the web. I would like to introduce to you, the brand new FlashVideo module which I wrote to do just this... Take a look for yourself! (oh, and I'm not an animal hater... I just thought these videos were heeeelarious!)

I don't think you can do this easily with the current Drupal Video module. But with the brand new FlashVideo module, this is EASY!!!

In this tutorial, I will walk you through step by step on how to create your very own Web 2.0 website with integrated Flash Video. I will teach you how to use this new module that I have written, FlashVideo, and personally show you how easy it SHOULD BE to add Flash video to your Drupal 5 website. So sit back, pop them fingers, and get ready for Web 2.0.
Bookmark/Search this post with:

Step 1: Get FFMPEG
Step 2: Set up your php.ini file for the FlashVideo
Step 3: Get the FlashVideo Module
Step 4: Download a Media Player
Step 5: Set up a Cron Task
Step 6: Create a Content Template.
Step 7: Create your Page!
Troubleshooting the Drupal FlashVideo Module

Step 1: Get FFMPEG
Posted February 5th, 2007 by admin
You will first need FFMPEG... or at least a host that will do it for you.

For those of you who have been digging around on the internet looking for a video solution for your website may have already come accross the name FFMPEG. But what the heck is it? Well, simply put, FFMPEG is a program that will convert any video format to the very common and ever-so-cool Flash format. Go to YouTube and you will see what I am talking about... Every video shares the exact same video player, no matter what video format you uploaded. This is essential to the success of a video website. What is even more exciting about Flash, is that you can put interactive controls on all of your videos.

So, I am sure you are probably asking "Ok that's cool, but how can I get it?!" Well, I was asking the same thing about 3 months ago, when I first started reading tutorials on how to install the FFMPEG binary into your server. Well, good luck! Trying to read instructions on how to install FFMPEG on your server is like trying to read the Star Trek Clingon manual... not necessarily a page turner. So, I decided to look elsewhere, and finally stumbled on a GodSend... CirtexHosting! The second you sign up for an account, you already have the power of FFMPEG at your fingertips, and all for the price of a cheeseburger! If you do not have FFMPEG installed on your server, then STOP HERE... sign up for an account at CirtexHosting for $2.50 / month, and then continue this tutorial after you have done that. If you already have FFMPEG, then you can just skip to the next Step.

Step 2: Set up your php.ini file for the FlashVideo
Posted June 28th, 2007 by travist

One of the most overlooked things when setting up the FlashVideo module, is preparing your web server to allow for the type of uploads required to make the module run... namely videos! In order for the FlashVideo module to work according to design, some parameters need to be set in your php.ini file or the root .htaccess file. These parameters are as follows...

post_max_size - The maximum allowed POST size. Must be greater than or equal to Maximum Upload Size.
upload_max_filesize - The maximum allowed file upload size.
max_execution_time - The maximum allowed time (in seconds) that a script is allowed to run. Needed for long file conversions.
max_input_time - The maximum time (in seconds) a script is allowed to parse input data, like POST, GET and file uploads. Needed to keep large uploads from timing out.

The following shows the recommended values for these parameters.

Recommended Settings for php.ini:

If you do not have access to the php.ini file, then you can easily change these settings in the .htaccess file in the root of your Drupal installation. However, with this file, you need to provide these parameters by using the php_value parameter followed by the parameter name and then the actual value.. These parameters can be specified like the following.

Recommended Settings for .htaccess file:
php_value post_max_size 100M
php_value upload_max_filesize 100M
php_value max_execution_time 1000
php_value max_input_time 1000

Warning: Please consult your hosting provider or a professional before making the Recommeneded changes. Drupal or the writers of the FlashVideo module will not be held responsible for any malfunctions due to this change. Change these PHP settings at your own risk!

Step 3: Get the FlashVideo Module
Posted February 5th, 2007 by admin
The FlashVideo Module

Ok, so now you've got a server with FFMPEG, you just installed the latest revision of Drupal 5, and now you can barely keep in the excitment! Well, just be patient young grasshopper, we are almost there. To get Flash Video into your website, you will now need to get the conveniently named FlashVideo Module from the Drupal website. Once you have this module, and have installed it in the Drupal core, you are ready to begin.

In order to be truely efficient with this module, it is important to learn how to use it. Well, simply put the FlashVideo module is an easy to use module that expands the Upload module by allowing users to upload videos and attach those videos to any content. Even more exciting, is that FlashVideo automatically performs the very common Flash format conversion as well as create an image thumbnail of any newly uploaded video for every cron cycle (I'll get to this later). Once the video is in Flash format, the video can then be embedded in that node using the very simple [video] tag.

To enable this module for a certain node type, you must first go to the FlashVideo Settings in the Administrator panel, and select the FlashVideo settings for any available node type in the Drupal system. Once the FlashVideo module has been enabled for that node type, you will then notice the modified Upload form when you add new content for that node type.

Once a video has been uploaded, it will then have to wait for the next Cron cycle for the conversion to Flash format to begin. You can manually run the cron operation by going to Administer->Logs->Status Report and then click on the link that says run cron manually. After the video has been converted, it will then be available to any node referencing that video. That node can then reference the video by using the [video] tag, and also reference the video thumbnail by providing the [thumbnail] tag.

Parameters for these tags are provided by using a ":" to indicate a new parameter is being provided. The following format should be used for both the [video] and [thumbnail] tags. [video: param=value ] where param is the name of the parameter being passed, and value is the value of the parameter.

The following parameters can be used...

index (For both video and thumbnail tags) - This is used to reference a video when muliple videos have been provided for each node. If no node parameter is specified, then this will reference the node in which the tag resides. Example: [video: index=0] would reference the first video uploaded to that node, while [video: index=1] would reference the second video uploaded to that node.
node (For both video and thumbnail tags) - This is used to reference a video in another node. Example: [video: node=10: index=0] would reference the first video uploaded to node 10.
fids (For both video and thumbnail tags) - File ID's: This parameter can specify a single File ID, or many File ID's separated by a "-". If many File ID's are specified then those videos will play in that order. Example: [video: fids=6] would play the video for file ID 6, while [video: fids:5-3-34] would play files 5 followed by 3 followed by 34.
id (For video tags only) - The id tags are used to play YouTube, Google, and Brightcove videos. For YouTube video's simply just place the ID after the tag. For Google and Brightcove Videos, you will need to place google- and brightcove- respectively at the beginning of the tag. Example: [video:id=google-3754293779500828561] will play video 3754293779500828561 from video.google.com, and [video:id=SmVAWKfJ4Go] will play a video from YouTube with the ID SmVAWKfJ4Go.
width (For video tags only) - This parameter will override the default width of the video with the value given from this parameter.
height (For video tags only) - This parameter will overide the default height of the video with the value given from this paramter.
autostart (Values are true or false, and only used for video tags) - This parameter indicates if the video should start automatically.

The following are examples of using the [video] and [thumbnail] tag system...

[video] - The first video uploaded to this node, with all parameters using their defaults.
[video: index=2 : width=320 : height=240] - The third video uploaded to this node with dimensions of 320x240
[thumbnail: index=1] - The thumbnail for the 2nd video uploaded to this node.
[video: autostart=false] - The first video uploaded to this node will not start automatically.

Ok, now that you have learned about this module, let's move on in this tutorial.

Step 4: Download a Media Player
Posted June 28th, 2007 by travist

Ok, this step is VERY simple. In order to use the FlashVideo module, you must first download a Media Player to show the videos. There are several options out there that you can use, which are as follows...
Dash Media Player
JW Player

Both of these players are great so I suggest you read up on both and pick whichever one fits your needs. Regardless of which one you download, the following steps apply...

Once you have downloaded a Flash player, there is really only ONE file within that entire download that we are interested in, and it is one with the extension *.swf. The default for the FlashVideo module actually uses the name Player.swf. So, the first step that you will need to do is rename the *.swf file to Player.swf and then place that file in root files directory of your Drupal installation. For example, if you Drupal installation resides at /public_html/drupal, then your Player.swf file will need to reside at /public_html/drupal/files. If you are using the Dash Media Player, it is also important to note that you will also need to copy the skins folder that comes with this player along with this Player.swf. Any sub folders containing videos will then just reference that single player in that root files directory... And that's it!! You are ready to move on!

Step 5: Set up a Cron Task

Posted February 7th, 2007 by admin
Cron Tasks

There are many tutorials on the Drupal website on how to set up a Cron task, but since this is supposed to be a "complete" tutorial, I will walk you through on how I acheived this with my CirtexHosting account.

The first task you will need to do is to actually log onto your Cpanel for your hosted account. I am able to do this by typing the the url of your website in your browser followed imediately by /cpanel. Of course, you will need to provide you account name and passoword to access this section, but this is given to you when you sign up for an account. Once you are in your Cpanel for your hosted account, you will need to find the section that says Advanced, and sure enough, in that section you will want to click on the link that says Cron Jobs.

From there you will be given two choices, Standard or Advanced. Honestly, I really don't know why they did this because as far as I am concerned the Advanced way of doing this is SOOOO much easier, so click on Advanced. Once you are in the actual cron page, the first thing you will want to look at is the Command text field. In that box, put the following comand /usr/bin/lynx http://www.mywebsite.com/cron.php (there is a space between /usr/bin/lynx and the url), but of course replace the www.mywebsite.com with whatever YOUR website URL. I don't want anybody ticking off the owner of www.mywebsite.com... :)

Next you will need to tell the Cron Jobs how often you would like to run a Cron task. Well, this is all dependant on you. If you would like to run your video conversions every 5 minutes (like me), then you would put a */5 in the Minute box, and put an "*" wildcard in all the other boxes. If you want every hour, then you would put a */1 in the Hour box, and an "*" in all others.

Now, if you were not able to get this working for your install (such as if you are not using CirtexHosting), you can still set up a cron task fairly easily using the wonderful module called Poormans Cron. What this module does is simply mimics the Cron cycle that you would normally set up with your hosting company. If you are one of those people who this applies too, then I would also recommend looking into this solution.... So, now do you see how this works? It's not really that complicated. Let's move on to the next step.

Step 6: Create a Content Template.
Posted February 7th, 2007 by admin
Create a Content template using the Content Template module.

As far as I am concerned, Drupal is incredible! It provides so much flexibiliy while at the same time makes it simple to customize and create the content that you want. However, there is one annoyance that I have with the default installation of Drupal, and that is its inabilty to separate the teasers from the actual view in terms of customization. But don't fret, there is a module that does this for you, and it is called the Content Template module. This module allows the designer the ability to create a template for all views of thier node. This is great for me, because I want to have a teaser that has a thumbnail of the video, while the actual node with have the video itself. Here's how to do it... First of all, download this module and install it in your Drupal website. Then go to the Administer->Content Templates section. From there, select the node type that you are using to create your video... In this tutorial, we are using just the Page node type. From there, just simply expand the Teaser section, and just put [thumbnail] as the teaser for the Page node type. Hit Save Configuration, and you are ready to move on!

Important Note: Please keep in mind that it is very easy to create your very own Node Type for this project using the Content Construction Kit (CCK). For example, I could easily create a new node type called Video if I wish to mimic the Video Module... But for simplicity, we will just stick to the node type Page.

Step 7: Create your Page!
Posted February 8th, 2007 by travist
Create your page

Ok, here's the fun part! Now that we have everything in place to submit, convert, and view our video, lets create a node that will actually do it! We need to first enable the FlashVideo module for whatever node type in the Drupal system. We will just make it easy and enable the FlashVideo module for the Page node type. Go to Administer->Site Configuration->FlashVideo Settings, and then select the link that says FlashVideo Settings for this node type next to the Page node type. Once you are in there, you will want to check the box that says Enable the FlashVideo for this node type. And thats it! You are ready to go.

Let's now click on the link that says Create Content, and then click on Page. Do you see what I see? You should notice that the upload module now sits at the top of the page, and has been renamed to "Video Upload". So, let's do just that. Select a video from your local hard drive (preferably one under 5 MB), and then hit Attach. You will then see the gif progress bar image show up, telling you that your video is uploading. While it is uplaoding, lets place our Video tag in the Body of the node. Simply type [video] anywhere in the Body of your node. When the video is finished uploading, you can then hit Submit at the bottom of the form.

You should then see a preview of your node... but wait!! No video? It just says, "Video is currently not available". Well, remember our cron tasks? Your video will not show up until the cron task has had time to convert your video and create a thumbnail. If you set up your cron task for 5 minutes, then you will just have to wait 5 minutes. However, if you are extremely impatient like me, then you can just simply go Administer->Logs->Staus Report and click on the link that says Run cron manually. You should see it think for a little bit, but once it is done, go back to your node! Egads! You have just embedded flash video in your website! Pretty easy, huh?

If you would like to see what this tutorial looks like in real life, then I have actually implemented it my EasyFilter module section at http://www.travistidwell.com/easyfilter. Check it out and see for yourself how easy this really is! Also, if you have found this tutorial helpful, or would like to show your appreciation for the module which I submitted, please feel free to

Share this

Related Posts

Next Post »