To summarize, here is a chart of the video formats supported by various browsers.
Platform
.ogg
.mp4
.webm
Android
X
Firefox
Chrome
iPhone
Internet Explorer 9
Opera
Safari
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 implemented 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 possible. The HTML5 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 FormatsBefore 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.HandBrake (http://handbrake.fr/)This video-converter application for the Macintosh platform creates .mp4 and .ogg file types.FFmpeg (http://ffmpeg.org/)This is the ultimate cross-platform, command-line tool for doing video conversions. It works in Windows/Mac/Linux and can do nearly any conversion you desire. However, there is no GUI interface, so it can be daunting for beginners. Some of the tools above use FFmpeg as their engine to do video conversions.Basic HTML5 Video ImplementationIn the tag’s most minimal implementation, it only requires a valid src atrribute. For example, if we took a nifty little video of the waves crashing at Muir Beach, California (just north of San Francisco), and we encoded it as an H.264 .mp4 file, the code might look like this:NOTETo see an example of this basic code, look at the CH6EX1.html file in the code distribution.There are many properties that can be set in an HTML5 video embed. These properties are actually part of the HTMLMediaElement interface, implemented by the HTMLVideoElement object. Some of the more important properties include:srcThe URL to the video that you want to play.autoplaytrue or false. Forces the video to play automatically when loaded.looptrue or false. Loops the video back to the beginning when it has finished playing (at the time of this writing, this did not work in Firefox).volumeA number between 0 and 1. Sets the volume level of the playing video.posterA URL to an image that will be shown while the video is loading.There are also some methods of HTMLVideoElement that are necessary when playing video in conjunction with JavaScript and Canvas:play()A method used to start playing a video.pause()A method used to pause a video that is playing.Additionally, there are some properties you can use to check the status of a video, including:durationThe length of the video in seconds.currentTimeThe current playing time of the video in seconds. This can be used
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.
HandBrake (http://handbrake.fr/)
This video-converter application for the Macintosh platform creates .mp4 and .ogg file types.
FFmpeg (http://ffmpeg.org/)
This is the ultimate cross-platform, command-line tool for doing video conversions. It works in Windows/Mac/Linux and can do nearly any conversion you desire. However, there is no GUI interface, so it can be daunting for beginners. Some of the tools above use FFmpeg as their engine to do video conversions.
Basic HTML5 Video Implementation
In the tag’s most minimal implementation, it only requires a valid src atrribute. For example, if we took a nifty little video of the waves crashing at Muir Beach, California (just north of San Francisco), and we encoded it as an H.264 .mp4 file, the code might look like this:NOTETo see an example of this basic code, look at the CH6EX1.html file in the code distribution.There are many properties that can be set in an HTML5 video embed. These properties are actually part of the HTMLMediaElement interface, implemented by the HTMLVideoElement object. Some of the more important properties include:srcThe URL to the video that you want to play.autoplaytrue or false. Forces the video to play automatically when loaded.looptrue or false. Loops the video back to the beginning when it has finished playing (at the time of this writing, this did not work in Firefox).volumeA number between 0 and 1. Sets the volume level of the playing video.posterA URL to an image that will be shown while the video is loading.There are also some methods of HTMLVideoElement that are necessary when playing video in conjunction with JavaScript and Canvas:play()A method used to start playing a video.pause()A method used to pause a video that is playing.Additionally, there are some properties you can use to check the status of a video, including:durationThe length of the video in seconds.currentTimeThe current playing time of the video in seconds. This can be used
NOTE
To see an example of this basic code, look at the CH6EX1.html file in the code distribution.
There are many properties that can be set in an HTML5 video embed. These properties are actually part of the HTMLMediaElement interface, implemented by the HTMLVideoElement object. Some of the more important properties include:
src
The URL to the video that you want to play.
autoplay
true or false. Forces the video to play automatically when loaded.
loop
true or false. Loops the video back to the beginning when it has finished playing (at the time of this writing, this did not work in Firefox).
volume
A number between 0 and 1. Sets the volume level of the playing video.
poster
A URL to an image that will be shown while the video is loading.
There are also some methods of HTMLVideoElement that are necessary when playing video in conjunction with JavaScript and Canvas:
play()
A method used to start playing a video.
pause()
A method used to pause a video that is playing.
Additionally, there are some properties you can use to check the status of a video, including:
duration
The length of the video in seconds.
currentTime
The current playing time of the video in seconds. This can be used