A transmission from the deep south.
Jeremy Keith takes Ian Hickson to task over the removal of the time element from the HTML5 spec:
In this case the editor’s unilateral decision is fundamentally at odds with the most important HTML design principle, the priority of constituencies.
Super-useful plugin by Matias Mancini to add HTML5’s new form validation handling to unsupported browsers, including IE6+, Opera and Firefox.
Today Vimeo released its long-awaited “universal” embed code which utilises an <iframe> in place of the previous <object> tag. This new approach enables Vimeo to detect the type of device requesting playback, and to serve the appropriate format and resolution for the device, rather than failing if the Flash player was missing (as the old code did).
Along with the new default embed code, Vimeo provides an “Embedinator” script that, when included on any site, replaces occurrences of the old embed code with the new format. I’ve rewritten this script as a jQuery function with the added benefit that it reduces clutter by hiding the avatar, title and user of the clip from displaying in the playback frame. As with my previous script, you can also set a custom colour for selected parts of the interface.
Here’s a version bundled with jQuery that you can copy directly into the <head> of your theme template. The function is included below and should replace any previous version you’re using:
$(function() {
var color = "55cc55";
$("object[data^='http://vimeo.com']").each(function() {
var $obj = $(this);
var data = $obj.attr("data");
var temp = data.split("clip_id=")[1];
var id = temp.split("&")[0];
var server = temp.split("&")[1];
var w = $obj.attr("width");
var h = $obj.attr("height");
$obj.replaceWith(
"<iframe src='http://player.vimeo.com/video/"+id+
"?"+server+"&title=0&byline=0&portrait=0&color="+color+"' "+
"width='"+w+"' height='"+h+"' frameborder='0'></iframe>"
);
});
});
I’ll roll this into my premium themes in the next week or two.
Update: At present Tumblr replaces Flash video embed code (with the exception of YouTube) with a “requires Flash” placeholder div when serving pages to the iPhone, in both standard and optimised views. The above solution works perfectly to provide universal Vimeo support on the iPad, but won’t work for iPhone until this policy changes.
HTML5 video player with fallback support for IE and Opera. Image-free interface, skinnable via CSS, works with iPhone OS and supports H.264, Ogg Theora and WebM. No native full-screen playback, but I suspect that’s a browser API problem that will eventually be solved. (via John Ballinger)
Neven Mrgan’s new blog:
My goal is to collect examples of creative, innovative, and unexpected use of emerging web technologies such as HTML5 and CSS3. It’s an itch I need scratched for myself, and something I expect others will find useful too.
There are other books about HTML5, and there will be many more. … But this is a book for you — you who create web content, who mark up web pages for sense and semantics, and who design accessible interfaces and experiences.
— Jeffrey Zeldman introduces the first publication from his new imprint, A Book Apart. HTML5 for Web Designers, written by Jeremy Keith and designed by co-founder Jason Santa Maria, is “your user guide to HTML5. Its goal … is to shed clear light on a tricky subject, and do it fast, so you can get back to work”. Ordered.
Dave Greiner’s test results with HTML5’s <video> tag point to limited support at present (Apple Mail, Entourage 2008, MobileMe and iPhone) but the ability to display hyperlinked fallback content for other email clients is an improvement over previous approaches, and support for this will only improve.
There’s not a drop of Flash on this [page], from the rotating banners to the music preview player. Everything is straight HTML5, CSS3.
— Judson Collier dissects the markup loaded by iTunes, which uses an embedded Webkit browser to render its entire Music Store, right down to the animated audio players. While the approach isn’t new, many of the CSS tricks are. (via Todd Dominey)
Jeffrey Zeldman and friends with a guide to the major niggles and inconsistencies in the HTML5 specification. Lots of valuable clarification, common sense and good suggestions here people. Plus there’s a unicorn at the bottom.
By not supporting the practical format, Mozilla isn’t making a brave statement or taking a stand: they’re just keeping everyone on Flash and preventing meaningful adoption of HTML 5’s
<video>element.
— Marco Arment’s take on the new <video> element is, as always, on the money. The best way to support everyone for the foreseeable future is still H.264 in Flash for the majority, falling back to a raw H.264 file via an <embed> element for non-Flash devices such as the iPhone.
Written and designed by Matthew Buchanan. Colophon. Please give credit. Email
