Java Reference
In-Depth Information
Macromedia/Adobe Flash files. This was advantageous because of Flash's ubiquity; Macromedia/
Adobe had Flash plug‐ins for every major browser and operating system. Soon thereafter, websites
started using Flash for delivering their video and audio content to users, and everything was right in
the world. Or was it?
Many people believe the browser should have the built‐in capability for playing video and
audio. So the people developing the HTML5 specification included two new tags, <video>
and <audio> , for that express purpose. And although it's wonderful that, after so many years,
browsers finally have the built‐in capability of playing media, issues still exist that we developers
have to deal with. But first, let's take a brief look at these new tags and how they work within
the browser.
a primer
Before we begin, the video used in this chapter is called Big Buck Bunny, and it is Creative
Commons-licensed as an open movie. Because of its size, you will not find the video in the code
download. You can, however, download Big Buck Bunny in a variety of formats at http://
www.bigbuckbunny.org .
It's also worth noting that video and audio are very similar; in fact, the primary difference between
the two elements is that <audio/> elements have no playback area for visual content. Although this
discussion focuses primarily on video, the same concepts can be applied to audio.
Before HTML5, embedding video within a web page was cumbersome because it required you to
use no less than three elements for the video to work in all browsers. With HTML5, however, all
you need is the <video/> element:
<video src="bbb.mp4"></video>
The <video/> element's src attribute contains the location of the video file. In this case, the browser
will attempt to load the bbb.mp4 file that is in the same directory as the page.
Of course, older browsers do not support the <video/> element, and as such, they will simply ignore
the <video/> element. You can, however, add some content inside the <video/> element like this:
<video src="bbb.mp4">
<a href="bbb.mp4">Download this video.</a>
</video>
Browsers that support native video will not display the link, but browsers that do not support native
video will, as shown in Figure 15-1.
In most cases, you won't use the src attribute in your HTML. Instead, you'll define a <source/>
element inside <video/> , like this:
<video>
<source src="bbb.mp4" />
<a href="bbb.mp4">Download this video.</a>
</video>
 
Search WWH ::




Custom Search