HTML5 Video Explained
Upcoming SlideShare
Loading in...5
×
 

HTML5 Video Explained

on

  • 36,429 views

What is HTML5 Video and how is it different from what we are used to? What problems does it solve, and what issues does it have? This is the web, so it's open source right? In this presentation, we ...

What is HTML5 Video and how is it different from what we are used to? What problems does it solve, and what issues does it have? This is the web, so it's open source right? In this presentation, we will address these questions and provide some basic terminology for understanding how video works. We'll show how to embed HTML5 Video API and explore the API. Next we'll discuss what browser it doesn't work on, and the capabilities of the ones that it does.

HTML5 Video unfortunately does not mean one video codec. After showing what a codec is, we'll show which browsers and devices support which codecs. Finally, we'll go over video encoding possibilities.

Statistics

Views

Total Views
36,429
Views on SlideShare
25,314
Embed Views
11,115

Actions

Likes
22
Downloads
431
Comments
1

19 Embeds 11,115

http://randle.wordpress.com 6709
http://blog.joomla.org.tw 4054
http://clubajax.org 124
http://blog.wooshii.com 58
http://yosemite.blackboard.com 48
http://webcache.googleusercontent.com 37
http://wooshii.com 25
https://randle.wordpress.com 23
http://localhost 13
url_unknown 8
http://www.techgig.com 6
http://www.slideshare.net 2
http://www.linkedin.com 2
http://members.webs.com 1
http://203.84.192.95 1
http://cache.baidu.com 1
http://translate.googleusercontent.com 1
http://twitter.com 1
http://202.43.195.111 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • How to play/open the presentation after downloading
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

