Archive for the ‘HTML5’ Category

File Under: Browsers, HTML5, Multimedia

Mozilla Plans H.264 Video for Desktop Firefox

Mozilla is getting closer to making H.264 video work in Firefox.

The company’s recently released Firefox for Android already bakes in OS-level support for the H.264 video codec and now Mozilla is adding support to desktop Firefox as well.

Mozilla long opposed supporting the H.264 codec because it’s patent-encumbered and requires licensing fees. It’s also the most popular codec for HTML5 video on the web, which drove Mozilla to swallow its ideals and get practical about adding support to Firefox. Instead of including the codec directly in Firefox, the browser will rely on OS-level tools to play H.264 video.

There’s still no support for H.264 in the current desktop version of Firefox, but as Mozilla CTO, Brendan Eich recently noted on his blog, work is under way and, with the exception of Windows XP, all platforms will get OS-native codec support for H.264 video. Windows XP, which lacks OS-level tools for H.264, will continue to use the Flash plugin to play H.264 movies.

If you’d like to keep track of Mozilla’s progress adding H.264 to the desktop there’s a tracking bug that follows solutions for all the major desktop platforms. Eich does not give an explicit timeline or any hint of when H.264 support might ship with Firefox on the desktop.

The HTML5 video element was supposed to offer a standards-based way to play movies on the web without proprietary plugins like Flash or Silverlight. Unfortunately that dream has failed to pan out. Instead of proprietary plugins, the web ended up with proprietary video codecs, which has created a split in browser support for HTML5 video. Firefox and Opera support the open Ogg and WebM codecs, while Safari and Internet Explorer supported H.264.

Mozilla (and Opera) were against the adoption of H.264 on ideological grounds — H.264 is not an open codec and requires that companies using it pay royalties. But earlier this year the company partially reversed course and said it would support H.264 on devices where the codec is supplied by the platform or implemented in hardware.

In announcing its change of heart with regard to H.264, Eich wrote, “H.264 is absolutely required right now to compete on mobile. I do not believe that we can reject H.264 content in Firefox on Android or in B2G and survive the shift to mobile…. Failure on mobile is too likely to consign Mozilla to decline and irrelevance.”

However, while Mozilla may have abandoned the fight against H.264 in HTML5 video, it has taken up the same banner when it comes to WebRTC. WebRTC is a group of proposed standards that will eventually make web apps capable of many of the same feats that currently require platform-native APIs. In his recent post detailing the progress of H.264 support, Eich says that Mozilla is still focused on “the fight for unencumbered formats” for WebRTC, and promises “more on that front later”.

File Under: HTML5, Mobile, Web Standards

New HTML Tricks for Web Developers in Apple’s iOS 6

Image: Screenshot/Webmonkey

Apple’s recent iOS 6 update added some nice new web standards support to Mobile Safari, the default iOS web browser for the iPhone, iPad and iPod touch.

Apple’s documentation remains sparse and occasionally outdated, but luckily Max Firtman, author of O’Reilly’s Programming the Mobile Web, has a very thorough rundown of everything that’s new in iOS for web developers.

By far the biggest news is support for file uploads and camera access using a combination of the File API and the HTML Media Capture API. To let users take a picture from your web app, you’d use a file input tag something like this:

<input type="file" accept="image/*" capture="camera">

Mobile Safari’s Media Capture support is incomplete so it will ignore the capture attribute, as well as any value for accept other than image or video, but at least web apps can now capture and upload images from the iPhone’s camera.

I put together a quick demo page of Mobile Safari’s Media Capture support so you can see the new interface in action. The first two examples on that page work, the third audio example does not. You can see in the demo that Mobile Safari helpfully shows a thumbnail of the image prior to upload. It’s also worth noting that Mobile Safari supports the multiple boolean flag for uploading more than one image at a time, though in that case you lose the ability to access the camera.

For more on what to do with those images once the user has selected them, check out the Mozilla developer network, which has an excellent tutorial on using the File API.

Other highlights for web developers in the new Mobile Safari include support for the Web Audio API (great news for anyone building mobile, web-based games), increased application cache sizes (now 25MB), a faster JavaScript engine and some new CSS tricks as well — CSS Filters, CSS Cross Fades and the not-yet-a-standard CSS Image Set we told you about earlier. Be sure to read through Firtman’s whole post for all the details.

