| |
INTRODUCTION
Today virtually every major browser supports
HTML 5.0 embedded video as an alternative
to requiring Adobe's Flash player plug-in, as does
YouTube (see
YouTube's blog article about HTML5 vs. Flash).
This makes it easier than ever to stream your videos to PCs, laptops, smartphones, and tablets
without requiring users to install Adobe Flash Player, which, for example, iPads and iPhones
do not support. In
support of Flash, though, Jan Ozer thinks
HTML5 video is over-hyped as a one-size-fits-all solution
for web video (Oct 2011). I think video in HTML 5 rocks!
VIDEO FORMATS
There are two major competing video formats for web videos.
If you want one format for everyone, every major browser now supports the MP4 container
format with H.264-encoded video (the Mac version of Firefox now supports MP4 as of
v35--see comment #29,
released 13 Jan 2015).
Every major browser except for Safari also
supports
WebM (VP8/Vorbis) (curse you, ghost of Steve Jobs!).
WebM is open source (it was released by Google
as open source in May 2010) and supposedly less encumbered by patents than MP4.
WebM with VP9, a more advanced video encoding format that compresses better than VP8, is supported by Chrome, Firefox, and Opera.
VP9 competes with H.265 / HEVC,
which was ratified in 2013.
See the list of supported browsers / formats below.
[Aside: Another alternative video format is the open-source
Ogg (Theora/Vorbis) format supported by
some browsers, but it has been made largely obsolete by WebM's wider support.]
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), Firefox 21+ (35+ on Mac),
Opera 15+, iPhone 3.0+, Android 2.0+ |
| WebM |
.webm |
VP8 |
Vorbis |
Firefox 4.0+, Chrome 5.0+, Opera 10.6+, IE 11+ |
If you want to maintain compatibility with older browsers which don't support
embedded video but do support flash, 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 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 and .webm
file formats (see next section) you need to create an HTML file to show the video.
Here is an HTML example. The example
includes .ogv video, but these days I just post .webm and .mp4 versions of my videos.
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.
Again, you can disregard the .ogv file these days. I leave it here just for completeness.
Here is another example which shows you which file your web browser is using.
These examples will test what video formats your browser can play:
.mp4 |
.webm |
.ogv.
CREATING THE .mp4 (and .webm and .ogv) FILES WITH FFMPEG
FFmpeg is an extremely versatile 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
(64-bit or 32-bit static build) for a
good Windows version of ffmpeg.exe that encodes to all the types listed below.
See my ffmpeg/avconv benchmark page for more on why.
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 4 -i input_video.mts -i_qfactor 0.71 -qcomp 0.6
-qmin 10 -qmax 63 -qdiff 4 -trellis 0 -vcodec libx264
-s 640x360 -b:v 1000k -b:a 56k -ar 22050 output_video.mp4
...and this command to convert to .webm files (libvpx vcodec):
ffmpeg -threads 4 -i input_video.mts -s 640x360 -qmax 63 -b:v 1000k
-b:a 56k -ar 22050 -acodec vorbis output_video.webm
...and finally this command to convert to .ogv files (libtheora vcodec):
ffmpeg -i input_video.mts -s 640x360 -qmax 63 -b:v 1000k
-b:a 56k -ar 22050 -acodec vorbis output_video.ogv
The above commands convert input_video.mts (can be .mov, .avi, or other type) to
output_video.mp4 using h.264 encoding (-vcodec libx264)
and a target bit rate of 1000 kibps; or to output_video.webm
or to output_video.ogv
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 -b:a 56k and -ar 22050
set the audio so it will be compatible with the video players.
Other FFmpeg (and avconv) notes:
- The -b:v and -b:a options are options for the bitrate used by later versions of ffmpeg.exe (or avconv.exe) (October 2011 or after). Download a more recent version if your version doesn't understand these options.
- All of the extra parameters in the mp4 conversion
command are there to get the h.264 encoding to go smoothly.
I've made them part of a Windows batch (script) file so I don't forget them.
- 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:v 1000k). Setting this value lower will
improve the video quality, but the requested bit rate (-b:v option) rate may not be achieved.
- The -threads option enables multiple threads to do the
encoding, which will make FFmpeg encode faster on a multi-core/multi-threaded CPU. Not
all encoders take advantage of this option (e.g. encoding to .ogv). See
my ffmpeg/avconv benchmark page for how well different
encoders perform using multiple threads.
- 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.
OTHER WAYS TO CONVERT YOUR VIDEO FILES
1. 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.
2. There are many other .mp4, .ogv, and .webm encoders to convert your
video files. Many simply provide an easy-to-use front-end for FFmpeg.
Just google "mp4 (or webm) encoding".
OTHER RESOURCES
I wrote my first video streaming tutorial in July 2009,
if you're really bored. Going back to it shows how much times have changed.
If you want more details on the latest HTML 5 video controls, try Pete LePage's
excellent introduction.
Other discussions of HTML 5 video include Mark Pilgrim's
book chapter on HTML5 video,
which is nicely done, but aging.
[Aside: Mark Pilgrim took down many of his accounts and sites
in early October 2011, but I
have updated my links to point to community mirrors of his removed works.]
Kroc Camen has written a similar tutorial from late 2010 called
Video for Everybody.
Jan Ozer (mentioned in the introduction) has written
several good articles
for streamingmedia.com on encoding videos, including
this gem about optimal encoding for YouTube.
That's all for now. Good luck and have fun!
|
|
|