SlideShare ist ein Scribd-Unternehmen logo
1 von 170
Downloaden Sie, um offline zu lesen
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
HTML5 Video Explained

Weitere ähnliche Inhalte

Mehr von Mike Wilcox

Accessibility for Fun and Profit
Accessibility for Fun and ProfitAccessibility for Fun and Profit
Accessibility for Fun and ProfitMike Wilcox
 
Webpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need itWebpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need itMike Wilcox
 
Web Components v1
Web Components v1Web Components v1
Web Components v1Mike Wilcox
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 
Professional JavaScript: AntiPatterns
Professional JavaScript: AntiPatternsProfessional JavaScript: AntiPatterns
Professional JavaScript: AntiPatternsMike Wilcox
 
Model View Madness
Model View MadnessModel View Madness
Model View MadnessMike Wilcox
 
Hardcore JavaScript – Write it Right
Hardcore JavaScript – Write it RightHardcore JavaScript – Write it Right
Hardcore JavaScript – Write it RightMike Wilcox
 
The Great Semicolon Debate
The Great Semicolon DebateThe Great Semicolon Debate
The Great Semicolon DebateMike Wilcox
 
AMD - Why, What and How
AMD - Why, What and HowAMD - Why, What and How
AMD - Why, What and HowMike Wilcox
 
Webpage Design Basics for Non-Designers
Webpage Design Basics for Non-DesignersWebpage Design Basics for Non-Designers
Webpage Design Basics for Non-DesignersMike Wilcox
 
Why You Need a Front End Developer
Why You Need a Front End DeveloperWhy You Need a Front End Developer
Why You Need a Front End DeveloperMike Wilcox
 
A Conversation About REST
A Conversation About RESTA Conversation About REST
A Conversation About RESTMike Wilcox
 
The Fight Over HTML5
The Fight Over HTML5The Fight Over HTML5
The Fight Over HTML5Mike Wilcox
 
The Fight Over HTML5
The Fight Over HTML5The Fight Over HTML5
The Fight Over HTML5Mike Wilcox
 
How to get a Job as a Front End Developer
How to get a Job as a Front End DeveloperHow to get a Job as a Front End Developer
How to get a Job as a Front End DeveloperMike Wilcox
 
The History of HTML5
The History of HTML5The History of HTML5
The History of HTML5Mike Wilcox
 

Mehr von Mike Wilcox (20)

Accessibility for Fun and Profit
Accessibility for Fun and ProfitAccessibility for Fun and Profit
Accessibility for Fun and Profit
 
WTF R PWAs?
WTF R PWAs?WTF R PWAs?
WTF R PWAs?
 
Advanced React
Advanced ReactAdvanced React
Advanced React
 
Webpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need itWebpack: What it is, What it does, Whether you need it
Webpack: What it is, What it does, Whether you need it
 
Dangerous CSS
Dangerous CSSDangerous CSS
Dangerous CSS
 
Web Components v1
Web Components v1Web Components v1
Web Components v1
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Professional JavaScript: AntiPatterns
Professional JavaScript: AntiPatternsProfessional JavaScript: AntiPatterns
Professional JavaScript: AntiPatterns
 
Model View Madness
Model View MadnessModel View Madness
Model View Madness
 
Hardcore JavaScript – Write it Right
Hardcore JavaScript – Write it RightHardcore JavaScript – Write it Right
Hardcore JavaScript – Write it Right
 
The Great Semicolon Debate
The Great Semicolon DebateThe Great Semicolon Debate
The Great Semicolon Debate
 
AMD - Why, What and How
AMD - Why, What and HowAMD - Why, What and How
AMD - Why, What and How
 
Dojo & HTML5
Dojo & HTML5Dojo & HTML5
Dojo & HTML5
 
Webpage Design Basics for Non-Designers
Webpage Design Basics for Non-DesignersWebpage Design Basics for Non-Designers
Webpage Design Basics for Non-Designers
 
Why You Need a Front End Developer
Why You Need a Front End DeveloperWhy You Need a Front End Developer
Why You Need a Front End Developer
 
