HTML5 Streaming Video Tag: HTML5 Video Tag vs Flash

HTML5 Streaming Video Tag: HTML5 Video Tag vs Flash

In this article we will see some exciting video feature of HTML5. Now its very easy to stream videos on your web browser using HTML5. HTML5 has introduced video tag for streaming videos. HTML5 video tag is the replacement of Flash. We will also see the difference between HTML5 Video Tag and Flash.

Video tag for the purpose of playing videos or movies has been introduced in HTML5.

Note: The <video> tag was proposed by Opera Software  in February 2007.

No need of third party flash plugins

Video Tag plays the video on the web without any need of third party plugins. Third party plugins were not available for every device or operating system. Communication between a browser and a plug-in was limited and therefore the multimedia was very much a black box.

In simple terms, whenever you include a plugin in your pages, you're reserving a certain drawing area that the browser delegates to the plugin. As far as the browser is concerned, the plugin's area remains a black box — the browser does not process or interpret anything that is happening there.

Normally, this is not a problem, but issues can arise when your layout overlaps the plugin's drawing area. Imagine for instance a site that contains a Flash movie, but also has JavaScript or CSS-based dropdown menus that need to unfold over the movie. By default, the plugin's drawing area sits on top of the webpage, meaning that these menus will strangely appear behind the movie.

With the native <video> tag, it's the browser itself that is taking care of the rendering. As such, <video> tag behaves no differently from any other element in your page layout. It can be positioned, floated, overlapped or dynamically resized, with no additional hacks required. It is even possible to achieve interesting effects such as semi-transparent video simply by setting the opacity for the element via CSS.

Style your videos with CSS

You can style your video with CSS. You can overlay semi-transparent videos over each other, set borders and background images, rotate them on hover with transitions and transforms and many more.

Use Subtitles with your videos

You can use HTML5 <track> tag, which synchronises a file of text and timing information with a media file, displaying the text at the right time.  <track> tag is a child element of the <video> or <audio> tag, and points to a subtitles file.

Keyboard accessibility out-of-the-box

One of the great unresolved problems of using Flash is keyboard accessibility. With the exception of Internet Explorer on Windows, there is usually no way for a keyboard user to Tab or otherwise move their focus into a Flash movie. And even if these users somehow manage to get their focus into the movie (using additional assistive technologies), there is no easy way for them to Tab back out of it (unless additional ActionScript code is added to the movie to programmatically set the browser focus back out of the plugin and onto the page). In contrast, as the browser is directly responsible for the <video> element, it can handle the movie's controls as if they were regular buttons on a web page and include them in its normal tabbing order.