One of the most talked-about features of HTML5 is its new approach to embedding media on a Web page. We'll take a look at some amazing applications of this HTML5 feature later in this article. HTML5 accomplishes this embedding without requiring an external browser plugin. The following are the media elements available in HTML5:
- audio -- embeds audio in the page and includes attributes for specifying how to play it; supported file formats will vary between Web browsers
- video -- embeds video in the page and includes attributes for specifying how to play it; supported file formats will vary between Web browsers
- source -- used with audio or video elements to identify a source; multiple sources could be specified for a single item
- embed -- embeds and specifies the media type for content that might lack support within other media elements
- svg -- embed vector graphics encoded with SVG markup language, allowing them to be scaled dynamically to the area of the page in which they're loaded without losing any graphic quality
As HTML5 developed, market experts questioned whether it would replace Flash, which is currently controlled by Adobe. Flash is a media player that you can add as a plugin to your Web browser. Because Flash has all the features necessary for a site to embed different types of media, sites like YouTube have depended on it for years. There are even some Web applications that rely entirely on Flash to power their interactive interfaces. Flash adoption was so widespread in 2007 that, upon the release of the much anticipated Apple iPhone, many consumers were upset to hear that its operating system, Apple iOS, didn't support Flash.
So, who will win: Flash or HTML5? The short answer is, "Neither." Each technology has its own features, advantages and drawbacks. In addition, Adobe and Google have worked on Flash to HTML5 conversion tools. At the time of this writing, it seems that though HTML5 is gaining status, Flash is likely to retain its own popularity for a while, too.
Flash over to the next page where we'll break down the canvas element and how to use it in your HTML5 Web pages.