html5 vs flash video

15
FLASH VS HTML 5 The future of video FRÉDÉRIC CARON VP TECHNOLOGIE

Upload: frederic-caron

Post on 17-May-2015

11.822 views

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Html5 vs Flash video

FLASH VS HTML 5 The future of video

FRÉDÉRIC CARONVP TECHNOLOGIE

Page 2: Html5 vs Flash video

Prior to HTML5, there was no standards-based way to embed a video in a web page.

Traditionally every video you’ve watched “on the web” has been funneled through a third-party plugin —QuickTime, RealPlayer or Flash.

Flash imposed itself in the market as the solution that reach the largest audience. That’s why Youtube choose flash to broadcast video.

The context

Page 3: Html5 vs Flash video

What is HTML ?

HTML 4.01Used to create structured documents with CSS to define the appearance and layout of text.

XHTML 1.xIntroduce new parsing rules: oriented towards flexible parsing and compatibility; not based on SGML

HTML5HTML5 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.

Page 4: Html5 vs Flash video

The myths

HTML5 will solve all the problems associated with Flash- Performance - Splash pages- AccessibilityMost common complaints associated with Flash will persist with HTML5.

The video tag will replace Flash videoFlash solved "can everyone watch my video?" Now, as we speak HTML5 video doesn’t provide this solution.

Page 5: Html5 vs Flash video

Focusing on video

Support for the <video> element is still evolving, which is a polite way of saying it doesn’t work yet.

Page 6: Html5 vs Flash video

Market Penetration

Page 7: Html5 vs Flash video

Better understand videoWhen you watch a video, your player is doing several things at once:

1.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;

2.Decoding the video stream and displaying a series of images on the screen;

3.Decoding the audio stream and sending the sound to your speakers;

Page 8: Html5 vs Flash video

The Containers

MPEG (.mp4,.m4v,.mov) (Apple)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.

WebM (Google)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.

FLASH (.flv) (Adobe)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

OGG (.ogv) (open)Ogg is an open standard, open source–friendly, and unencumbered by any known patents.

Page 9: Html5 vs Flash video

Video Codec

H.264 (Apple)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.

Theora (open)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.

VP8 (Google )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.

Page 10: Html5 vs Flash video

Audio Codec

Vorbis (open)Generally associated with the Ogg container, Vorbis is not encumbered by any known patents and supports an arbitrary number of sound channels.

MP3 (patent)Designed to contain up to 2 channels of sound , MP3 audio streams can be embedded in any video container.

AAC (apple)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.)

Page 11: Html5 vs Flash video

The Flash formatFlash supports FLV or MPG4 containers.

It’s a plug-in so not browser dependent and cross plate-form.

Page 12: Html5 vs Flash video

The <video> tagHTML5 Video supports any media.

It’s the browser that dictates which formats are played.

Page 13: Html5 vs Flash video

Conclusion

There is no single combination of containers and codecs that works in all HTML5 browsers.

This is not likely to change in the near future.

To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.

Page 14: Html5 vs Flash video

So HTML5 or Flash ?

No simple solution;

Both technologies still have their purposes. It’s important not to rally behind technologies.

Just use the right tool for the job .

Page 15: Html5 vs Flash video

LinksHTML5 standardhttp://www.whatwg.org/specs/web-apps/current-work/multipage/video.html

Flash and Standards: The Cold War of the Webhttp://www.alistapart.com/articles/flashstandards/

Video Codechttp://samples.mplayerhq.hu/V-codecs/

Flash penetration:http://www.adobe.com/products/player_census/flashplayer/

html5 video penetration:http://gs.statcounter.com/#browser_version-ww-monthly-200812-201001