Some changes are coming for the HTML5 video tag in the nightlies:
– Time-scrubber will be implemented
– Volume control will work (not just mute/unmute)
– Controls will be invisible until mouseover for videos that play on load, and visible until the user presses play for videos that don’t play on load
– Some graphic spiffups:
The graphics are being changed (in part because of your feedback) with attention to providing better contrast on differently colored backgrounds.
Other features coming up soon are notification when a video is buffering, and perhaps a time elapsed/total time indication.
The design for the controls is about as simple as it can be, because much like the browser, it is there to help you navigate your content but not compete with your content. I was surprised looking around the web at how over-designed and branded so many video controls are.
Quite nice. From you “spiffup”, I immediately have to wonder: to jump to another point in the video, must I drag the time indicator or can I just click somewhere in the seek bar? Notice that I had to ask—because the answer is not obvious. The time indicator is large and looks like it wants to be dragged. And, indeed, many users will automatically jump to the conclusion that that is how you seek. They will end up wasting a lot of time acquiring and dragging that tiny widget, rather than just clicking on the desired point in the seek bar directly.
To avoid this, I would suggest simplifying the UI even further by getting rid of that button, or, at least, making it 1-pixel wide. This neatly prevents users from thinking that there is something that needs to be dragged. The vimeo player in your screenshots shows this nicely, as does Songza’s player.
Along similar lines, I would also hide that small Play/Pause button in the default set of controls and make the whole video clickable for that function, with the appropriate icon overlaid over the video when hovering over it. Not only would this be a huge Fitts’ Law improvement, but it would also be more usable for future Fennec users.
David –
That’s good feedback about the draggable button. Whether or not to have one is something I batted around a bit, and like you I’m not sure having one is the best option. What it does do is provide the affordance of dragging – at you said, possibly at the detriment of the affordance of clicking. Not having the button provides neither affordance, but might make both of them seem like likely options while one steers your path. I’ll try a version without the button and we’ll see how it looks.
As for the play-pause button – my immediate hesitation is that the video could not be easily stopped in full color this way, for instance to take a screenshot. Some video players allow this, others don’t – I will say that no matter which one we do in Firefox, definitely in Fennec there will be one big button to stomp on.
Jenny: Why would not having a button remove the affordance of clicking? Any point on the seek bar would be clickable. I don’t understand… In any case, if you make one, I would love to see a button-less version. Just make sure the current point in the timeline is easily distinguishable (which is why I suggested that a 1-pixel–wide button might be preferable).
As for taking screenshots, that’s not an issue if the Play button appears only when the paused video is hovered over. Am I missing something here?
Looks great. I’m glad that we got the “show video controls when video doesn’t start automatically” part. Scrubber is also super nice!
How does the pop-up volume thing work?
I tend to change the volume a lot, and I find
(Part 2)
that it’s annoying when the pop-up thing disappears too quickly. It would also be quite nice if it’s possible to change the volume with one click (example, the zoom slider in Windows Photo Gallery)
I have a concern about the font for the time display, is it going to be that ugly on all platforms? (is it a graphic in firefox or using a system font?)
Please can we have single-height numbers, I don’t fancy the distraction of numbers changing size.
Will it be possible to change the appearance of the video controls using CSS?
This is looking very pretty! It’s super exciting to see the level of polish going into this design.
Two thoughts:
(1) Volume: Try to minimize the number of clicks it took to do common actions — i.e., reduce the interaction complexity. Having a button which you first have to click and then having to scrub the volume control is a bit click-full. See Vimeo, Songza, and HypeMachine for more streamlined interaction, where the sound level is exposed in the bar (without overloading visual complexity).
(2) Play/pause being conjoined. It’s currently mocked up as a toggle, which inevitably leads to mode errors. Take the common case where the network hiccups and the user has to wait for more video to stream in. In this case, does the triangle being shown mean the video is “playing” or that clicking it will “play”. People end up clicking on the button multiple times until something moves. It’s best to split the buttons to avoid that confusion (see Songza).
Read more here.
In your gallery of video controls, I believe the vimeo player is the only one that puts the controls inside the video frame. That is annoying.
Controls will not be styleable by web pages, although themes/extensions will be able to. However, web pages *can* implement their own controls. The built-in videocontrols just use the standard media element JS APIs, so everything they do a web page can do too.
David, “affordance” refers to an aspect of something that makes its functionality evident. A bar which hinges downward across a door has an affordance for pushing. The handle of a mug has an affordance for grasping. A button has an affordance for clicking, and particularly in the context of video online I think a button on a bar has an affordance for dragging. The entire bar might be clickable, but if that’s not visibly apparent from the interface and can only be discovered by attempting it, there’s no affordance for clickability.
Jeff: That is exactly why I was saying that having such a button is a bad idea. It screams to be dragged, and that is what people will do—over and over and over again, no matter how horribly inefficient and attention-killing such an action is. If there is nothing that looks like it can be dragged (and the cursor doesn’t change to the grab cursor), people will very quickly figure out that you can click anywhere to seek. Making this more obvious would, of course, be useful—such as by adding an indicator in the seek bar when the cursor hovers over it.
Fair enough, I just wanted to be sure you knew that no button specifically means no affordance, not “not usable” or some similarly vague term.
Practically, I think it’s necessary to have some sort of knob to indicate how to use widgets, so I don’t really like removing the button. The indicator you propose is insufficient for me because it requires the cursor already to be hovering in the appropriate place, where I would be more likely to look before leaping, figuratively speaking. If I’m not convinced clicking on the bar does anything, I’m not going to move my mouse there in the first place (unless, of course, the cursor is serendipitously positioned when I first want to seek elsewhere in the video).
I like the way this is going. I don’t think Quicktime and Youtube have self-deprecating scrub bars, though; especially Youtube has an intensely branded highlight scheme and Quicktime comes with the weird ‘forward’ and ‘back’ buttons and the end of the bar. Vimeo’s I’ve always loved, simply because it’s so very bare-bones and simple.
Looks good, but please please add full screen control!
very helpfull thanks.
waiting for the future features.