HTML5 Video Explained HTML5 Video Explained Presentation Transcript

  • HTML5 Video By Mike Wilcox July 6th, 2010
  • A Brief History of Online Video...
  • Online Video Beginnings
  • Online Video Beginnings In the 90s it was just cool if video played on the computer, much less online
  • Online Video Beginnings In the 90s it was just cool if video played on the computer, much less online As of 2000, online video was a reality, but it was a mess
  • Online Video Beginnings In the 90s it was just cool if video played on the computer, much less online As of 2000, online video was a reality, but it was a mess RealPlayer was the best at online video, but was the quintessential nag-ware and spy-ware
  • Online Video Beginnings In the 90s it was just cool if video played on the computer, much less online As of 2000, online video was a reality, but it was a mess RealPlayer was the best at online video, but was the quintessential nag-ware and spy-ware Quicktime was better, was crippled by Windows versioning and backwards compatibility
  • Online Video Beginnings In the 90s it was just cool if video played on the computer, much less online As of 2000, online video was a reality, but it was a mess RealPlayer was the best at online video, but was the quintessential nag-ware and spy-ware Quicktime was better, was crippled by Windows versioning and backwards compatibility Windows Media was still playing catch up
  • Flash Takes Over
  • Flash Takes Over In 2002, Macromedia releases Flash video using Sorenson Spark
  • Flash Takes Over In 2002, Macromedia releases Flash video using Sorenson Spark In 2003 Macromedia releases the FLV format using VP6
  • Flash Takes Over In 2002, Macromedia releases Flash video using Sorenson Spark In 2003 Macromedia releases the FLV format using VP6 YouTube, making exclusive use of the Flash FLV format, is launched in 2005
  • Flash Takes Over In 2002, Macromedia releases Flash video using Sorenson Spark In 2003 Macromedia releases the FLV format using VP6 YouTube, making exclusive use of the Flash FLV format, is launched in 2005 In 2006, Adobe added the option to use the H.264 codec
  • Flash Embed Example
  • Flash Embed Example <object id="UNIQUEID" height="520" width="528" codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=9,0,0,0" classid="clsid:d27cdb6e- ae6d-11cf-96b8-444553540000" > <param value="../player/myVideoPlayer.swf" name="movie" /> <param value="true" name="allowFullScreen" /> <param value="all" name="allowNetworking" /> <param value="always" name="allowScriptAccess" /> <param value="opaque" name="wmode" /> <param value="myVideoFile.flv" name="FlashVars" /> <embed height="520" width="528" src="../player/mds_player.swf" id="UNIQUEID" wmode="opaque" allowscriptaccess="always" allownetworking="all" allowfullscreen="true" swf="../player/myVideoPlayer.swf" flashvars="myVideoFile.flv" pluginspage="http://www.macromedia.com/go/ getflashplayer" type="application/x-shockwave-flash" quality="high" /> </object>
  • Problems with Flash
  • Problems with Flash Plugins not always an elegant solution As the Apple vs Adobe battle has exposed
  • Problems with Flash Plugins not always an elegant solution As the Apple vs Adobe battle has exposed Reliance upon proprietary technology Video is too important a component of the web to not standardize Need for at least some knowledge of ActionScript
  • Non-Flash Video Problems
  • Non-Flash Video Problems OS and browser combinations create different video problems Example: WMV on Firefox on a Mac
  • Non-Flash Video Problems OS and browser combinations create different video problems Example: WMV on Firefox on a Mac Problems often solved with JavaScript Uses very inaccurate browser sniffing
  • Non-Flash Video Problems OS and browser combinations create different video problems Example: WMV on Firefox on a Mac Problems often solved with JavaScript Uses very inaccurate browser sniffing Different video formats often needed WMV, MOV, maybe REAL, etc.
  • HTML5 Video Basic Example
  • HTML5 Video Basic Example <video src="SightAndSound.mp4" width="320" height="240" controls> </video>
  • HTML5 Video Benefits
  • HTML5 Video Benefits
  • HTML5 Video Benefits First Class citizen
  • HTML5 Video Benefits First Class citizen Native to browser / no plugins
  • HTML5 Video Benefits First Class citizen Native to browser / no plugins One tag handles multiple video types
  • HTML5 Video Benefits First Class citizen Native to browser / no plugins One tag handles multiple video types No JavaScript nor ActionScript required
  • HTML5 Video Problems
  • HTML5 Video Problems Not supported in IE8 (will be in IE9)
  • HTML5 Video Problems Not supported in IE8 (will be in IE9) Native controls not consistent amongst browsers
  • HTML5 Video Problems Not supported in IE8 (will be in IE9) Native controls not consistent amongst browsers Fullscreen capability not standard and still under consideration
  • HTML5 Video Problems Not supported in IE8 (will be in IE9) Native controls not consistent amongst browsers Fullscreen capability not standard and still under consideration Need full HTML fullscreen ability, not just video
  • HTML5 Video Problems Not supported in IE8 (will be in IE9) Native controls not consistent amongst browsers Fullscreen capability not standard and still under consideration Need full HTML fullscreen ability, not just video YouTube devs weighing in on this importance
  • HTML5 Video Problems Not supported in IE8 (will be in IE9) Native controls not consistent amongst browsers Fullscreen capability not standard and still under consideration Need full HTML fullscreen ability, not just video YouTube devs weighing in on this importance
  • HTML5 Video Problems (2)
  • HTML5 Video Problems (2) Poor meta info
  • HTML5 Video Problems (2) Poor meta info No DRM, No streaming
  • HTML5 Video Problems (2) Poor meta info No DRM, No streaming No SMIL nor playlist capability
  • HTML5 Video Problems (2) Poor meta info No DRM, No streaming No SMIL nor playlist capability Early implementation has many cross browser/device bugs
  • HTML5 Video Problems (2) Poor meta info No DRM, No streaming No SMIL nor playlist capability Early implementation has many cross browser/device bugs Lack of agreement for a common file type
  • HTML5 Video Advanced Example
  • HTML5 Video Advanced Example <video width="320" height="240" controls > <source src="SightAndSound.mp4" type="video/mp4 codecs='avc1.42E01E, mp4a.40.2'"/> <source src="SightAndSound.ogv" type="video/ogg codecs='theora, vorbis'" /> <source src="SightAndSound.webm" type="video/webm codecs='vorbis, vp8'" /> </video>
  • API
  • API Properties Methods Events src play play currentSrc pause pause type load progress currentTime canPlayType error videoWidth timeupdate videoHeight ended duration abort ended empty error emptied seeking waiting volume loadedmetadata poster autoplay controls buffer preload autobuffer
  • API Bugs
  • API Bugs
  • API Bugs iPad bug when dynamically created
  • API Bugs iPad bug when dynamically created iPad poster bug
  • API Bugs iPad bug when dynamically created iPad poster bug iPad source order bug
  • API Bugs iPad bug when dynamically created iPad poster bug iPad source order bug WebKit error event must be on source objects
  • API Bugs iPad bug when dynamically created iPad poster bug iPad source order bug WebKit error event must be on source objects progress event not standardized
  • API Bugs iPad bug when dynamically created iPad poster bug iPad source order bug WebKit error event must be on source objects progress event not standardized Firefox very buggy when changing media
  • API Bugs iPad bug when dynamically created iPad poster bug iPad source order bug WebKit error event must be on source objects progress event not standardized Firefox very buggy when changing media loadedmetadata fires when meta is is partially loaded
  • API Bugs iPad bug when dynamically created iPad poster bug iPad source order bug WebKit error event must be on source objects progress event not standardized Firefox very buggy when changing media loadedmetadata fires when meta is is partially loaded Even more bugs are listed here: http://camendesign.com/code/video_for_everybody
  • Video Terminology Primer
  • File Format
  • File Format File Format = Container = Wrapper
  • File Format File Format = Container = Wrapper MP4, WebM and OGV are wrappers
  • File Format File Format = Container = Wrapper MP4, WebM and OGV are wrappers The wrapper is the essentially the meta data file format that describes how the data is stored and gives information to your computer so that it can load the necessary libraries in which to display it.
  • File Format File Format = Container = Wrapper MP4, WebM and OGV are wrappers The wrapper is the essentially the meta data file format that describes how the data is stored and gives information to your computer so that it can load the necessary libraries in which to display it. A wrapper generally contains a video and an audio codec
  • File Format File Format = Container = Wrapper MP4, WebM and OGV are wrappers The wrapper is the essentially the meta data file format that describes how the data is stored and gives information to your computer so that it can load the necessary libraries in which to display it. A wrapper generally contains a video and an audio codec Has instructions on how they should play and sync
  • Codec
  • Codec MP4 uses H264 video AAC audio
  • Codec MP4 uses H264 video AAC audio WebM uses VP8 video Vorbis audio
  • Codec MP4 uses H264 video AAC audio WebM uses VP8 video Vorbis audio OGG uses Theora video and Vorbis audio
  • Codec MP4 uses H264 video AAC audio WebM uses VP8 video Vorbis audio OGG uses Theora video and Vorbis audio A codec is the code that handles the decoding of the images, audio or other data.
  • Codec MP4 uses H264 video AAC audio WebM uses VP8 video Vorbis audio OGG uses Theora video and Vorbis audio A codec is the code that handles the decoding of the images, audio or other data. It usually but not always includes the process for compressing the encoded data.
  • Implemented HTML5 Video File Formats
  • Implemented HTML5 Video File Formats WebM OGG MP4
  • Implemented by Browser
  • Implemented by Browser MP4 OGG WebM IE9 FireFox 4.0 Chrome 6 Safari 5 Opera 10.6
  • Implemented by Browser MP4 OGG WebM IE9 FireFox 4.0 Chrome 6 Safari 5 Opera 10.6 Safari on the Mac or IE9 on Windows will be able to supported any type if that codec is installed on the OS. Other browsers (Firefox, Opera, Chrome) will need to specifically implement the video codec, so their support will be limited to few formats.
  • Implemented by Device* * Not a complete list of course.
  • Implemented by Device* iPhone iPad Android * Not a complete list of course.
  • Implemented by Device* iPhone iPad Android All handle H264 video codecs * Not a complete list of course.
  • Implemented by Device* iPhone iPad Android All handle H264 video codecs Android handles only MP4 file formats * Not a complete list of course.
  • Implemented by Device* iPhone iPad Android All handle H264 video codecs Android handles only MP4 file formats iPhone handles MP4, but M4V is a native Quicktime extension and allows for more variance in the encodings * Not a complete list of course.
  • Implemented by Device* iPhone iPad Android All handle H264 video codecs Android handles only MP4 file formats iPhone handles MP4, but M4V is a native Quicktime extension and allows for more variance in the encodings Most other mobile phones use 3GP * Not a complete list of course.
  • Implemented by Device* iPhone iPad Android All handle H264 video codecs Android handles only MP4 file formats iPhone handles MP4, but M4V is a native Quicktime extension and allows for more variance in the encodings Most other mobile phones use 3GP * Not a complete list of course.
  • Implemented by Device* iPhone iPad Android Mobile Phones usually have the video codec implemented in the hardware. So iPhone, iPad, Android phones all will only ever play the codec that they came with. Namely H264. * Not a complete list of course.
  • Encoding Software* * Not a complete list. Open Source or free software is shown.
  • WebM For full list, go to the WebM Project Tools Page: http://www.webmproject.org/tools/
  • WebM FFMPEG (command line) http://www.ffmpeg.org/ DirectShow Filters (plugin) http://www.webmproject.org/tools/ FireFogg (browser based) http://www.firefogg.org/ Most awesome logo ever! For full list, go to the WebM Project Tools Page: http://www.webmproject.org/tools/
  • OGG
  • OGG FFMPEG (command line) ffmpeg2theora http://www.ffmpeg.org/ FireFogg (browser based) http://www.firefogg.org/
  • MP4
  • MP4 FFMPEG (command line) http://www.ffmpeg.org/ Handbrake (GUI) http://handbrake.fr/ MPEG Streamclip (GUI) http://www.squared5.com/
  • Advanced Terminology
  • VBR/CBR
  • VBR/CBR Constant Bitrate (CBR)
  • VBR/CBR Constant Bitrate (CBR) The rate at which a codec's output data should be consumed is constant
  • VBR/CBR Constant Bitrate (CBR) The rate at which a codec's output data should be consumed is constant Useful for streaming
  • VBR/CBR Constant Bitrate (CBR) The rate at which a codec's output data should be consumed is constant Useful for streaming Variable Bitrate (VBR)
  • VBR/CBR Constant Bitrate (CBR) The rate at which a codec's output data should be consumed is constant Useful for streaming Variable Bitrate (VBR) Allows a higher bitrate to be allocated to the more complex segments of media files while less space is allocated to less complex segments.
  • VBR/CBR Constant Bitrate (CBR) The rate at which a codec's output data should be consumed is constant Useful for streaming Variable Bitrate (VBR) Allows a higher bitrate to be allocated to the more complex segments of media files while less space is allocated to less complex segments. Useful for progressively downloaded videos
  • Multi Pass
  • Multi Pass First pass used to analyze, second for encoding.
  • Multi Pass First pass used to analyze, second for encoding. Used only for VBR.
  • Multi Pass First pass used to analyze, second for encoding. Used only for VBR. Cannot be used with streaming
  • Macroblock
  • Macroblock An image compression component and technique similar to JPEG
  • Macroblock An image compression component and technique similar to JPEG The size of a block depends on the codec and is usually a multiple of 4.
  • Macroblock An image compression component and technique similar to JPEG The size of a block depends on the codec and is usually a multiple of 4. In MPEG2 and other early codecs the size is fixed at blocks of 8x8 pixels, which is where the convention comes from of ecoding with sizes of a multiple of 8: 320, 640, 720, etc.
  • Macroblock An image compression component and technique similar to JPEG The size of a block depends on the codec and is usually a multiple of 4. In MPEG2 and other early codecs the size is fixed at blocks of 8x8 pixels, which is where the convention comes from of ecoding with sizes of a multiple of 8: 320, 640, 720, etc.
  • Macroblock An image compression component and technique similar to JPEG The size of a block depends on the codec and is usually a multiple of 4. In MPEG2 and other early codecs the size is fixed at blocks of 8x8 pixels, which is where the convention comes from of ecoding with sizes of a multiple of 8: 320, 640, 720, etc.
  • Square Pixels
  • Square Pixels Square Pixels / Pixel Aspect Ratio
  • Square Pixels Square Pixels / Pixel Aspect Ratio An unfortunate artifact with continued confusion from the early video conversion software days. Essentially it explains 720x480 using non-square pixels and 640x480 using square pixels.
  • Square Pixels Square Pixels / Pixel Aspect Ratio An unfortunate artifact with continued confusion from the early video conversion software days. Essentially it explains 720x480 using non-square pixels and 640x480 using square pixels. If the incorrect conversion is used, the image will be stretched.
  • Frame Types
  • Frame Types Intra-coded: I‑frames are the least compressible but don't require other video frames to decode.
  • Frame Types Intra-coded: I‑frames are the least compressible but don't require other video frames to decode. Predicted: P‑frames can use data from previous frames to decompress and are more compressible than I‑frames.
  • Frame Types Intra-coded: I‑frames are the least compressible but don't require other video frames to decode. Predicted: P‑frames can use data from previous frames to decompress and are more compressible than I‑frames. Bi-Directional Predicted: B‑frames can use both previous and forward frames for data reference to get the highest amount of data compression.
  • Frame Types Intra-coded: I‑frames are the least compressible but don't require other video frames to decode. Predicted: P‑frames can use data from previous frames to decompress and are more compressible than I‑frames. Bi-Directional Predicted: B‑frames can use both previous and forward frames for data reference to get the highest amount of data compression.
  • Level
  • Level Used for MP4 encoding (16 levels, 1 through 5.1)
  • Level Used for MP4 encoding (16 levels, 1 through 5.1) An indicator for a decompressor's capability
  • Level Used for MP4 encoding (16 levels, 1 through 5.1) An indicator for a decompressor's capability Essentially a shortcut to constrain different video components when compressing Macroblocks Bitrate Resolution Frame rate Key frames
  • Profile
  • Profile Used for MP4 encoding
  • Profile Used for MP4 encoding Defined sets of capabilities
  • Profile Used for MP4 encoding Defined sets of capabilities Larger profiles often contain the lower profiles
  • Profile Used for MP4 encoding Defined sets of capabilities Larger profiles often contain the lower profiles Common Profiles:
  • Profile Used for MP4 encoding Defined sets of capabilities Larger profiles often contain the lower profiles Common Profiles: Baseline: Used for web, videoconferencing and mobile applications.
  • Profile Used for MP4 encoding Defined sets of capabilities Larger profiles often contain the lower profiles Common Profiles: Baseline: Used for web, videoconferencing and mobile applications. Main: Used for standard-definition digital TV broadcasts, or high resolution web broadcast
  • Profile Used for MP4 encoding Defined sets of capabilities Larger profiles often contain the lower profiles Common Profiles: Baseline: Used for web, videoconferencing and mobile applications. Main: Used for standard-definition digital TV broadcasts, or high resolution web broadcast High: Used for broadcast and disc storage applications, particularly Blu-ray
  • Licensing
  • OGG / Theora
  • OGG / Theora Open source, patent free, royalty free, under the BSD License
  • OGG / Theora Open source, patent free, royalty free, under the BSD License Free, as in beer.
  • OGG / Theora Open source, patent free, royalty free, under the BSD License Free, as in beer. In 2002, On2 TrueMotion donated their VP3 codec to the Xiph.Org Foundation
  • OGG / Theora Open source, patent free, royalty free, under the BSD License Free, as in beer. In 2002, On2 TrueMotion donated their VP3 codec to the Xiph.Org Foundation Theora was forked off from the released codebase of VP3.2
  • OGG / Theora Open source, patent free, royalty free, under the BSD License Free, as in beer. In 2002, On2 TrueMotion donated their VP3 codec to the Xiph.Org Foundation Theora was forked off from the released codebase of VP3.2 Theora 1.0 was released in November 2008
  • OGG / Theora Open source, patent free, royalty free, under the BSD License Free, as in beer. In 2002, On2 TrueMotion donated their VP3 codec to the Xiph.Org Foundation Theora was forked off from the released codebase of VP3.2 Theora 1.0 was released in November 2008 No hardware support
  • WebM / VP8
  • WebM / VP8 Open source, royalty free, under the BSD License
  • WebM / VP8 Open source, royalty free, under the BSD License Free, as in beer (maybe).
  • WebM / VP8 Open source, royalty free, under the BSD License Free, as in beer (maybe). Some hardware support (AMD, ARM), with players such as Intel and NVIDIA considering it
  • WebM / VP8 Open source, royalty free, under the BSD License Free, as in beer (maybe). Some hardware support (AMD, ARM), with players such as Intel and NVIDIA considering it Patent-free legitimacy is widely disputed
  • WebM / VP8 Open source, royalty free, under the BSD License Free, as in beer (maybe). Some hardware support (AMD, ARM), with players such as Intel and NVIDIA considering it Patent-free legitimacy is widely disputed MPEG LA threatening a patent pool to collect royalties
  • FLV / Flash Video FLV is not an HTML5 Video codec. It is listed here for comparison.
  • FLV / Flash Video All are patent-restricted (ergo, not free as in beer) FLV is not an HTML5 Video codec. It is listed here for comparison.
  • FLV / Flash Video All are patent-restricted (ergo, not free as in beer) Sorenson H263 (FLV) Originally a Quicktime codec FLV is not an HTML5 Video codec. It is listed here for comparison.
  • FLV / Flash Video All are patent-restricted (ergo, not free as in beer) Sorenson H263 (FLV) Originally a Quicktime codec VP6 (FLV) Also used in JavaFX FLV is not an HTML5 Video codec. It is listed here for comparison.
  • FLV / Flash Video All are patent-restricted (ergo, not free as in beer) Sorenson H263 (FLV) Originally a Quicktime codec VP6 (FLV) Also used in JavaFX H264 (F4V) Same as MP4 and M4V FLV is not an HTML5 Video codec. It is listed here for comparison.
  • FLV / Flash Video All are patent-restricted (ergo, not free as in beer) Sorenson H263 (FLV) Originally a Quicktime codec VP6 (FLV) Also used in JavaFX H264 (F4V) Same as MP4 and M4V Adobe favoring support for F4V over FLV FLV is not an HTML5 Video codec. It is listed here for comparison.
  • FLV / Flash Video All are patent-restricted (ergo, not free as in beer) Sorenson H263 (FLV) Originally a Quicktime codec VP6 (FLV) Also used in JavaFX H264 (F4V) Same as MP4 and M4V Adobe favoring support for F4V over FLV WebM Adobe announced they will soon support WebM FLV is not an HTML5 Video codec. It is listed here for comparison.
  • MP4 / H264
  • MP4 / H264 Free as in... you’ll pay later. Actually, free for non-paid web use until 2015
  • MP4 / H264 Free as in... you’ll pay later. Actually, free for non-paid web use until 2015 Enjoys broad adoption of hardware support
  • MP4 / H264 Free as in... you’ll pay later. Actually, free for non-paid web use until 2015 Enjoys broad adoption of hardware support Heavily patent encumbered, mercilessly enforced by the MPEG LA Group Not affiliated with the MPEG standardization organization
  • MP4 / H264 Free as in... you’ll pay later. Actually, free for non-paid web use until 2015 Enjoys broad adoption of hardware support Heavily patent encumbered, mercilessly enforced by the MPEG LA Group Not affiliated with the MPEG standardization organization The last patents for H.264 may not expire until 2028
  • MP4 / H264 Free as in... you’ll pay later. Actually, free for non-paid web use until 2015 Enjoys broad adoption of hardware support Heavily patent encumbered, mercilessly enforced by the MPEG LA Group Not affiliated with the MPEG standardization organization The last patents for H.264 may not expire until 2028 MP4 directly based on Apple’s Quicktime MOV
  • MPEG LA Group
  • MPEG LA Group group noun [treated as sing. or pl. ] Something people do together: We shared a group hug Something organizations do together: The G8 makes unilateral decisions for the rest of the world.
  • H264 Patent Holders
  • H264 Patent Holders Apple Inc., DAEWOO Electronics Corporation, Dolby Laboratories Licensing Corporation, Electronics and Telecommunications Research Institute, France Télécom, société anonyme, Fraunhofer-Gesellschaft zur Foerderung der angewandten Forschung e.V., Fujitsu Limited, Hitachi, Ltd., Koninklijke Philips Electronics N.V., LG Electronics Inc., Microsoft Corporation, Mitsubishi Electric Corporation, NTT DOCOMO, INC., Nippon Telegraph and Telephone Corporation, Panasonic Corporation, Robert Bosch GmbH, Samsung Electronics Co., Ltd., Scientific-Atlanta Vancouver Company, Sedna Patent Services, LLC, Sharp Corporation, Siemens AG, Sony Corporation, Telefonaktiebolaget LM Ericsson, The Trustees of Columbia University in the City of New York, Toshiba Corporation, Victor Company of Japan, Limited
  • Apple
  • Apple Good Guy: Thanks to their power wielded over Adobe and their influence afforded to them by the iPhone and iPad, Apple was able to push the HTML5 Video standard and its adoption forward
  • Apple Good Guy: Thanks to their power wielded over Adobe and their influence afforded to them by the iPhone and iPad, Apple was able to push the HTML5 Video standard and its adoption forward Bad Guy: Apple, holder of many H264 patents, is baiting the entire web into accepting H264 as the standard. The 5 year hiatus on fees could mean larger fees and back payments in 2015
  • Codec Recap
  • Codec Recap OGG Theora Not widely accepted, no hardware support, free WebM Free, acceptance growing very quickly including Flash, hardware support building, patent lawsuits looming, not supported on iPhone nor iPad, free and back by Google/YouTube MP4 Very well developed industry standard, smallest files and clearest images, broad hardware support, fees looming, don’t count out Google
  • HTML5 Video Recap
  • HTML5 Video Recap OGG Good for a few files, small sites, compatibility not a problem, open source maniacs WebM Good for sites with many files, compatibility not tied financial bottom line, viewable with Flash soon, not worried about iApple MP4 Best for overall compatibility and viewer adoption, playable on all browsers and the newer mobile platforms if you include a Flash player, best solution if only one version of the video is desired
  • References
  • References http://webmproject.blogspot.com/ http://en.wikipedia.org/wiki/B-frame http://www.avsforum.com/avs-vb/showthread.php?t=1027256 http://labs.opera.com/news/2010/05/19/ http://dev.opera.com/articles/view/opera-supports-webm-video/ http://www.w3.org/2008/WebVideo/Fragments/talks/2010-06-30- Jakub_Sendor-Media_Fragment_Firefox_Plugin.pdf http://www.youtube.com/html5 http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html http://www.mpegla.com/main/programs/AVC/Pages/FAQ.aspx http://blogs.adobe.com/flashplatform/2010/05/adobe_support_for_vp8.html http://www.webmproject.org/tools/ http://en.wikipedia.org/wiki/3gp http://en.wikipedia.org/wiki/Variable_bitrate http://lurkertech.com/lg/pixelaspect/ http://www.betanews.com/article/Patent-pool-may-be-in-the-works-for-free- VP8-codec/1274466745