This guide is intended to explain how to encode a DVD to a streamable mp4 codec under Ubuntu with ffmpeg.

Get Deps

The first thing you need to do is get the dependencies, you can do this with the following command;

sudo apt-get install build-essential dvdrip subversion avidemux libfaac-dev libspeex-dev libgsm-dev libgsm1-dev libmp3lame-dev libtheora-dev libvorbis-dev libx264-dev libxvidcore4-dev


Or you can click on this apt link, which will install these dependencies for you;

Install Dependencies

Set up Programs

ffmpeg

This part will require the terminal, to get to the terminal;

Applications > Accessories > Terminal


Then issue the following commands;

cd Documents ; mkdir src ; cd src
svn checkout svn://svn.ffmpeg.org/ffmpeg/trunk ffmpeg
cd ffmpeg


This will download a snapshot of ffmpeg, in the same terminal do the following to configure and install ffmpeg;

./configure --extra-cflags=-fno-common --enable-memalign-hack --enable-pthreads --enable-libmp3lame --enable-libxvid --enable-libvorbis --enable-libtheora --enable-libspeex --enable-libfaac --enable-libgsm --enable-libx264 --enable-gpl --enable-nonfree
make
make install
cd tools
gcc qt-faststart.c -o qt-faststart
sudo cp qt-faststart /usr/local/bin/


libdvdcss

We need to set up protected DVD decryption Ubuntu makes this pretty easy, do the following commands to set it up;

cd /usr/share/doc/libdvdread4/
sudo sh install-css.sh


Ripping the DVD

Start dvdrip;

Applications > Sound & Video > dvd::rip

or “dvdrip” from cli.

When You first start dvdrip it will ask you what Directories to use for the projects, It’s up to you which directory to use. Once you have done that you will need to put a DVD into your DVD drive and start a new project. To start a new project go to “File > New Project” in dvdrip. You will need to enter a name for the project;

DVD Rip select project name

When you have selected a name for the project hit the “Create Project” button and select ok to save the .rip file, then select “Rip Title” and “Read DVD table of contents”;

DVD Rip Read table of contents

When you have done that you have to select the title that the film is on, which is almost always the one with the most frames;

DVD Rip selected tracks

To rip the dvd select “Rip selected title(s)/Chapter(s)” button, highlighted in blue on the above picture. dvd::rip will begin to rip the dvd, on my computer it takes about 10 minutes to rip a title.

Merge Vob files

At this point merge the vob files with the cat command;

cat title-001.vob title-002.vob title-003.vob title-004.vob >> output.vob


Linux: merge vob files into a single file

(filenames covered up because despite having paid for the DVDs and the act that I’m only doing this for personal use, I don’t want to take any chances)

Cut and Crop Film

The next step is to use avidemux to cut, crop and transcode the video to a format ready for conversion to mp4. Start avidemux with the following command;

avidemux


open the merged vob file that you created in the previous step and when asked “This looks like mpeg
Do you want to index it?” select yes;

avidemux: index vob file

I takes a little while for avidemux to generate the index;

Avidemux: Generaing a vob file index

Select Output Formats

The first thing you need do in avidemux is select the output formats that you will use, for this I choose;

VIdeo: MPEG-4 ASP (lavc)
Audio: MP3 (LAME)
Container: AVI

Video Format selection

Select filters

There are a couple of filters that you might want to take advantage of, for the video I use the crop filter, to do this select filter under the video section of the left hand side of avidemux and double click on crop;

Double click crop

This will bring up a window where you can set the crop dimensions, move the frame selector (highlighted in red) to a point in the movie where the border is well defined and press the Auto crop button (highlighted in green);

Avidemux crop settings

You might need to adjust the settings slightly, you should end up with something like this;

Avidemux crop example

Click apply and then ok to accept these settings, then close the video filter window. The only filter that needs to be applied to the audio is the mixer setting, it needs to be set to stereo;

Audio > filters > mixer > stereo


Avidemux Stereo

Click ok and you will done with filters.

Cut video

You can set the start and the end point of the video using the a and b buttons you can use this to cut out the titles at the start of the film and the credits at the end;

Set where you want he video to start

Move the frame selector (Red) to where you want the video to start (you can fine tune with the arrows to the left of the “a” button) and press the “a” button (Green), the frame number will be shown in the bottom right of the window (Blue). Do the same for where you want the movie to end, substituting the “a” button for the “b” button.

Start encoding

Now that everything is set up, press the save button, give the file a name (you need to include the extension as avidemux doesn’t do this automatically) and press ok. Avidemux should begin encoding;

Avidemux Encoding

Encode to mp4

The final step is to issue two commands that will convert the file that avidemux created, into a stream-able mp4 file, the first command does the actual conversion;

/usr/local/bin/ffmpeg -i "input.avi" -vcodec libx264 -flags +loop -cmp +chroma -deblockalpha 0 -deblockbeta 0 -b 1250k -maxrate 1500k -bufsize 4M -bt 600k -refs 1 -bf 3 -coder 1 -me_method umh -me_range 16 -subq 7 -partitions +parti4x4+parti8x8+partp8x8+partb8x8 -g 250 -keyint_min 25 -level 30 -qmin 10 -qmax 51 -qcomp 0.6 -trellis 2 -sc_threshold 40 -i_qfactor 0.71 -acodec libfaac -ab 128k -ar 48000 -ac 2 "output.mp4"
Where input.avi is the video created by Avidemux.

