HTML5 Tutorial 1: Using VLC to Convert Videos to .mp4, .ogg and .webm

Check out our blog at http://www.klaesimage.com/blog

In this tutorial Shaun uses the VLC Media Player to convert an AVI file to the MP4, OGG and WEBM formats to use for html5 video embedding. Please leave comments/questions below.

Download the VLC media player at http://www.videolan.org

Like us on Facebook: http://www.facebook.com/klaesimagepro...

http://www.klaesimage.com

---

Closed Caption:

hello and welcome this is sean with
clays image productions and today I'm
going to be doing a tutorial about
converting your video files for html5
embedding and video playback
the nice thing about html5 video is that
it's supported on pretty much all the
modern browsers and including iOS
devices safari on us a ipad or iphone
and android and every other desktop
browser this out there
so the three video files types that you
need in order to be compatible with all
the different browsers are an impact for
video which is it using the h.264 video
codec an OGG video file and also a web
video file and so what you'll need to do
is convert your videos to those three
formats and have all three on your web
page and then have those embedded into
the web page and then the browser will
detect which one it can play back and
will play that one back
I'm not actually going to be going into
the code to embed those today but i will
do that in a future tutorial so
subscribe to our Channel and and we'll
have that tutorial coming pretty soon so
the program we're going to use to
convert our video files today is
actually a really cool little program
that's completely free
it's called VLC media player we've been
using this program for quite a while to
playback different video file types
because it plays back a huge amount of
video files and different video codecs
as well if you don't have this program
you're not familiar with it you can go
to their website which is video land .
org and you can download the VLC player
right on here if you're running windows
7 64 bit i would recommend getting the
64-bit version of the program which I i
just clicked on other systems versions
here you go to windows and scroll down
and they have the 64-bit version here
it's still I think in kind of the
experimental stage
as I call it and so it's not fully
tested yet but I've had the best
experience with it when running a
windows 64-bit windows 7 64 bit so it
goes down on the executable file right
here and run that on your computer and
and it will install it and so once we've
got the program open here i'm going to
open up the video file that we want to
convert and it's just a little a nine
second clip of a butterfly here
I took this down the standard def and
just so that it didn't take so long to
convert it but it works perfectly fine
with high def files as well so all you
need to do is open up the program you
don't need to have that video loaded in
here to convert it
we're just going to go to convert / save
and then we want to click Add and choose
our source file which is going to be
that butterfly clip and then click
convert / save at the bottom down here
and right here we just choose our
destination which will put it right back
in that same folder and let's do the
mpeg-4 I mp4 video first
now if you notice i actually typed in
the file extension here that's something
that you have to do whatever file
extension you're going to be converting
it to make sure you type in that file
extension when you create the name
otherwise if you leave that blank it
will default to a . PS file and that's
not what you want you want to in this
case an impact for file down here you
want to choose under profile the mp4 and
if you click on this little Settings box
to the right of it
we can choose like our video codec make
sure that we're using h.264 we can
adjust our bit right here
frame rate depending on if our video is
29.97 frames per second or twenty three
point nine seven then here we can choose
the resolution i'm just going to keep it
at one which will keep the exact same
resolution that the original video is
that you can adjust that down here
audio codec mp3 audio for our impact for
video file and we're going to use a
hundred twenty kilobits per second
stereo two channels and 44100 for our
sample rate all that's fine we'll just
leave that at that and then everything
looks good we're going to go ahead and
click start and you'll notice the mpeg-4
video shows up in there and it's
converting the file right now
when it gets done should just go blank
like that
and here's our mpeg-4 video so that one
worked ok so let's go ahead and do the
ogg1 now I don't have to retype that as
long as the program still open it's got
the source file in there
so let's skip this up some ok this is
going to be the OGG version we want to
come down here and choose the first
Oh Gigi one which is using the vorbis
audio codec rather than the FLAC one
I know for sure that the works one works
for html5 video I'm not sure about flac
it may but I've never tried it some
2,000 bitrate 23.976 looks good there
always double check all those things
because if you haven't changed in
previously than they might be set on
something that you don't want
okay everything looks good let's go
ahead and click OK file shows up there
and we can see it
the progress bar going on the VLC player
ok that one's done so now let's go ahead
and do the last one which is going to be
our web M video
ok so we've got a butterfly . web M and
choose the web M profile down the bottom
again let's just double-check this one
make sure everything looks good it does
there
28 ok this is using the vpat video codec
and board this audio and click start and
there we go
we can see it converting down here
ok that one's done so let's go ahead and
double-check this make sure it looks ok
there we go
now the difference in the quality
between the original here
this original avi file and say like the
impact for video is very minimal I mean
the quality losses you
you can tell it's a little less
saturated little less contrast but the
quality looks pretty close to the
original but if we look at the actual
video file sizes between these that AVI
files
almost a hundred 20 megabytes the impact
for is only 2.5 know Gigi's about 2.6
and the web M is about 1.7 so the
compression is very good on these video
file types of our video files and
keeping the quality of the original
video
so that's the three different file types
we're going to need we would probably
also want to do an FLV file as well just
for older browsers that don't have the
ability to do html5
so like an older desktop browser like an
older firefox browser internet explorer
unfortunately I've not had good success
with having VLC convert an FLV file it
does have the capability it's listed in
there but I've not had good success with
that so if somebody else has done a flv
file with the with VLC leave a comment
below and let me know
the settings you used and all that kind
of stuff but I've not had good success
with that so i'd recommend using
something else for converting an FLV
file but for everything else that it
works great and if you guys have any
questions or comments leave them below
and I'll try to answer them as soon as I
can
and please subscribe to our Channel and
we'll have some more tutorials coming up
pretty soon
and you can always visit us at clays
image com
thanks for watching