HTML and CSS Reference
In-Depth Information
HTML5 AND STREAMING
HTML5 media elements are protocol agnostic, which means you can specify streaming audio and
video in
audio
and
video.
The real issue with using streaming media is user agent and operating
system support. As an example, Safari on the Mac Desktop supports Real-Time Streaming Protocol
(RTSP), but Safari on iOS only supports HTTP Live Streaming. However, if you try to open an RTSP
streaming video in Safari on Windows (from the YouTube mobile site at m.youtube.com), you'll get
a protocol error (the same error you'll get with other browsers).
However, if you install an application such as Real Player to view the RTSP file, the file opens in
the Real Player, rather than the browser. Streaming media support in HTML5 is definitely not for the
faint of heart at this time.
Ensuring Complete Video Codec Support
You can't assume your web page readers have plug-ins installed to play Ogg or WebM videos
in Safari or IE. In order to ensure that a video is accessible by all of the target browsers,
you'll need to provide, at minimum, two different
source
elements for your video element.
Example 1-5
shows an HTML5 web page with a video element containing two different video
sources: one in H.264 (necessary for IE and Safari), and one in WebM (for Firefox, Opera,
and Chrome). In addition, if you want to ensure that non-HTML5 compliant browsers have
access to the video, you'll also need to provide some form of fallback. In the example below,
the fallback is a YouTube video. Another choice can be Flash or another plug-in.
Example1-5.HTML5 web page with video that works in all target browsers
<!DOCTYPE html>
<head>
<title>Big Buck Bunny Video</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<video controls>
<source src="videofile.mp4" type="video/mp4" />
<source src="videofile.webm" type="video/webm" />
<iframe width="640" height="390"
src="http://www.youtube.com/embed/YE7VzlLtp-4">
</iframe>
</video>
</body>
Figure 1-2
shows the video playing in Chrome, which supports the embedded HTML5 video.
Figure 1-3
shows a YouTube video playing in IE9 with compatibility mode turned on, emu-
lating an older version of IE that doesn't support HTML5 video.
