HTML and CSS Reference
In-Depth Information
To summarize, here is a chart of the video formats supported by various browsers.
Platform
.ogg
.mp4
.webm
Android
X
Firefox
X
Chrome
X
X
iPhone
X
Internet Explorer 9
X
Opera
X
X
Safari
X
As you can see, no one format is supported by all browsers or platforms. Because
HTML5 Canvas only supports video in the format supported by the browser it is im-
plemented within, we must apply a strategy that uses multiple formats to play video.
Combining All Three
The examples in this chapter will introduce a strategy that may seem crazy at first—
using all three formats at once. While this might seem to be more work than necessary,
right now it is the only way to ensure broad support across as many platforms as pos-
sible. The HTML5
<video>
tag allows us to specify multiple formats for a single video,
and this will help us achieve our goal of broad video support when working with
HTML5 Canvas.
Converting Video Formats
Before we get into some video demonstrations, we should discuss video conversions.
Since we are going to use
.ogg
,
.mp4
, and
.webm
videos in all our projects, we need to
have a way to convert video to these formats. Converting video can be a daunting task
for someone unfamiliar with all the existing and competing formats; luckily, there are
some great free tools to help us do just that:
Miro Video Converter
(
http://www.mirovideoconverter.com/
)
This application will quickly convert most video types to
.ogg
,
.mp4
, and
.webm
.
It is available for both Windows and Mac.
SUPER © (
http://www.erightsoft.com/SUPER.html
)
This is a free video-conversion tool for Windows only that creates
.mp4
and
.ogg
formats. If you can navigate through the maze of screens trying to sell you other
products, it can be very useful for video conversions.
