Google is dropping h.264 from Chrome

UPDATE: Added a chart that shows what format support will look like without Chrome supporting h.264.

Google Chrome Drops h.264 Support

Google has decided to support the open source community by dropping h.264 support from Chrome. Previously Chrome was the only browser that could play all 3 major HTML5 formats—MP4/h.264, WebM/VP8, and Ogg/Theora. This is probably a strategic move at the same time, since h.264 seems unlikely to be beaten at this point, especially with IE9 supporting h.264 while requiring an extra plugin to use VP8. In my opinion, there’s two major events that could end the format war.

  1. Apple adopts WebM/VP8 (which would require adequate hardware to include in iOS devices)
  2. MPEG LA removes all royalties from h.264

Read the original post.

Over 50% of web users now support HTML5 Video

As we roll into 2011, HTML5 video hits a major milestone. 50.5% of web users now support HTML5 video playback. This number was gathered by comparing browser versions that support HTML5 video with StatCounter’s world-wide browser version statistics. HTML5 Video StatisticsThis is a 66% growth in HTML5 video user support since December of 2009. With the expected release of Internet Explorer 9 in the near future, 2011 could see a major increase in websites adopting HTML5 video as their primary playback method. Of browsers that support HTML5 video, Mozilla’s Firefox is the clear leader, with Google’s Chrome in second place. Much of the growth in HTML5 video support can be attributed to Chrome’s success in stealing market share from Internet Explore over the last year.

Video Formats

The format war continues to be a deterrent of HTML5 video adoption, and there’s no clear end in sight. While Apple has helped accelerate HTML5 video by requiring it for video playback on the iPhone, it’s also the one vendor that will not support Google’s WebM/VP8 format, which has the highest potential for becoming the standard format for HTML5 video. Among other reasons, Apple has invested a lot of money in the mp4/h.264 format, including hardware built into iPads and iPhones to decode/encode it. Meaning even if Apple decided to support WebM, it would take more than a simple software update to get WebM to the many iPhone and iPad users. Microsoft has said they will support WebM/VP8 in Internet Explorer 9, however only “when the user has installed a VP8 codec”. Which basically means they won’t support it. Microsoft’s preference for MP4/h.264 was made more obvious with their release of a plugin that allows h.264 to be played back in Firefox on Windows. The following graphs show the support and growth of the different video formats. HTML5 Video Format Statistics WebM had a sharp rise in August as Google released Chrome 6 and pushed out updates to its users. In the following charts you can see different views of how formats are divided among HTML5 video users. The first chart shows user support by combinations of formats. The second compares support of open vs. closed formats. HTML5 Video Format Group Statistics From an HTML5 video perspective, open formats win out significantly over closed formats, with Apple and IE9 hanging on to the last 10%. This may change over the next year with the official release of IE9, unless Microsoft decides to support WebM/VP8 without the need for an additional installation. Finally, if you are interested in the Flash vs. HTML5 debate, Flash is well entrenched and HTML5 video still has a long way to catch up. According to Adobe, Flash is supported by over 99% of web users. Statistics from other sites seem to support this, though according to Omniture (now Adobe), the internet average is 116.8% (sic). Omniture Flash Support Statistic As of Flash 9 update 3 (9.0.115), Flash has supported the MP4/h.264 format for video playback. In the following chart, you can see how considering Flash affects the comparison of video format support. Flash vs. HTML5 Video Statistics However, Adobe has said they will support WebM/VP8 in a later release of Flash. The rate that users upgrade to the latest version of Flash is relatively fast, so this could have a big impact on WebM support when it happens. Overall, Flash will be difficult for HTML5 to dethrone. Beyond user support and format discrepancies there is a long list of features that Flash players have supported for years, which will take time for all browsers to build in. However, many of those features can be built with JavaScript, which allows them to be used across browsers immediately. It’s up to the open source community to build the features people need to accept HTML5 as their primary means of video playback. VideoJS is an open source HTML5 video player and framework that makes it easy to support HTML5 video as well as Flash for older browsers. It provides a consistent interface across browsers and solves many browser/mobile device bugs. There are still quite a few rough edges with HTML5 video, but the many contributors to VideoJS are smoothing those over and expanding VideoJS to meet the needs of web users.