If you have a dual or quad core processor, it’s worth adding the “-threads” switch to that, so that you can get the most from your processor;
/usr/local/bin/ffmpeg -i "input.avi" -threads 4 -vcodec libx264 -flags +loop -cmp +chroma -deblockalpha 0 -deblockbeta 0 -b 1250k -maxrate 1500k -bufsize 4M -bt 600k -refs 1 -bf 3 -coder 1 -me_method umh -me_range 16 -subq 7 -partitions +parti4x4+parti8x8+partp8x8+partb8x8 -g 250 -keyint_min 25 -level 30 -qmin 10 -qmax 51 -qcomp 0.6 -trellis 2 -sc_threshold 40 -i_qfactor 0.71 -acodec libfaac -ab 128k -ar 48000 -ac 2 "output.mp4"
Example for a quad core processor.

and this command makes the file stream-able;

qt-faststart "output.mp4" "faststart-output.mp4"
Where “faststart-output.mp4″ is the streamable mp4 file.

comments

If you have any suggestions,questions or comments about how I could improve is article please feel free to leave a comment. Thanks

Downloads

Download .zip

Download .bz2

About the plugin

This plugin adds flowplayer to your wordpress blog, it comes pre-configured and is very easy to use.
all you need is the location of the video and it’s resolution. The plugin comes with flowplayer
version 3 which is able to play the following formats;

1. H.264
2. FLV
3. MP4

It is supported by the folowing browsers;

1. Internet Explorer 6.0+
2. Firefox FF 2+
3. Safari 2.0+
4. Opera 9.0+

Contributors

This plugin uses flow player which is available from HERE, this plugin includes version 3 of the player and will be updated when a new version comes out. the code for this plugin is based on the WP-FLV plugin which is available from HERE.

Installation

1. Upload the `wordpress-flowplayer` directory to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress

How it works

To add a video to your post you can either click the ‘flow’ (only if you are in HTML mode)
button and answer the questions or you can enter the code yourself for example;

would add the video ‘/uploads/video.flv’ with the width 320 and the height 240 to your post.

You can convert to flv for free using this tutorial;

FLV Convert Tutorial

Screenshots

wordpress-flowplayer video player frontend

wordpress-flowplayer backend

Changelog

Version 0.1 (30/11/08)
- released

Version 0.2 (5/12/08)
- fixed a very nasty bug, which caused anything in square brackets to be parsed as if it was the flow tag.
- added support for the visual editor mce has been added.

Version 0.3 (6/12/08)
- fixed more problems with the parse code
- cleaned up code to allow easy addition of new features in the future.

Downloads

Download .zip

Download .bz2

RSS Buttons Preview

They are also available in PNG and SVG format;

PNG Format
RSS Feed Buttons in SVG format

You should be able to open the SVG version in Adobe illustrator for editing. The following video shows the basics of how they were created. I was rushed in the video to try and keep the time down but I go on to explain in more detail how they were made in the tutorial below the video;

You can get the windows version of inkscape free of charge here;

For linux, use your packager manager to install inkscape.

In case there was anything that you couldn’t see properly in the video, these are the steps that I took to create the buttons, in a little more detail;

Step 1 :- setup construction lines;

Inkscape construction lines

The first step is to setup construction lines in inkscape. to do this go to the edge of the canvas, press and hold the left mouse button, then drag the to the right.

Step 2 :- Draw initial shape

Draw the shapes outline

Use the construction lines that you setup in the last step to draw the shape of the button. then remove the construction lines by dragging them out of the canvas area. Then right click of the shape and select “Fill and stroke” from the menu, select “stroke style” and then sett the width higher and set to curved corners.

Step 3 :- outline curves

Make the edges curved

to make the curved edges, left click hold and move the mouse on the center of the diagonal sections that we created earlier, using the “Edit by paths” button (highlighted in green) see the above image.

Step 4:- Change colors

Change outline colors

Changing the stroke colors is done by dragging the color selector over to the right, under the “stroke paint” tab in stroke and fill, The next thng we want to do is to add a gradient to the inside of the shape;

Select gradient

Select Fill > The gradient button > Edit, this takes you to the gradient editor, from here you can set the colors that will be used in your gradient;

gradient editor

Set the colors to two shades of the same color. when you are done your button should look something like this;

button gradient

Step 5:- add shadow

To add the shadow, you need to duplicate the shape that we have already created, right click and select duplicate;

Duplicate the shape that we have created

then change is stroke and fill to solid black;

Set color to black and blur

Now all you have to do is set the blur on the shape, so that it is just slightly blurred, ones to are happy with the blur you have to put this new black shape behind the original shape that we created.

Move Blurred layer to bottom

Once you have done that you should be left with something that looks like this;

The button is really starting to take shape now

Step 6:- Text, arrow and divider

Now all that’s left to do, is to add the text and white divider line;

Divider

To create the divider, use the square tool (highlighted in green), set the square to no stroke (using the button highlighted in red) and the fill color to white, make sure that the square does not have curved edges. Next we have to add the down arrow, use the construction line technique from before;

Create down arrow using construction lines

Next add the font using the button highlighted in green and change the font using the button highlighted in red;

Changing the font in inkscape

Once you have choose the font you want to use, change it’s color to white and place it on your button. Your button should look similar to this now;

Button with it

Step 7 Manipulate button gradient

This is the last step, all you ave to do is select the the button/layer that has the gradient and change the direction of the gradient to vertical;

Editing the gradient direction in inkscape

Use the node tool, highlighted in red, to manipulate the gradient line highlighted in green. In the above example I used a construction line to ensure that the gradient it straight.

Summary

Well that’s it folks, I hope you liked this tutorial, feel free to comment, I would like to get some feed back and wouldn’t mind answering any questions you have about this tutorial.

Lee