| |
PREFACE
Let me start by pointing out that
Mark Pilgrim, the author of
Dive Into HTML5, has done a
similar tutorial to this one, only much more comprehensive, accurate,
and better written. So you should definitely read his if mine doesn't work for you.
Another tutorial similar to this one is
Video for Everybody,
by Kroc Camen.
THE CHANGING FACE OF WEB VIDEO
It's been a year since I wrote my
first video streaming tutorial,
and streaming video on the web has changed considerably in that time. Last September,
Firefox 3.5
came out with new
HTML 5.0 features including
embedded video which no longer requires an
Adobe Flash Player plugin to display.
Other browsers, like Google Chrome (v5 and up), Opera (v10.5 and up),
Internet Explorer v9 (in beta), and Safari (v3.0 and up, which
most Apple products like Macs, iPads, and iPhones use), also now support embedded video in HTML 5.
And YouTube has
joined in
as well (YouTube also has a blog article about HTML5 vs. Flash).
I like the idea of not requiring people to use Adobe's Flash Player to display videos
(as I read on one site, "no Flash, no crash"), and I'd also
like my videos to play on as many platforms as possible (iPads, iPods, and iPhones,
for instance, don't presently support Adobe Flash Player),
so I wanted to improve my streaming videos to cover these issues.
THE VIDEO FORMAT WAR
The fly in the ointment for web video today is that different copanies are supporting
different formats for various reasons (see the table below).
Mozilla supports the open-source
Ogg (Theora/Vorbis) format, which is unemcumbered by patents, in Firefox 3.5/3.6,
and recently joined with Google and Opera in
supporting
WebM (VP8/Vorbis) in Firefox 4.x (now released).
WebM is also open source (it was released by Google
as open source in May 2010) and unencumbered by patents.
Microsoft
and Apple prefer the MP4 container format with H.264 encoded video, though Microsoft
has
announced that IE9 will also support WebM (if the
user installs a WebM codec).
Apple remains solely in the MP4 camp.
The reason Google and Mozilla prefer WebM is that MP4/H.264 has legal issues involving
patents and licenses. H.264, on the other hand, has very widespread hardware support in
present-day computers and portable devices for video playback.
NECESSARY PIECES
You may want to encode your video in up to three different formats to support most browsers,
but with Firefox 4.0 approaching 10 million downloads per day in its first few days of release (March 22, 2011), I suspect that just the MP4 and
WebM formats will soon be sufficient, and Ogg will be less and less necessary:
Container
Format |
File
Extension |
Video
Encoding |
Audio
Encoding |
Supporting
Browsers |
| MP4 |
.mp4 |
H.264 |
AAC or MP3 |
Safari 3.0+ (Apple), IE 9.0+ (Microsoft),
Chrome 5.0+ (Google)**,
iPhone 3.0+, Android 2.0+ |
| Ogg |
.ogv |
Theora |
Vorbis |
Firefox 3.5+ (Mozilla); Chrome 5.0+, Opera 10.5+ |
| WebM |
.webm |
VP8 |
Vorbis |
Firefox 4.0+, Chrome 5.0+, Opera 10.6+, IE 9.0+* |
* - IE9 to support WebM only with user-installed codec
** - As of Jan 11, 2011, Google plans to drop H.264 support from Chrome.
For compatibility with older browsers which don't support embedded video, you'll also need
FLV hosting.com's Flash-based video player
file, YTPlayer.swf (local copy--right click it and
select "Save link as ..."). This small file must be in the same folder as your
html file which launches it. It launches a player using Adobe's Flash
Player plugin. Thank you to FLV hosting for this nice player.
The YTPlayer.swf will play the .mp4 file, fortunately (no need to have a different
format just for this player).
You'll then need a way to convert your video files to .mp4, .ogv, and .webm.
See below for more on how to do that.
Finally, you may need to contact your
web hoster and have them modify their
server mime types according to the
instructions on this page (see the Server Support section). Be sure to also add video/webm to the mime types for
WebM support.
I had to do this, but my
web hoster
responded very quickly and was happy to oblige. Note that some hoster control/config
pages allow you to change your mime types yourself. You might want to check yours.
HTML EXAMPLE
After getting YTPlayer.swf, and converting your video to the .mp4, .ogv, and .webm
file formats (see next section) you need to create an HTML file to show the video.
Here is an HTML example.
The HTML source is below:
<!doctype html>
<html>
<style type="text/css"><!-- img { display:block } video {display:block} --></style>
<body bgcolor=#c0ffc0><center>
<font face="calibri,arial,sans-serif">
<h1>Cat Food Burglar</h1>
<font color=#008000 size=+2><b>VIDEO</b></font><br>
<table width=0 cellpadding=0 cellspacing=0 border=4 bordercolor=#008000><tr><td>
<!-- Actual video file is 480x360 -->
<video width="480" height="360" controls autoplay>
<!-- .mp4 file must come first for Safari. IE9 will also play it. -->
<source src="cat_food_burglar.mp4" />
<!-- Firefox 4.x, Google Chrome, and Opera will play the .webm format -->
<source src="cat_food_burglar.webm" />
<!-- Firefox 3.5/3.6 will only play .ogv files -->
<source src="cat_food_burglar.ogv" />
<!-- If all else fails, the script below will try to launch the Flash player. -->
<embed
src="YTPlayer.swf"
flashvars="movieName=cat_food_burglar.mp4&autoStart=true"
width=480
height=390
allowFullScreen=true
type="application/x-shockwave-flash"
pluginspage="http://get.adobe.com/flashplayer" />
</video>
</td></tr></table>
<br>
<font size=+1>Hidden camera catches my dog swiping cat food.</font>
<br><br>
<table border=0><tr>
<td valign=top align=left>Downloads:</td>
<td valign=center align=center><a href="cat_food_burglar.mp4">.mp4</a><br>
<font size=-1>7.4 MiB<br>805 kibps</font></td>
<td valign=center align=center><a href="cat_food_burglar.webm">.webm</a><br>
<font size=-1>6.7 MiB<br>732 kibps</font></td>
<td valign=center align=center><a href="cat_food_burglar.ogv">.ogv</a><br>
<font size=-1>6.7 MiB<br>729 kibps</font></td>
</tr></table>
<font size=-1 color=black>If the video doesn't play, upgrade to the latest
<a href="http://firefox.com">Firefox browser</a><br>
or download and install
<a href="http://get.adobe.com/flashplayer/">Adobe FlashPlayer</a>.</font>
</font>
</center></body></html>
Note that without the first line of the HTML source above (<!doctype html>), IE9 will
not interpret the <video> tag
correctly. The only files in the folder on the server are:
index.html (listed above),
YTPlayer.swf, and the video files,
cat_food_burglar.mp4,
cat_food_burglar.ogv, and
cat_food_burglar.webm.
Here is another example which shows you which file your web browser is using.
And these examples will test if your browser can play
.mp4,
.webm, and/or
.ogv videos.
CREATING THE .mp4, .ogv, and .webm FILES
There are a number of ways to convert (encode) your video files to the necessary video file formats:
1. Upload your video file to YouTube.com. YouTube will automatically
convert just about any video format to a high-quality .mp4 file which
you can then download and remove from their server. With their HTML 5 project, they
may also be converting to .webm. I'm not sure.
2. Check out the encoding instructions in
Mark Pilgrim's tutorial.
The table of contents has links to step-by-step instructions on how to encode
to Ogg with FireFogg, how to encode to H.264 with HandBrake, and how to encode
to WebM with FFmpeg.
3. I use FFmpeg, a command-line
utility which will convert/scale/crop between many different video and
audio formats.
See the FFmpeg section of my utility software page for more details.
I recommend this page (32-bit static build) for a
good Windows version of ffmpeg.exe that encodes to all the types listed below (the libav windows builds folder versions of ffmpeg.exe do not encode to .webm or .ogv as of 6-23-11). If you google around, you should be able to find a user-friendly,
GUI front-end for FFmpeg, but I just use it from the command line.
This is the command I use to convert my hi-def Panasonic camera videos to .mp4 files:
ffmpeg -threads 2 -i input_video.mts -i_qfactor 0.71 -qcomp 0.6
-qmin 10 -qmax 63 -qdiff 4 -trellis 0 -vcodec libx264
-s 640x360 -b 700k -ab 56k -ar 22050 output_video.mp4
...and this command (a little simpler) to convert to .ogv files (libtheora vcodec):
ffmpeg -threads 2 -i input_video.mts -s 640x360 -qmax 63 -b 700k
-ab 56k -ar 22050 -acodec vorbis output_video.ogv
...and finally this command to convert to .webm files (libvpx vcodec):
ffmpeg -threads 2 -i input_video.mts -s 640x360 -qmax 63 -b 700k
-ab 56k -ar 22050 -acodec vorbis output_video.webm
The above commands convert input_video.mts (can be .avi or other type) to
output_video.mp4 using h.264 encoding (-vcodec libx264)
and a target bit rate of 700 kibps; or to output_video.ogv
or to output_video.webm
using the same parameters.
The output video size is 640 x 360. You'll want to make sure the output video size
matches the aspect ratio of your videos (mine are hi-def, so they are 16:9,
but most standard def videos are 4:3, so you'd use -s 480x360).
The -ab 56k and -ar 22050
set the audio so it will be compatible with the video players.
Other FFmpeg notes:
- All of the extra parameters in the mp4 conversion
command are there to get the h.264 encoding to go smoothly. If you learn to
use FFmpeg presets, you can use much simpler conversion commands.
- The -qmax 63 option above allows the use of maximum compression (63 is the highest
value allowed) on the video frames
in order to achieve the desired video bit rate (-b 700k). Setting this value lower will
improve the video quality, but the requested bit rate (-b option) rate may not be achieved.
- The -threads 2 option (a relatively new feature) enables up to 2 threads to do the
encoding, which will make FFmpeg encode faster on a multi-core/multi-threaded CPU. You
can use a higher number than 2, but my experience is that -threads 4 is actually slower
than -threads 2 on .mp4 conversions. It's worth experimenting to find the fastest setting
on your system.
- The .ogv and .webm encoding are relatively new in FFmpeg
(they were implemented in June 2010), so you need a recent version of FFmpeg to encode to .ogv
or .webm.
- FFmpeg has much
more capability--it can crop your video, scale it, take a specific time
slice, etc. For more about how to use FFmpeg, see the
FFmpeg documentation page.
For example, adding the arguments -ss 7 -t 35 to the conversion commands above would
start 7 seconds into the source video and convert the next 35 seconds to the output video.
4. There are many other .mp4, .ogv, and .webm encoders to convert your
video files. Just google "mp4 (or ogv or webm) encoding".
That's all for now. Good luck and have fun!
|
|
|