Call us: 1.800.513.1740
  • Log In
  • API
  • Sign Up
Encoding.comEncoding.comEncoding.comEncoding.com
  • Cloud Solutions
    • On Demand
    • HybridCloud
    • Reserved Cloud
  • Media Services
    • Features
      • Formats
      • Quality Control
      • Speed
      • Playout Graphics and Editing
      • Interfaces
      • Closed Captioning
      • Cloud Security
    • Packaging
      • HTTP Live Streaming (HLS)
      • Microsoft Smooth Streaming (MSS)
      • HTTP Dynamic Streaming (HDS)
      • Dynamic Adaptive Streaming over HTTP (DASH)
      • Dynamic Ad Insertion (DAI)
    • Digital Rights Management
      • Google Widevine
      • Microsoft Playready
      • Apple Fairplay
    • Integrations
      • Cloud Storage
      • Akamai
      • Aspera FASP
      • Beamr CABR
      • Dolby
      • Dolby Vision
      • Harmonic
      • Nielsen
  • About Us
    • Our Story
    • Our Team
    • Case Studies
    • Contact Us
    • Blog
  • Resources
    • Apple ProRes
    • AVOD
    • Beamr
    • DAI
    • Dolby Vision
    • DRM
    • Ludicrous Mode
    • QC
    • SVOD
  • Contact Us

