via techcrunch.com
Tuesday, December 29, 2009
Saturday, December 26, 2009
Daring Fireball: Why the HTML5 'Video' Element Is Effectively Unusable, Even in Browsers Which Support It
Why the HTML5 ‘Video’ Element Is Effectively Unusable, Even in Browsers Which Support It
Monday, 21 December 2009
[Update, 22 Dec 2009: In the original version of this article, I incorrectly reported that Firefox auto-buffers HTML5 video content by default, as Safari and Chrome do. It does not, as shown by Christopher Blizzard’s simple tests here. I regret the error, and have revised the article accordingly. For posterity, the source for the original version is preserved here. You can create a precise list of changes by doing a diff against the source for the current revision.]
I seldom post video to DF, but when I do, I refuse to embed Flash,1 I want the markup to be sane and standard, I want the video to play in popular standards-compliant web browsers, and I don’t want the video to download/buffer automatically. Here’s an example from a year ago, using QuickTime.
What you see upon page load is a poster frame (a still image), then you (the user) click the poster frame to actually download and watch the video. Here’s the markup I used then:
<embed width="320" height="256" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/" src="dtk-panic-1-poster.jpg" href="dtk-panic-1.mov" target="myself" controller="false" autoplay="false" scale="aspect" />That markup met all of my aforementioned desires but for one: the
<embed>tag is not standard. Worse, it now has a new significant problem: it doesn’t work at all in Chrome (at least on the Mac).So I’ve been paying attention to the new
<video>element in HTML5. In a nut, it attempts to make embedding a video in a web page just as easy markup-wise as embedding an image with the<img>tag. (Likewise for audio with the new<audio>element.)The obvious downside to relying solely on the
<video>element to embed web video is that because it’s new, the only browsers that support it are recent releases of Safari, Firefox, and Chrome. This isn’t one of those things that just doesn’t work in IE6 or IE7 — it doesn’t work in IE period. Therefore few sites are using HTML5 video in production now, and of those, nearly all are doing so with fallback markup, often of significant complexity, that presents the video using a Flash player for other browsers. Because (a) I don’t post much video; (b) the overwhelming majority of DF’s audience is in fact using an HTML5-compatible version of Safari, Firefox, or Chrome;2 and (c) I’m willing to be a dick about this; I do not care about fallbacks for browsers that don’t support<video>.What I’d like to do is just use
<video>, with two source elements — MP4 and OGV — for all the cross-browser reasons specified in Mark Pilgrim’s fine chapter on video in his in-progress HTML5 book. (Short version: Safari and MobileSafari support only MP4, Firefox supports only OGV, Chrome supports both MP4 and OGV.)3So I decided to try this last week with the screencast videos I created to illustrate my piece on PastryKit. I tried markup like this:
<video height="475" width="407" controls poster="iphoneguide-mac.png"> <source src="iphoneguide-mac.mp4" type="video/mp4" /> <source src="iphoneguide-mac.ogv" type="video/ogg" /> </video>The good news: The above markup results in video that plays in Safari, Chrome, and Firefox. It also works perfectly in MobileSafari on iPhone OS. Safari and Chrome play the MP4 video, Firefox plays the OGV. (Chrome supports both formats, and plays the one listed first. I want it to play the MP4 version because the video and audio are of noticeably superior quality.) That is the entirety of the necessary markup; if you’re unfamiliar with the sort of nasty markup typically used to embed video, try a little View Source on a few web pages that embed video.
The bad news: In two of the three browsers (Safari 4.0.4 and Chrome 4.0.249.43), with the above simple markup, the video content buffers automatically on page load. What I mean is that as soon as you load the web page, the browsers download the actual video files that are embedded. As stated at the outset, I don’t want that. Instead, on page load, I want the browser to render only the poster image, and load the video only after the user has clicked to initiate playback.
The HTML5 spec defines an
autobufferattribute for the video and other media elements (bold emphasis added):The
autobufferattribute is a boolean attribute. Its presence hints to the user agent that the author believes that the media element will likely be used, even though the element does not have anautoplayattribute. (The attribute has no effect if used in conjunction with theautoplayattribute, though including both is not an error.) This attribute may be ignored altogether.Firefox honors the
autobufferattribute. Omit the attribute from your markup, and video content will not auto-buffer in Firefox. Include it, and it will.But alas, in my testing, Safari and Chrome take the spec up on the aforebolded offer to ignore this attribute. Even if you do not explicitly turn this attribute on, Safari and Chrome will still auto-buffer the content for your
<video>(and<audio>) elements. There is no way to suppress this using HTML markup.You might be thinking, “Hey, but default auto-buffering sounds like a good feature, because that way users won’t have to wait as long for the video to be ready to play.” I presume this sort of thinking is what led the Safari and Chrome teams to do this.
But this browser behavior is very much undesirable for both publishers and users in common contexts. Users loading the page over a slow connection, or a pay-by-the-megabyte metered connection (which is common with wireless networks), should not be forced to download a potentially large video every time they load the page. Likewise, publishers should not be forced to pay for the bandwidth to transmit videos that won’t be watched.
Think, in particular, of the nature of publishing embedded video on a weblog. I, the publisher, post an entry containing embedded video. That post may remain on my home page for a week. Regular readers may load the home page dozens of times during the period when the video appears on the page. With auto-buffering, they’re going to download the full video every time they load the page. Local caching may alleviate some of that, but for sites with high traffic and/or which frequently embed video, the difference is enormous.
This is why embedded video from YouTube, Vimeo, and all similar services works on a click-to-load basis. Auto-buffering is fine as an optional attribute, but for many (probably most) contexts, click-to-load is essential behavior.
But as far as I can see, there’s no way to get click-to-load video in Safari or Chrome using just a
<video>element. The only workaround I could think of was to do something like this:
- In the HTML markup, rather than a
<video>element, instead use an<img>element with the intended poster frame.- Add an
onclickJavaScript handler to the<img>element, which, when invoked, does some DOM jiggery-pokery to remove the just-clicked-upon<img>element and replace it with a<video>element that sources the intended video files.And, in fact, that is exactly what I resorted to for my PastryKit videos. Do a View Source on that page to see the solution. There goes the nice clean just-as-easy-to-include-a-video-as-an-image markup. (My sincere thanks to Faruk Ateş and Paul Irish for helping with the jiggery-pokery implementation.)
This WebKit bug filed back in April indicates I’m not the first person to stumble on this shortcoming. That’s about
<audio>instead of<video>, but the principle is exactly the same. And the example cited in this bug report seems like a perfect scenario where everyone should agree that media content should not buffer automatically: a podcast archive page with an<audio>element for every previous episode.A big part of the appeal of the
<video>and<audio>elements is that they should be easier to use. As it stands today, though, these elements are unusable in popular contexts without resorting to JavaScript DOM manipulation to effectively turn auto-buffering off.I think the HTML5 spec should be changed such that the value of the
autobufferattribute must be respected. And even if the spec is not changed, web browsers should not choose to ignore it. Web browsers should only buffer HTML5 media content when theautobufferorautoplayattribute has been explicitly turned on in the markup.
As for why I refuse to embed Flash, let me put it this way. I use and highly recommend ClickToFlash, which blocks all Flash content by default. Why would I publish content using a technology that I personally block by default? I truly hope to see Flash fade as the de facto standard for embedded web video, and I’m willing to put my markup where my mouth is. ↩
As of this writing, Daring Fireball gets about twice as many page views from MobileSafari as all versions of Internet Explorer combined on a typical weekday. ↩
Having to include separate source elements of the same video content encoded in two different formats is indeed an inconvenience. Not so much the extra markup as the extra work producing and encoding the second video file. Even the short videos I created to illustrate my PastryKit piece took a few minutes each to encode. Relative to most computing tasks today, encoding video once is already painfully slow. Encoding it twice is a time sink no one needs. But that’s the way it stands. ↩
Previous: More on PastryKit
Some HTML 5 bits
My Experiences with this DLROW » Get a Hello World ASP.NET MVC app up on Mono
Get a Hello World ASP.NET MVC app up on Mono
via minhajuddin.com
ASP.NET Controls: DynamicControlsPlaceholder - A placeholder that saves its child controls
This would have come in handy a couple of projects ago. Head over to denisbauer.com to get the control
Saturday, December 05, 2009
Building a Desktop To-Do Application with NHibernate
ED BANGER RECORDS
Check out this podcast on iTunes:
http://ax.itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=213838526Friday, December 04, 2009
Google's public DNS
Just switched from using OpenDNS to Google's new public DNS and unless I am very much mistaken it is much much quicker at resolving stuff and everything seems a lot snappier as a result.
Microsoft Releases SDK for Facebook
Now that I have an iPhone my eagerness to build a Facebook app with C# has fallen a bit but it is on my list of cool personal projects and this looks like it might be a useful tool to do some of the heavy lifting for me.
Wednesday, December 02, 2009
Getting a database to attach from a My Document folder
Gets round the SQL Express issue of attaching a database from My Documents
Modeling people and organizations: Class Party
via weblogs.asp.net
A good article on the party design pattern for modelling people and companies/organisations
Flexible Enumerations
A good article about replacing normal enums with something a bit more flexible but still being immutable.
http://phazed.com/blog/flexible-enumerations/
I have seen this design pattern before but I do not know if it has a proper design pattern name.
Replace paging with jQuery and subsonic continuous scrolling method
An interesting article by Rob Conery of SubSonic fame about replacing the typical pattern of paging though resultsets N records at a time with a neat jQuery driven scroll forever approach. This is not a pattern I see too often but one that to me works very well and one that I am considering using on a side project of mine.
As mentioned in the article the client side starts off by handling the user scrolling down or up to see more content:
Then using an ajax call and SubSonic or any other ORM or Data Access Layer you then get the next N records to display :
Head over to Rob's article for more info.
Cropper
Written in C# as well. Going to give it a go. This and screengrab for FireFox should be all that I need.
Friday, July 24, 2009
Thursday, July 23, 2009
Tuesday, July 21, 2009
Testing ASP.NET MVC Routes with MVC Contrib
I am starting to make some progress with my side project that I am building out using ASP.NET MVC and SubSonic 3.
That said testing routes is something that I am not doing at the moment but has been nagging away at me especially when the application gets to a decent size.
Well it seems that the MVC Contrib project has something that can help me out here (via a tweet from Dave Bush).
Saturday, July 18, 2009
WCF REST Starter Kit Preview 2 0 - Sample application
The chaps over at MSDN have released a sample application built with ASP.NET and the WCF Rest Starter Kit Preview 2 that consumes search, maps and social networking api’s in a RESTful manner.
"Litware Training" - Sample Mashup App built with WCF REST Starter Kit
iPhone Development Introduction Video
A good intro video from the ALT.NET chaps that goes into Objective-C and interface builder
Thursday, July 16, 2009
Mono links
The Mono Migration Analyzer (MoMA) tool helps you port existing .NET applications to the mono framework.
Mono Tools for Visual Studio allows you to port .NET applications to Mono and Linux without leaving Visual Studio.NET. However this is in private beta at the moment…
ELMAH – Logging Framework
Just stumbled across the Error Logging and Handlers for ASP.NET framework that is a logging framework for .NET that can be dropped into an already running website without the need for re-compilation or re-deployment.
Looks fantastic. This is going into my side project as well!
Amazon’s Kindle eBook reader to finally come to the UK – and by Christmas?
So say the register… That’s my Christmas present sorted then :)
PhotoView – Reference application for developing for Windows 7
This sample application also named XP2Win7 from Microsoft shows off some of the following Windows 7 specific features:
• Windows Search
• UAC
• Scheduled Task
• Windows 7 Taskbar Integration
• Transactional File System
• IO Optimization
• Event Tracing for Windows (ETW)
• Microsoft Management Console
• Windows 7 Libraries
• Windows 7 Sensor and Location Platform
• PowerShell
• Preview Handler
• Aero Glass
• Trigger Start Services
Wednesday, July 15, 2009
S#arp Architecture 1.0 RTM
The Sharp Architecture ASP.NET MVC and NHibernate framework has reached an important milestone.
Some cracking work has gone into this project and it’s a project that I have blogged about before.
Here are some of the improvements in this release (lifted straight from the Billy’s blog post):
-
Compatible with ASP.NET MVC 1.0
-
All upgraded dependencies including NHibernate 2.1 CR 1
-
We now have a community site at http://www.sharparchitecture.net, still a work in progress (a flippin' ginormous thank you to Kyle Baley for setting this up)
-
S#arp Architecture documentation may now be found at http://wiki.sharparchitecture.net, still a work in progress (a huge thanks to Joe Lowrance for migrating the docs)
-
Strongly typed action link for areas (SharpArch.Web.Areas.ActionLinkForAreas<> and BuildUrlFromExpressionForAreas<> - thanks Brad Buhrkuhl!)
-
Fluent NHibernate now using configuration classes
-
(Re)Introduced support for IIS 7 integrated mode
-
Support for WCF has been added as SharpArch.Wcf for server support and SharpArch.WcfClient.Castle for auto-closing of the connection on the client (thanks Frank Laub!)
-
SharpModelBinder has been introduced for much better form binding, including support for all association types; e.g., one-to-one, one-to-many, and many-to-one Entity associations
-
Support for multiple databases outside of WCF communications (thanks Russell Thatcher, David Longnecker, James Broome and Howard van Rooijen for suggestions and input!)
- A CI home at http://teamcity.codebetter.com/overview.html (thanks Kyle and Simone!),
- Updated compatibility with the latest T4 Toolbox for a much faster and stable CRUD Scaffolding generation experience
Tuesday, July 14, 2009
Subsonic simple repository and auto migrations
Rob Conery has posted a video and a blog post explaining one the cooler features of the new Subsonic 3.0 ORM product which is the Simple Repository that can also create the database schema on the fly as you drive out the domain model of your application.
I think this has pretty much convinced me to use subsonic in the side project I am working on alongside GIT and Kanban.
Monday, July 13, 2009
Entity Framework 4.0 – Supports POCOs
Not really been keeping an eye on Microsoft’s Entity Framework as I think that earlier versions didn’t really support the notion of persistence ignorance and Plain Old C# Objects.
That seems to have changed in the upcoming version 4.
Still not convinced that the Entity Framework is going to any better than some of the other ORM’s out there. That said I am still sore from having to work with the typed Dataset visual designer from Microsoft in earlier versions of Visual Studio…
Sunday, July 12, 2009
Saturday, July 11, 2009
Kanban agile project management
Today at the Gym I caught up with some podcasts and listened to Hanselminutes Podcast 170 – Kanban Boards for Agile Project Management with Zen Author Nate Kohari.
This approach to lean management of software projects is very interesting and differs from the SCRUM time boxed approach that I have worked with before.
I have decided to give this approach a go with a side project I have been meaning to work on and have signed up for the free account over at the Zen Project Management site.
For a bit more of an overview on Kanban head over to James Shore’s overview on Kanban systems.
Friday, July 10, 2009
Various links to some interesting articles
Build Better Data-Driven Apps With Distributed Caching
A good article on MSDN on using the pre-release version of Microsoft’s Velocity distributed caching framework
IIS Search Engine Optimization Toolkit Beta
A beta toolkit installer from the IIS.NET website that could help website’s search engine optimization.
Web Site Improvements Using jQuery and jQuery UI
The fifth instalment of a multipart article series on ASP.NET that covers some code examples and videos about improving a site with some jQuery magic.
SubSonic 3.0.0.2 released.
Looks like Rob Conery is squashing bugs and releasing versions pretty quickly!
Thursday, July 09, 2009
Video of Scott Guthrie on ASP.NET MVC in Reading
Mike Ormand has uploaded the videos for the ASP.NET MVC session that I went to in Reading the other week.
Scott Guthrie at Vista Squad on ASP.NET MVC Part 1 - mike ormond - Channel 9
Scott Guthrie at Vista Squad on ASP.NET MVC Part 2 - mike ormond - Channel 9
Windows 7 RTM to be released on MSDN on Monday?
I hope all these are true as I have been holding off installing the time restricted beta’s and release candidates in favour of installing the real thing…
Windows 7 rumoured to be ready for RTM
Reports: Windows 7 heads to RTM July 13
Will Windows 7 be finalized next week?
Windows 7 Moves to Next Phase on July 13
Wednesday, July 08, 2009
Git!
I mentioned in my last post about BBC’s Glow framework source code being hosted with Git/GitHub.
Well Rob Conery the creator of the excellent ORM Subsonic has posted a blog post and video on how to get started with the Git version control system.
BBC Glow JavaScript framework released.
Surprisingly the BBC have released an open source JavaScript library called Glow.
The difference between this and other JavaScript libraries is that the BBC’s library looks like it supports older or ‘Level 2’ browsers.
Source Code
Documentation
Demo’s
On a side note the BBC are using Git and GitHub to host the source code. I really must have a play with Git as a source control provider.
Saturday, July 04, 2009
SubSonic 3.0 released
The excellent open source ORM from Rob Conery who now works for Microsoft has been released.
Friday, July 03, 2009
Fluent NHibernate and Linq2NHibernate
Just read a good example of using the Fluent NHibernate project to map your POCO classes to the database design via a fluent interface rather than the standard mapping xml files.
Another quality Code Project article.
Wednesday, July 01, 2009
JSON Web Services and accessing them via jQuery
Continuing with jQuery day I have just read another cracking post that explains how to create a JSON web service that returns JSON formatted data and finally call the JSON web service with jQuery.
Today is jQuery day!
The more I use jQuery the more I like it but one thing that would really help is intellisense in Visual Studio. Well that is actually possible it seems after reading a really helpful post that explains how to actually make that happen.
The same guy that wrote that post (who’s RSS feed has now been added to my every expanding Google Reader subscriptions list) has also written a cool post that explains how to use jQuery to give tables the striped alternating row colour effect known as zebra striping.
Its a technique I have used with both server side C# or JavaScript in the past but jQuery cuts down the amount of code to a couple of lines of JavaScript.
Another good read is a post on how to create the share a page with various social networking sites such as facebook or digg etc. This excellent tutorial again uses jQuery to achieve this.
Scott Guthrie - ASP.NET MVC Special Event
I’m off to Microsoft in Reading on Friday to see the ASP.NET MVC session by Scott Guthrie. Fantastic stuff!
Tuesday, June 30, 2009
Workflow 4.0 in not very good claim shocker
Windows Workflow is one piece of the Microsoft .NET stack that has interested me in terms of being able to build workflow based projects based on built in .NET technology however the 3.0 version had too much of a steep learning curve for my patience threshold to spend much of my time on.
So I thought I would wait for the 3.5 version, then I heard rumours that it would be completely re-written for the 4.0 version so I would wait for the 4.0 version.
So this morning I read my first review of the 4.0 version and it seems it’s not shaping up to be that good.
Selenium Internals – New eBook coming
The author of a new e-Book on Selenium works for Thought Works it seems and is looking to post a new chapter every day!
ASP.NET MVC – View Models
This morning I read a very interesting blog post about view model design within the context of building an application with the Microsoft ASP.NET MVC framework.
The concept of the view model isn't baked into the Microsoft MVC framework. In fact the entire model part of model view controller is left entirely up to the developer.
This isn't a criticism at all as the ASP.NET MVC framework is still at version 1.0 and is one the best web based things to come out of Microsoft for ages.
Anyhoo. Its worth a read.
Sunday, June 28, 2009
FireQuery 0.3 – A FireBug plugin for jQuery
The excellent FireBug web developer plug-in for Firefox has itself got a plug-in called FireQuery that targets and helps debug jQuery with some additional functionality.
Wednesday, June 24, 2009
Catharsis 1.2 – Best Practise ASP.NET MVC & NHibernate
When I have time I will look at the Catharsis project based on an article that I read on code project.
Initial thoughts are that there are similarities to the sharp-architecture project by Billy McCafferty that I’ve blogged about previously.
UI Design Patterns
While I am more of a developer than a designer, I do care about the user interface to applications as quite often it does not matter how clever or beautiful you business logic, data access layer and database schema are if the end user does not like using your application or does not like the look of it then the whole project can be deemed a failure.
The UI layer is just as important as the rest of the application if not more so.
Quite often I use design patterns in my code to solve problems and it’s nice to know that there are common UI design patterns as well.
Today I read a great article that lists some common UI patterns, I especially like the Lazy Registration pattern.
Improving performance and scalability with DDD
Domain Driven Design or DDD is something that I have been reading a lot about recently and trying to practise in some of my pet projects and today I came across an excellent post that discusses improving performance ,scalability and distributed systems.
Velocity Administration Console
Microsoft have been working on a scalable in-memory application cache project called Velocity. It is similar to the popular open source memcached project and the commercial ScaleOut StateServer Software product.
I have taken a quick look at ScaleOut StateServer and have been very impressed with it’s ease of use, performance and the administration tools that it provides.
Today I noticed that Gil Fink has written a cool velocity administration console that adds a nice windows forms front end over the powershell scripts that seem to drive Velocity.
Subscribe to:
Posts (Atom)