2.0.2 Release - Subtitle Optimization + Safari on Leopard FS Fix

Smallish update with some fixes and optimizations. Rewrote the subtitles parser so it’s a lot more optimized and fixes a subtitle display bug. Put in a check for Safari running on Mac OSX 10.5 (Leopard), which doesn’t like native fullscreen for some reason. Triggering full window mode instead.

Full List

  • Feature: Rewrote and optimized subtitle code.
  • Feature: Protecting against volume ranges outside of 1 and 0.
  • Fix: Bug in Safari for Mac OS 10.5 (Leopard) that was breaking fullscreen.

Download version 2.0.2

2.0.0 Release - Behaviors, fallback APIs, and more.

Big update. The biggest change for current users is a move back to using DIVs for control bar elements instead of unordered lists. There were a lot of conflicting styles issues when using lists, which shouldn’t be an issue with divs. So if you upgrade, don’t forget to upgrade your stylesheets as well.

Beyond that, a lot of code was reorganized and modularized to create a platform for further expansion, like custom plugins and controls. The concept of “behaviors” was added, so you can activate any element on the page to act like a video controls. For instance, the following code snippet will make the specified element act like a play button, and play the video when clicked.

myplayer.activateElement(myElement, "playButton");

The next code snippet will make the element act like a play progress bar, meaning it will grow horizontally as the video plays.

myplayer.activateElement(myElement, "playProgressBar");

More documentation on this is coming.

The code is now prepped for APIs to the fallback flash players. So if you call, it will trigger a play in both the HTML5 and the Flash version, whichever is currently being used. A flowplayer API is just about done, and other popular Flash players will follow.

Finally, you can change the fallback order by modifying the playerFallbackOrder option, which is an array of player platforms. So if you want Flash to be dominant, you would pass the following option.

  playerFallbackOrder: ["flash", "html5", "links"]

This also leaves room for other platforms to be added, like Quicktime.

So coming up is Flash player APIs, and another cool feature I don’t want to mention just yet.

Full list:

  • Feature: Created “behaviors” concept for adding behaviors to elements - Feature: Switched back to divs for controls, for more portable styles
  • Feature: Created playerFallbackOrder array option. [“html5”, “flash”, “links”]
  • Feature: Created playerType concept, for initializing different platforms
  • Feature: Added play button for Android
  • Feature: Added spinner for iPad (non-fullscreen)
  • Feature: Split into multiple files for easier development
  • Feature: Combined VideoJS & _V_ into the same variable to reduce confusion
  • Fix: Checking for m3u8 files (Apple HTTP Streaming)
  • Fix: Catching error on localStorage full that safari seems to randomly throw
  • Fix: Scrubbing to end doesn’t trigger onEnded

Download version 2.0.0

Make sites serve you HTML5 video in Safari

John Gruber of Daring Fireball has a cool post on tricking websites to display HTML5 video when they say they can only play Flash. Many sites will tell you they require Flash, even when they actually support HTML5 video for iOS devices.

To add to Gruber’s post, there’s two reasons a site might do this:

  1. They’re trying to protect their content from being easily downloaded, which HTML5 video can’t do very well yet.
  2. They assume everyone with a browser has Flash, and just serve HTML5 video to iOS devices.

So for this first, this is actually a hack to download content some publishers might not want you to. I probably shouldn’t be publishing this since security of the content is one of the main reasons HTML5 video will still take time to spread. But for that purpose, it’s really not hard to figure out.

For the second, it’s kind of lazy implementation of fallbacks. It’s pretty easy to check if Flash is supported, and if not, fall back to HTML5, instead of checking for a specific user agent string. So for sites using VideoJS, this method wouldn’t work, but there also wouldn’t be a need because VideoJS would fallback appropriately to HTML5.

