Web Design with HTML and CSS

(National Geographic (Little) Kids) #1
The <video>, <audio>, and <canvas> elements

Lesson 12, HTML5 Essentials 259

Embedding an MP3 audio fi le in your page is very similar; you can also add built-in player
controls and preloading capabilities with the controls, preload, and autobuff er attributes:


<audio src="high_seas_rip.mp3" controls preload="auto"
autobuffer></audio>

An HTML5 video player with built-in support for volume, full-screen view, and other playback controls


There is an increasing demand to easily add video and audio; however, it can become
complicated depending on the fi le formats of your video and audio and the browser support
for them. In the above example for video, the src attribute is pointing to the fi le catz.mp4
(.mp4 is the extension for the MPEG4 video format). Currently, modern browsers that
support this format include Apple Safari and Google Chrome, but not Mozilla Firefox or
Internet Explorer. The upcoming version of Internet Explorer 9 will support the MP4
format, but the Firefox browser, which represents roughly 20 to 30 percent of the market
share, will not. Firefox supports a video format called Ogg Theora (.ogg), which is not
supported by Internet Explorer or Safari. There are similar discrepancies with audio: the MP3
format is not supported by default in Firefox.

Free download pdf