While there’s plenty to like about the new Mobile Safari there are some things missing, like support for WebRTC and getUserMedia, WebGL and sadly our least favorite bug — the Viewport Scaling Bug, which causes Mobile Safari to incorrectly reflow content when rotating from portrait to landscape — seems to still be hanging around. As always there’s a JavaScript workaround available.

File Under: HTML5, Web Standards

W3C Unveils Plan to Finish HTML5 in 2014

Image: Screenshot/Webmonkey.

Like the Cylons, HTML5 was created by man. It rebelled. It evolved. It looks and feels like HTML. And now, it has a plan.

Namely, to be done in 2014.

The W3C has formalized its plan to move the HTML5 spec to the official “Candidate Recommendation” status by the end of 2014. That might seem like a long time from now, especially if, like most of us, you’ve been using the bulk of HTML5 for some time, but 2014 is quite a bit better than the 2022 date that used to be tossed around.

But there’s a catch. In order to get HTML5 to the Candidate Recommendation stage on time the W3C is going to move some less stable parts of the spec to the newly designated HTML 5.1.

HTML5 has already been “modularized” over the years, spinning off sections like Web Workers, WebSockets, Microdata and half a dozen others, which are all now separate specifications at the W3C.

Now the W3C plans to split the remaining chunk of HTML 5.0 into HTML 5.0 and HTML 5.1. Each spec will then move through the process of becoming an official web standard. Here’s the W3C HTML Working Group’s plan for HTML5:

  • we determine which features are likely to meet the “Public Permissive” CR exit criteria,
  • we create a “stable HTML5.0″ draft which includes just those “stable” features, and which omits the remaining “unstable” features
  • we create an HTML 5.1 editor’s draft which is a superset of the stable HTML5.0 but with the “unstable” features included instead of omitted, and also with any new proposed features included

The HTML WG would then rinse and repeat with HTML5.1 in 2016. And then HTML5.2 and so on. The result will hopefully be a faster evolving series of specs, which in turn means more features reach the Recommendation stage in less time.

For web developers in the trenches finalizing HTML5 might seem irrelevant — after all, browsers already support most of it so who really cares? There are two reasons reaching the Candidate Recommendation stage matters: It usually means improved cross-browser support and it always means that the spec is covered by the all important W3C patent policy, which ensures that HTML5 remains a royalty-free standard.

For a complete list of everything that’s “unstable” in the current draft of HTML5, as well as the plan for how to handle it, be sure to read through the W3C’s plan.

File Under: HTML5, Multimedia

Microsoft, Atari Bring Arcade Classics to the Web

Centipede in HTML on the iPad. Image:Screenshot/Webmonkey

Microsoft’s Internet Explorer team has partnered with Atari to re-imagine classic Atari games for the modern web. That’s right, Centipede, Asteroids, Missile Command and half a dozen more all re-written using HTML5 and JavaScript.

If you’d like to play, point your browser to the new Atari Arcade and enjoy the glory of Pong, Super Breakout and the rest of the Atari back catalog.

While the games look a bit different — the graphics aren’t exactly what you might remember from the arcades of your youth, hence the “re-imagining” — the game play is faithful to the originals, especially on a touch screen where the controls are more like the classic arcade button layouts.

For those curious to know how it all works, the answer is largely CreateJS, though for full details be sure to read through the developer documentation. You can even create your own HTML5 Game on top of the new Atari Arcade SDK.

For more details on how it all works check out the video below featuring developer Grant Skinner and the rest of the team behind Atari Arcade.

File Under: HTML5, Web Basics

Popular ‘HTML5 Boilerplate’ Hits 4.0

HTML5 Boilerplate, easy to bolt on. Image: Les Chatfield/Flickr

The developers behind HTML5 Boilerplate have released version 4 of their boilerplate HTML, CSS and JavaScript templates for quickly prototyping HTML5 designs.

You can grab a copy of HTML5 Boilerplate v4.0 from the HTML5 Boilerplate website.

This release is notable for a number of changes including a snazzy new website, cleaned up and reorganized code and the beginnings of a high-resolution-screen @media query. This release is also notable for what it lacks, namely the trademark pink text highlight color which has been ditched in favor of a more neutral blue.

Version 4 of Boilerplate also updates the various code libraries that Boilerplate relies on, including jQuery, Modernizer and the very awesome Normalize.css.

You can see the complete changelog for this version over on Github and get any help you might need with HTML5 Boilerplate at Stack Overflow.