HTML5

    Home HTML5

    HTML5


    On October 28, 2014 the W3C ratified HTML5 video formats as a web standard. This came after nearly 10 years of work that was started by the Web Hypertext Application Technology Working Group (WHATWG) to update HTML4 which had not been updated since 2000. Despite lack of ratification by the W3C HTML5 has been widely embraced by the web development community. The catalyst for adoption of HTML5 video formats came in April of 2010 when Steve Jobs released his highly critical Thoughts on Flash. This was the first of many nails in Flash’s coffin. When HTML5 was ratified last year, a core component was support for video. Paul Cotten who leads the HTML5 Working Group at the W3C announced “The single most important feature of HTML5 is probably the < video > tag since today’s web is rapidly moving to being more about video.” Ericcson recently claimed that by 2020, that 60 percent of all web traffic globally would be video.

    Where is HTML5 Video


    The big differentiation between Flash video and HTML5 video formats is that Flash requires a proprietary plugin, made by Adobe. The only thing that HTML5 video needs is a browser that supports the < video > tag element. Beyond browser support all you need is a source, its controls, its dimensions (height x width), and a poster image. With the shift of support from a plug-in to the browser, the browser became the determining factor in supporting formats for the video source. With the embattled browser landscape this created a little bit of chaos. Initially, the open source browsers, Chrome, Firefox, and Opera all went with the WebM format which is royalty free. Safari, Internet Explorer, & Chrome supported the widely accepted, but not royalty free mp4 format. Over time this has changed and now all major browsers provide support for the MP4 format. The MP4 format is licensed through MPEG LA. CanIUse.com publishes the most up-to-date information on HTML5 video browser compatibility.

    The key difference between Flash video and HTML5 video formats is that Flash requires the use of a Adobe’s Flash plugin which is not open source. In contrast, the only thing required to make HTML5 video work is a supporting browser, player controls, video dimensions, and a poster image. Since a plugin isn’t required, the browser become the delimiting factor in HTML5 video playback. Because browsers are so fragmented things were chaotic at first. The open source players (Chrome, Firefox, Opera) used the royalty-free WebM format. Safari, IE, &amp; Chrome supported the ubiquitous but costly MP4 format. Now that HTML5 is nearing maturity, there is support for HTML5 video and their associated formats and technologies.

    wdt_IDBrowserChromeFirefoxInternet ExplorerSafariiPhoneAndroidOperaChrome Android
    1Version3.0+3.5+9.0+3.0+1.0+2.0+10.5+42+

     

    Supported Audio/Video Formats


    wdt_IDBrowserChromeFirefoxInternet ExplorerSafariiPhoneAndroidOperaChrome Android
    1VideoWebM, MP4, TheoraMP4MP4MP4WebM, MP4WebM, MP4, TheoraWebM, MP4
    2AudioWAV, MP3, Vorbis, AACWAV, MP3, Vorbis, AACWAV, MP3, AACWAV, MP3, AACWAV, MP3, AACWAV, MP3, Vorbis, AACWAV, MP3, Vorbis, AACWAV, MP3, Vorbis, AAC

     

    Supported Audio/Video Codecs


    Historically, the fragmented device and browser landscape has caused divided support for video codecs. Some supported H.264, others VP8 (AKA WebM). This was addressed by Mozilla when the launched H.264 for all the major browsers. On the contrary, modern codecs are more fragmented VP9 (open source) has broad support, but HEVC (licensed) does not.

    wdt_IDBrowserChromeFirefoxInternet ExplorerSafariiPhoneAndroidOperaChrome Android
    1Video CodecH.264, VP8, VP9H.264, VP8, VP9H.264H.264H.264H.264, VP8H.264, VP8H.264, VP8, VP9
    2Audio CodecAAC, MP3, Vorbis, OpusAAC, MP3, Vorbis, OpusMP3MP3, AACMP3, AACMP3, AAC, VorbisVorbis, OpusMP3, AAC, Vorbis

     

    Important Notes About HTML5 Codec Support


    Firefox 3.5+ supports Theora video and Vorbis audio in an Ogg container. Firefox 4+ also supports WebM.

    Opera 10.5+ supports Theora video and Vorbis audio in an Ogg container. Opera 10.60 (and later) also supports WebM. Firefox now supports MP4 as well.

    Chrome 4.0+ supports H.264, Theora video and Vorbis audio in an Ogg container. Chrome 6.0+ also supports WebM.

    Safari on Macs and Windows PCs 3.0+ will support anything that QuickTime supports. In theory, you could require your users to install third-party QuickTime plugins. In practice, few users are going to do that. So you’re left with the formats that QuickTime supports “out of the box.” This is a long list, but it does not include WebM, Theora, Vorbis, or the Ogg container. However, QuickTime does ship with support for H.264 video (main profile) and AAC audio in an MP4 container.

    Mobile phones like Apple’s iPhone and Google Android phones support H.264 video (baseline profile) , but Android overall has partial support with 2.1+.

    Internet Explorer 9+ supports all profiles of H.264 video and either AAC or MP3 audio in an MP4 container. It will also play WebM video if you install a third-party codec, which is not installed by default on any version of Windows. IE does not support other third-party codecs (unlike Safari, which will play anything QuickTime can play).

    Internet Explorer 8 has no HTML5 video support at all, but virtually all Internet Explorer users will have the Adobe Flash plugin.

    In recent news, it was announced that IE 11/Windows 8.1 will no longer require an audio/video plug-in utilizing HTML5.

    Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec”.

    Safari will play anything that QuickTime can play. QuickTime comes pre-installed with H.264/AAC/MP4 support. There are installable third-party plugins that add support for Theora and WebM, but each user needs to install these plugins before Safari will recognize those video formats.

    Google Chrome promised to drop support for H.264 in 2011, but it has yet to happen.

    Our HTML video converter can help you encode web supported videos.

     

    HTML5 Video Tag Attributes


    There are several attributes for the HTML5 video tag. They include poster image, controls, pre-loading, autoplay, loop, and mute. All browsers support controls and posters. Pre-loading, however, does not work on mobile browsers, and some mobile browsers don’t support autoplay, loop, or mute.

    wdt_IDBrowserChromeFirefoxInternet ExplorerSafariAndroidOperaiPhoneChrome Android
    1PosterYesYesYesYesYesYesYesYes
    2PreloadYesYesYesYesNoYesNoNo
    3AutoplayYesYesYesYesNoYesNoNo
    4ControlsYesYesYesYesYesYesYesYes

     

    WebVTT Browser Support


    Accessibility mandates by the federal government for closed captioning have become quite comprehensive and have grown to includes requirements for captioning of online content. Every major browser now supports WebVTT captioning, styling, and scripting, but there are still inconsistencies in support. Firefox has control and styling limitations. Internet Explorer has styling limitations. A lot of these consistencies are because the WebVTT standard is still in draft and has not been ratified.

    wdt_IDBrowserChromeFirefoxInternet ExplorerSafariiPhoneAndroidOperaChrome Android
    1WebVTT SupportYesYesPartialYesYesNoYesYes

     

    Adaptive Playback HTTP Live Streaming


    While Adaptive Streaming, specifically HTTP-Live-Streaming, has become the de facto standard for on-demand delivery of video to mobile, tablet, and OTT markets, it still lags behind when it comes to desktop browsers. With the rise of HLS has come the need to secure these adaptive streams. Media Source Extensions and Encrypted Media Extensions are APIs that have been created to develop applications that support the encryption of adaptive streams. While broad support exists for these extensions, there are still limitations. Only recently has Apple released details for their FairPlay DRM scheme so support for iOS and AppleTV is just being seen in apps. ID3 tags which track viewship across devices are not supported by any browser, necessitating a third-party player JWplayer.

    wdt_IDBrowserChromeFirefoxInternet ExplorerSafariiPhoneAndroidOperaChrome Android
    1HLSNoNoNoYesYesYesNoYes
    2AESNoNoYesYesYesYesNoYes
    3EMEYesNoYesNoNoNoNoYes
    4ID3NoNoNoNoNoNoNoNo

    For more information on our HTML5 video converter, contact us today!

    Encoding.com

    • Log In
    • Sign Up
    • Free Consult
    • Careers
    • Contact Us

    Help Center

    • Knowledge Base
    • FAQ
    • SLA
    • Terms of Use
    • Privacy

    Recent Posts

    • Encoding.com Honored with the 2020 Emmy® Award for Technology & Engineering

      Innovative Developer of Cloud-Media Processing Platform Acknowledged for its Development of Massive

      28 January, 2021
    • And the Emmy® Goes to…Encoding.com!

      Since launching Encoding.com in 2008, we’ve had a singular focus: to provide

      26 January, 2021
    • Join  @encodingdotcom  President  @jeffmalkin  and  @streamingmedia  on Wednesday 2/17 at the 2021 Streaming Media Conne… https://t.co/DJusBtWKmg

      2 weeks ago
    • Join  @encodingdotcom  President  @jeffmalkin  on Tuesday 2/17 at the 2021 Streaming Media Connect conference to hear a… https://t.co/Yacw6gwIle

      2 weeks ago
    • Thank you  @BroadcastBridge  https://t.co/s9iF5ENR1y #Emmys2020 #TechEmmys

      3 weeks ago
    Encoding.com • Encoding Intelligence™ • Copyright 2016 Encoding.com • All Rights Reserved
    • Cloud Solutions
      • On Demand
      • HybridCloud
      • Reserved Cloud
    • Media Services
      • Features
        • Formats
        • Quality Control
        • Speed
        • Playout Graphics and Editing
        • Interfaces
        • Closed Captioning
        • Cloud Security
      • Packaging
        • HTTP Live Streaming (HLS)
        • Microsoft Smooth Streaming (MSS)
        • HTTP Dynamic Streaming (HDS)
        • Dynamic Adaptive Streaming over HTTP (DASH)
        • Dynamic Ad Insertion (DAI)
      • Digital Rights Management
        • Google Widevine
        • Microsoft Playready
        • Apple Fairplay
      • Integrations
        • Cloud Storage
        • Akamai
        • Aspera FASP
        • Beamr CABR
        • Dolby
        • Dolby Vision
        • Harmonic
        • Nielsen
    • About Us
      • Our Story
      • Our Team
      • Case Studies
      • Contact Us
      • Blog
    • Resources
      • Apple ProRes
      • AVOD
      • Beamr
      • DAI
      • Dolby Vision
      • DRM
      • Ludicrous Mode
      • QC
      • SVOD
    • Contact Us
    Encoding.com

    Are you sure?

    Please confirm deletion. There is no undo!