HTML 5 <video> tag vs Flash video. What are the pros and cons?

Imagine if there was no img tag. If you want images, you have to use a 3rd party plugin, that is really slow and has no standard way to embed it in a page. You can't easily copy images in this way, and search engines basically have no clue what if it's an image or a game or anything.

Without this, no images were available.

Then imagine that a browser was released that just let you use this fancy new img tag.

The video (and audio) tag are a logical sensible way for things to work. We shouldn't need a third party plugin to use a completely standard media format.

Flash is slow and inefficient on non-Windows platforms. It has potential security flaws. It stores "flash cookies" on your computer that you don't know about. There is no flash on the iPhone and unlikely ever will be (as a result of its being proprietary and its high CPU consumption).

HTML 5: Could it kill Flash and Silverlight? is an article that might answer your question.

There are probably more reasons out there.

The biggest benefit of <video>? It's easy. Crazy easy. Ridiculously easy. Your-grandma-can-code-a-video-tag easy. <video src="myfile.ogv"></video> and you're done.

<video> also has clear benefits for your users. They get a browser-native video player, which can potentially be very efficient. They get a consistent UI that won't change from site to site. Mobile browsers that may not implement flash can still implement <video>.

The only con is a temporary one, and that is compatibility. IE8 doesn't support <video>, and it will be some time before IE9 is widely installed. As well, there's some fight over which codecs to support for the videos - Firefox, Chrome, and Opera all support both Ogg Theora and WebM, while Safari and IE are shipping H.264 (though either can support Theora/WebM with proper codecs). For now, this just means that you have to post your video in two formats and provide them both with the source element, i.e.:

<video>
  <source src='video.webm' type='video/webm'>
  <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

To add support for IE 8 and earlier, and other downlevel clients (like older versions of FF/Safari/Opera/etc), just put your standard video embed code inside the <video> tag, below the <source> elements. If the browser supports <video>, it'll ignore the embed. If it doesn't, it'll ignore the <video> and run the embed instead.