21 Sep 2011

DivX breaks HTML5 video

I recent developed a web site that uses HTML5 video elements extensively. I made sure that I’d covered off all possible viewing outcomes—linking to all the possible video formats and creating a Flash video player for non-HTML5 devices. However, I hadn’t accounted for one thing, DivX. Strangely this issue with the DivX Web Player doesn’t seem to be widely discussed. I attempted to post onto DivX Labs’ forum but my post seems to have mysteriously disappeared. I also attempted to (albeit slightly angrily) contact DivX on Twitter—I was ignored. So for anyone else who has this problem now or in the future and in the blind hope I may get a response from DivX, here is an open letter.

Dear DivX Web Player team,

I find it hard to believe in this day-and-age of web standards that a plug-in can do what this plug-in does. I’m using an HTML5 video element on a website I developed. It’s perfectly marked-up to cover all browsers that support HTML5 video and falls back to a Flash-based video player for those that do not. However, this doesn’t seem to be enough to deter this plug-in from removing my mark-up and replacing it with a broken experience for the end-user.

My video element had a width of 100% and no height set. This, on browsers without this plug-in, gives a nicely scaling video. But for the unfortunate users of this hijacking plug-in they were getting an extremely short (in height) video viewing area with a tiny poster image in the centre and no usable controls. I managed to fix the size issue (by assigning a fixed height and width in the HTML and setting 100% width in the CSS). I then needed to create some javascript to resize the clip when the browser was resized. Surely a plug-in shouldn’t break the default behaviour of a browser, especially when the default behaviour is perfectly fine?

To add insult to injury, as I’m using a custom controller. These elements remained as they are separate to the video element, leading for a confusing experience—pressing play on the custom control played audio but not the video—just one example of a broken experience.

I’ve managed to do some rudimentary patching (jumped through hoops) to at least give users of your plug-in a usable video player, however it isn’t perfect—your controls don’t update when the video plays for example.

I’m hoping that there is something I can add to the mark-up to force the plug-in to ignore it from the off (which it should do by default), but I’m guessing there isn’t. Alternatively is there some sort of property I can detect with JavaScript to ascertain the presence of DivX Web Player?

Any solutions gratefully received.

Matt