| |
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, Opera,
Internet Explorer 9 (in beta), and Safari (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.
I really 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 presently only supports the open-source
Ogg (Theora/Vorbis) format in Firefox 3.5/3.6, but recently joined with Google and Opera in
supporting
WebM (VP8/Vorbis) in Firefox 4.x. 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.
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 better hardware support in
present-day computers for video playback.
NECESSARY PIECES
For now, at least until Firefox 4.x is widespread, you'll unfortunately
need to encode your video in three different formats to support most browsers:
Container
Format |
File
Extension |
Video
Encoding |
Audio
Encoding |
Supporting
Browsers |
| MP4 |
.mp4 |
H.264 |
AAC or MP3 |
Safari (Apple), IE9 (Microsoft) |
| Ogg |
.ogv |
Theora |
Vorbis |
Firefox 3.5/3.6 |
| WebM |
.webm |
VP8 |
Vorbis |
Firefox 4.x, Chrome (Google), Opera |
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.
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:
<html><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>
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.
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. I use FFMPEG, a command-line
utility which will convert/scale/crop between many different video and
audio formats. A Windows version and several GUI front ends of FFMPEG are available (see FFMPEG section). I recommend this page for the
very latest Windows versions.
If you are using the command line, this is the command I use to convert my hi-def Panasonic camera videos to .mp4 files:
ffmpeg -i input_video.mts -i_qfactor 0.71 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4
-trellis 0 -vcodec libx264 -r 24 -s 640x360 -b 700k -ab 56k -ar 22050 output_video.mp4
...and this command (a little simpler) to convert to .ogv files:
ffmpeg -i input_video.mts -r 24 -s 640x360 -b 700k -ab 56k -ar 22050 -acodec vorbis
output_video.ogv
...and finally this command to convert to .webm files:
ffmpeg -i input_video.mts -r 24 -s 640x360 -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) at 24 frames per
second (-r 24) 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 .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.
- There is also an excellent page with more information about HTML 5 video/audio formats at
diveintohtml5.org.
3. 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!
|
|
|