Gruber has disabled Flash in Safari for better performance with video. That says a lot. Most people probably won’t go to same effort he has, but I know he’s not the only one.

1.1.5 Release - Subtitles using track, Android fix & more

  • Feature: Switched to track method for setting subtitles. Now works like spec.
  • Feature: Created “players” concept for defining fallbacks and fallback order
  • Fix: Android playback bug.
  • Fix: Massive reorganization of code to make easier to navigate

I’ve switched the subtitles to use the new track element defined in the HTML5 spec. You can now add subtitles by creating a track element pointing to your WebSRTsubtitles source.

<video ...>
  <track kind="subtitles" src="../" srclang="en-US" label="English"></track>

The closing track tag is needed, otherwise Safari thinks everything else is a child of the track, even with a self-closing track tag. Not sure why that is, but it’s kind of annoying.

Also a fix for Android playback was added. Android HTML5 video is pretty rough. The canPlayType function returns nothing on Android so VideoJS has a check to see if the source is mp4/m4v, and assumes it’ll play. Then VideoJS adds a click event to the video so it’ll play when you touch it. Also the Android will show the poster image, but no indication that it’s a video and not just an image. Hopefully this will be improved in the next Android version.

Beyond that, I did a massive reorganization of the code, so it should be easier to navigate if you’re planning to hack at it or contribute.

Download version 1.1.5

Version 1.1.4 Release - CSS Loading Spinner & More

The most notable update in this version is a loading indicator (spinner), for when the video is buffering or seeking. The spinner works pretty well, however it’s limited by how accurately each browser tells us what it’s currently doing through triggered events. The spinner works best in Firefox so far. Safari/Chrome are less consistent with what events are triggered and when. For this reason I’m using a more careful approach that makes sure the spinner gets hidden, as opposed to making sure the spinner always shows when the player is busy. There’s a few bugs I had to account for too, like when Safari throws a “waiting” event, but then no other event to let us know it’s not waiting anymore.

The spinner icon is made with CSS3 effects (border-radius and transform). The spinning animation is created with a little javascript for now. In webkit browsers the animation could have been done with CSS3 animation, but I’d rather keep it consistent between browsers. The technique comes from Kilian Valkhof with initial integration into VideoJS by Janez Troha (dz0ny)

Other features and fixes include:

  • Feature: Added loading spinner.
  • Feature: Improved styles loaded checking.
  • Feature: Added volume() function to get and set volume through the player. - Fix: Fix issue where FF would loop video in background when ended.
  • Fix: Bug in Chrome that shows poster & plays audio if you set currentTime too quickly.
  • Fix: Bug in Safari where waiting is triggered and shows spinner when not needed
  • Fix: Updated to show links if only unplayable sources and no Flash.
  • Fix: Issue where if play button was loaded after play, it wouldn’t hide.

Download version 1.1.4

Version 1.1.3 Release

Version 1.1.3 of VideoJS is now available.

Probably the most notable change is a switch to using a big play button before the movie plays for the first time, as opposed to showing the control bar. The main reason for doing this is actually a bug in Safari. If you try to call any functions on the video other than play, before the video has loaded, Safari will error out. Some people mentioned that fullscreen mode did not work in Safari for them, and this is most likely what was happening for them. This would only happen if you were not preloading the video. You can still go back to showing the controls first through the showControlsAtStart option, but it’s not recommended.

Other features and fixes include:

  • Feature: Width/Height functions for resizing the player
  • Feature: Made initial click & hold trigger new value on progress and volume
  • Feature: Made controls not hide when hovering over them
  • Fix: Removed trailing comma that was breaking IE7
  • Fix: Removed some vars from global scope
  • Fix: Changed a document.onmousemove to an eventListener to prevent conflicts
  • Fix: Added a unique ID to FlowPlayer demo object to fix a FlowPlayer bug. Thanks @emirpprime.
  • Fix: Safari error on unloaded video

Let me know if you have any questions.