HTML and CSS Reference
In-Depth Information
chapter 3
n n n
Working with Audio and Video
Web sites built more than a decade ago were mainly collections of static HTML pages. Then came
JavaScript, and web pages became more interactive and animated. However, media-rich web sites were
still in their infancy. Over the years the situation has changed to a great extent. Web sites supporting audio
and video aren't at all uncommon. Video-sharing web sites such as YouTube have become immensely
popular. To add to this media madness, social networking web sites such as Facebook and Google+ let you
share videos with just a click of your mouse. The bottom line is that media-rich web sites will become
more and more common in the years to come.
For pre-HTML5 web applications, developers need to rely on third-party plug-ins to display audio and
video files. That is because HTML 4.01 doesn't have native support for playing media files.
Native support
means the HTML markup and the browser can display media files without needing any external plug-in or
application. HTML5 is set to change the picture: it offers native support for playing audio and video files.
Not only that, it exposes audio and video APIs that allow you to control how media files are played in the
browser. This chapter covers all you need to know to use HTML5's audio and video features. Specifically,
you learn about the following:
• Using the
<audio>
element
• Using the
<video>
element
• Media formats supported by leading browsers
• Providing a fallback mechanism in cases where the browser doesn't support HTML5
• Creating a custom video player using audio and video API and jQuery
Embedding Media Files Using the <object> Tag
Before discussing the HTML5-specific ways you can play audio and video files, let's glance at the
techniques that are commonly in use today. Although HTML5 provides native support for embedding
audio and video files in a web page, not all browsers support HTML5. To ensure that your web page works
as expected in such browsers, you can use the techniques discussed in this section as a fallback
mechanism.
The HTML
<object>
tag is a general-purpose tag that lets you embed objects in your web page: media
files, ActiveX controls, Java applets, or even PDF files. However, more commonly it's used to display audio
and video files. The
<object>
tag needs a third-party plug-in to load and play media files; you can use
Adobe Flash, Apple QuickTime, and Microsoft Silverlight based plug-ins. If the target machine doesn't have
the required plug-in installed, the media file will refuse to play.
