Feeling inspired by a recent talk given by Bruce Lawson on HTML5 and CSS3 I felt inclined to have a play with what many see as the most exciting part of the next generation of HTML – video.
With HTML5, video is now native to the browser. No longer is it isolated from the rest of your page trapped in a third party plugin. You can now style and script your video content much easier than before. And because it’s easier designers will I’m sure be concocting fancy new ways to present video content to the world.
With this in mind I had a little experiment with the new video element to see how the native player responds to some basic styling. All the browsers I tested performed well and seem to have quite robust video controls. Opera’s video controls (10.61) seemed to have the least robust UI when applying rotation to the player but apart from that it too performed admirably.
What stood out for me though when doing these tests was the different ways browsers give the users control over video playback. In particular I noticed how limited keyboard access to the controls were in most of the browsers tested. Here is the skinny…
Opera had the best keyboard access, allowing a user to give focus to the video element by tabbing without the need for tabindex. Once in focus further tabbing allows the user to play/pause and control the volume using the cursor keys. The play head can also be focused but I cant work out why as the ability to scrub forward and back doesn’t seem to exist. One other small problem occurs when the video is the only focusable element on the page and focus becomes trapped on the volume control. In this situation I’d like to see focus loop around the individual controls again.
Firefox (3.6.8) also has good keyboard access and does not need tabindex to bring focus to the element. Once in focus the user can control play/pause (spacebar) and the movement of the play head in 15 second increments (left and right arrows). No default visual feedback was given to indicate focus. Firefox allows full screen viewing but this option is only given by the contextual menu. It would have been good to see this option on the controls.
Safari (5.0) has the best looking controls in my opinion but the keyboard accessibility is non existent as far as I can tell. Tabindex is needed to give focus but once in focus I could not get the video to play via the keyboard. There are also no controls in the contextual menu. In fullscreen however the player is fully controllable with the keyboard.
Chrome (5.0.3) also has no keyboard access but does have play, pause and loop control through the contextual menu.
All this HTML5 video stuff is so new and there are bound to be teething problems. So I’m not waging a finger disappointingly at any particular browser vendor. Instead I’m just sharing my findings in the hope that one day we will see some more consistent player behavior.
If keyboard accessibility is important to you you can of-course script your own controls for now.
Remember don’t hate the player..