Html5 vs Flash video


Published on

Should we use Flash or HTML5 to embed video in our web pages

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html5 vs Flash video

  2. 2. <ul><li>Prior to HTML5, there was no standards-based way to embed a video in a web page. </li></ul><ul><li>Traditionally every video you’ve watched “on the web” has been funneled through a third-party plugin —QuickTime, RealPlayer or Flash. </li></ul><ul><li>Flash imposed itself in the market as the solution that reach the largest audience. That’s why Youtube choose flash to broadcast video. </li></ul>The context
  3. 3. What is HTML ? <ul><li>HTML 4.01 </li></ul><ul><li>Used to create structured documents with CSS to define the appearance and layout of text. </li></ul><ul><li>XHTML 1.x </li></ul><ul><li>Introduce new parsing rules: oriented towards flexible parsing and compatibility; not based on SGML </li></ul><ul><li>HTML5 </li></ul><ul><ul><li>HTML5 is still a draft , it adds semantic replacements for common uses of generic block (<div>) and inline (<span>) elements. In addition to specifying markup, HTML5 specifies scripting API. </li></ul></ul>
  4. 4. The myths <ul><li>HTML5 will solve all the </li></ul><ul><li>problems associated with Flash </li></ul><ul><li>- Performance </li></ul><ul><li>- Splash pages </li></ul><ul><li>- Accessibility </li></ul><ul><li>Most common complaints associated with Flash will persist with HTML5. </li></ul><ul><li>The video tag will replace Flash video </li></ul><ul><li>Flash solved &quot;can everyone watch my video?&quot; Now, as we speak HTML5 video doesn’t provide this solution. </li></ul>
  5. 5. Focusing on video <ul><ul><li>Support for the <video> element is still evolving, which is a polite way of saying it doesn’t work yet. </li></ul></ul>
  6. 6. Market Penetration
  7. 7. Better understand video <ul><ul><li>When you watch a video, your player is doing several things at once: </li></ul></ul><ul><ul><li>Interpreting the container format to find out which video and audio tracks are available, and how they are stored within the file so that it can find the data it needs to decode next; </li></ul></ul><ul><ul><li>Decoding the video stream and displaying a series of images on the screen; </li></ul></ul><ul><ul><li>Decoding the audio stream and sending the sound to your speakers; </li></ul></ul>
  8. 8. The Containers <ul><ul><li>MPEG (.mp4,.m4v,.mov) (Apple) </li></ul></ul><ul><ul><li>The MPEG 4 container is based on Apple’s older QuickTime container (.mov). Movie trailers on Apple’s website still use the older QuickTime container, but movies that you rent from iTunes are delivered in an MPEG 4 container. </li></ul></ul><ul><ul><li>WebM (Google) </li></ul></ul><ul><ul><li>is a new container format. It is technically very similar to another format, called Matroska. WebM was announced at Google I/O 2010. It is designed to be used exclusively with the VP8 video codec and Vorbis audio codec. Adobe also announced that the next version of flash will support it. </li></ul></ul><ul><ul><li>FLASH (.flv) (Adobe) </li></ul></ul><ul><ul><li>Flash Video is, unsurprisingly, used by Adobe Flash. Prior to Flash, this was the only container format that Flash supported. More recent versions of Flash also support the MPEG 4 container </li></ul></ul><ul><ul><li>OGG (.ogv) (open) </li></ul></ul><ul><ul><li>Ogg is an open standard, open source–friendly, and unencumbered by any known patents. </li></ul></ul>
  9. 9. Video Codec <ul><ul><li>H.264 (Apple) </li></ul></ul><ul><ul><li>a.k.a. MPEG-4 Advanced Video Coding. It aims to provide a single codec for low-bandwidth, low-CPU devices (cell phones); high-bandwidth, high-CPU devices (modern desktop computers); and everything in between. </li></ul></ul><ul><ul><li>Theora (open) </li></ul></ul><ul><ul><li>Theora is a royalty-free codec and is not encumbered by any known patents. Although if Theora video can be embedded in any container format, it is most often seen in an Ogg container. </li></ul></ul><ul><ul><li>VP8 (Google ) </li></ul></ul><ul><ul><li>VP8 is a royalty-free, modern codec and is not encumbered by any known patents, other than the patents that On2 (now Google) has already licensed royalty-free. </li></ul></ul>
  10. 10. Audio Codec <ul><ul><li>Vorbis (open) </li></ul></ul><ul><ul><li>Generally associated with the Ogg container, Vorbis is not encumbered by any known patents and supports an arbitrary number of sound channels. </li></ul></ul><ul><ul><li>MP3 ( patent) </li></ul></ul><ul><ul><li>Designed to contain up to 2 channels of sound , MP3 audio streams can be embedded in any video container. </li></ul></ul><ul><ul><li>AAC ( apple) </li></ul></ul><ul><ul><li>The AAC format is patent and was designed to provide better sound quality than MP3 at the same bitrate, and it can encode audio at any bitrate. (MP3 max 320 kbps.) </li></ul></ul>
  11. 11. The Flash format Flash supports FLV or MPG4 containers. It’s a plug-in so not browser dependent and cross plate-form.
  12. 12. The <video> tag <ul><li>HTML5 Video supports any media. </li></ul><ul><li>It’s the browser that dictates which </li></ul><ul><li>formats are played. </li></ul>
  13. 13. Conclusion <ul><li>There is no single combination of containers and codecs that works in all HTML5 browsers. </li></ul><ul><li>This is not likely to change in the near future. </li></ul><ul><li>To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once. </li></ul>
  14. 14. So HTML5 or Flash ? <ul><li>No simple solution; </li></ul><ul><li>Both technologies still have their purposes. </li></ul><ul><li>It’s important not to rally behind technologies. </li></ul><ul><li>Just use the right tool for the job . </li></ul>
  15. 15. Links <ul><li>HTML5 standard </li></ul><ul><li> </li></ul><ul><li>Flash and Standards: The Cold War of the Web </li></ul><ul><li> </li></ul><ul><li>Video Codec </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Flash penetration: </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>html5 video penetration: </li></ul></ul><ul><ul><li> </li></ul></ul>