A Conversation About REST
A Conversation About RESTA Conversation About REST
A Conversation About REST
 
The Fight Over HTML5
The Fight Over HTML5The Fight Over HTML5
The Fight Over HTML5
 
The Fight Over HTML5
The Fight Over HTML5The Fight Over HTML5
The Fight Over HTML5
 
How to get a Job as a Front End Developer
How to get a Job as a Front End DeveloperHow to get a Job as a Front End Developer
How to get a Job as a Front End Developer
 
The History of HTML5
The History of HTML5The History of HTML5
The History of HTML5
 

Kürzlich hochgeladen

Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 

Kürzlich hochgeladen (20)

Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 

HTML5 Video Explained

  • 1. HTML5 Video By Mike Wilcox July 6th, 2010
  • 2. A Brief History of Online Video...
  • 4. Online Video Beginnings In the 90s it was just cool if video played on the computer, much less online
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 10. Flash Takes Over In 2002, Macromedia releases Flash video using Sorenson Spark
  • 11. Flash Takes Over In 2002, Macromedia releases Flash video using Sorenson Spark In 2003 Macromedia releases the FLV format using VP6
  • 12. 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
  • 13. 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
  • 15. 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>
  • 17. Problems with Flash Plugins not always an elegant solution As the Apple vs Adobe battle has exposed
  • 18. 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
  • 20. Non-Flash Video Problems OS and browser combinations create different video problems Example: WMV on Firefox on a Mac
  • 21. 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
  • 22. 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.
  • 23. HTML5 Video Basic Example
  • 24. HTML5 Video Basic Example <video src="SightAndSound.mp4" width="320" height="240" controls> </video>
  • 27. HTML5 Video Benefits First Class citizen
  • 28. HTML5 Video Benefits First Class citizen Native to browser / no plugins
  • 29. HTML5 Video Benefits First Class citizen Native to browser / no plugins One tag handles multiple video types
  • 30. HTML5 Video Benefits First Class citizen Native to browser / no plugins One tag handles multiple video types No JavaScript nor ActionScript required
  • 32. HTML5 Video Problems Not supported in IE8 (will be in IE9)
  • 33. HTML5 Video Problems Not supported in IE8 (will be in IE9) Native controls not consistent amongst browsers
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. 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
  • 39. HTML5 Video Problems (2) Poor meta info
  • 40. HTML5 Video Problems (2) Poor meta info No DRM, No streaming
  • 41. HTML5 Video Problems (2) Poor meta info No DRM, No streaming No SMIL nor playlist capability
  • 42. HTML5 Video Problems (2) Poor meta info No DRM, No streaming No SMIL nor playlist capability Early implementation has many cross browser/device bugs
  • 43. 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
  • 45. 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>
  • 46. API
  • 47. 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
  • 50. API Bugs iPad bug when dynamically created
  • 51. API Bugs iPad bug when dynamically created iPad poster bug
  • 52. API Bugs iPad bug when dynamically created iPad poster bug iPad source order bug
  • 53. API Bugs iPad bug when dynamically created iPad poster bug iPad source order bug WebKit error event must be on source objects
  • 54. 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
  • 55. 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
  • 56. 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
  • 57. 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
  • 60. File Format File Format = Container = Wrapper
  • 61. File Format File Format = Container = Wrapper MP4, WebM and OGV are wrappers
  • 62. 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.
  • 63. 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
  • 64. 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
  • 65. Codec
  • 66. Codec MP4 uses H264 video AAC audio
  • 67. Codec MP4 uses H264 video AAC audio WebM uses VP8 video Vorbis audio
  • 68. Codec MP4 uses H264 video AAC audio WebM uses VP8 video Vorbis audio OGG uses Theora video and Vorbis audio
  • 69. 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.
  • 70. 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.
  • 71. Implemented HTML5 Video File Formats
  • 72. Implemented HTML5 Video File Formats WebM OGG MP4
  • 74. Implemented by Browser MP4 OGG WebM IE9 FireFox 4.0 Chrome 6 Safari 5 Opera 10.6
  • 75. 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.
  • 76. Implemented by Device* * Not a complete list of course.
  • 77. Implemented by Device* iPhone iPad Android * Not a complete list of course.
  • 78. Implemented by Device* iPhone iPad Android All handle H264 video codecs * Not a complete list of course.
  • 79. Implemented by Device* iPhone iPad Android All handle H264 video codecs Android handles only MP4 file formats * Not a complete list of course.
  • 80. 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.
  • 81. 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.
  • 82. 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.
  • 83. 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.
  • 84. Encoding Software* * Not a complete list. Open Source or free software is shown.
  • 85. WebM For full list, go to the WebM Project Tools Page: http://www.webmproject.org/tools/
  • 86. 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/
  • 87. OGG
  • 88. OGG FFMPEG (command line) ffmpeg2theora http://www.ffmpeg.org/ FireFogg (browser based) http://www.firefogg.org/
  • 89. MP4
  • 90. MP4 FFMPEG (command line) http://www.ffmpeg.org/ Handbrake (GUI) http://handbrake.fr/ MPEG Streamclip (GUI) http://www.squared5.com/
  • 94. VBR/CBR Constant Bitrate (CBR) The rate at which a codec's output data should be consumed is constant
  • 95. VBR/CBR Constant Bitrate (CBR) The rate at which a codec's output data should be consumed is constant Useful for streaming
  • 96. 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)
  • 97. 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.
  • 98. 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
  • 100. Multi Pass First pass used to analyze, second for encoding.
  • 101. Multi Pass First pass used to analyze, second for encoding. Used only for VBR.
  • 102. Multi Pass First pass used to analyze, second for encoding. Used only for VBR. Cannot be used with streaming
  • 104. Macroblock An image compression component and technique similar to JPEG
  • 105. 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.
  • 106. 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.
  • 107. 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.
  • 108. 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.
  • 110. Square Pixels Square Pixels / Pixel Aspect Ratio
  • 111. 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.
  • 112. 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.
  • 114. Frame Types Intra-coded: I‑frames are the least compressible but don't require other video frames to decode.
  • 115. 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.
  • 116. 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.
  • 117. 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.
  • 118. Level
  • 119. Level Used for MP4 encoding (16 levels, 1 through 5.1)
  • 120. Level Used for MP4 encoding (16 levels, 1 through 5.1) An indicator for a decompressor's capability
  • 121. 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
  • 123. Profile Used for MP4 encoding
  • 124. Profile Used for MP4 encoding Defined sets of capabilities
  • 125. Profile Used for MP4 encoding Defined sets of capabilities Larger profiles often contain the lower profiles
  • 126. Profile Used for MP4 encoding Defined sets of capabilities Larger profiles often contain the lower profiles Common Profiles:
  • 127. 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.
  • 128. 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
  • 129. 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
  • 132. OGG / Theora Open source, patent free, royalty free, under the BSD License
  • 133. OGG / Theora Open source, patent free, royalty free, under the BSD License Free, as in beer.
  • 134. 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
  • 135. 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
  • 136. 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
  • 137. 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
  • 139. WebM / VP8 Open source, royalty free, under the BSD License
  • 140. WebM / VP8 Open source, royalty free, under the BSD License Free, as in beer (maybe).
  • 141. 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
  • 142. 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
  • 143. 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
  • 144. FLV / Flash Video FLV is not an HTML5 Video codec. It is listed here for comparison.
  • 145. 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.
  • 146. 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.
  • 147. 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.
  • 148. 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.
  • 149. 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.
  • 150. 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.
  • 152. MP4 / H264 Free as in... you’ll pay later. Actually, free for non-paid web use until 2015
  • 153. MP4 / H264 Free as in... you’ll pay later. Actually, free for non-paid web use until 2015 Enjoys broad adoption of hardware support
  • 154. 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
  • 155. 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
  • 156. 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
  • 158. 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.
  • 160. 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
  • 161. Apple
  • 162. 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
  • 163. 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
  • 165. 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
  • 167. 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
  • 169. 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

Hinweis der Redaktion