Ahoy mateys of the open source seas! Here’s another thing coming in Firefox 3.1: open source HTML 5 video support! This is going to bring some cool new functionality to developers, such as being able to access video elements through the DOM, intersperse video with other web content, and manipulate playback with JavaScript – all without the need for lubber bilge monkey plugins (see blizzard’s post).
A project I took over from the comely wench Wei was to design the controls for the video tag. So, how should they look? The first design iterations focused on geling with Firefox’s overall branding. However, thinking the problem over, these video controls are different from Firefox’s chrome and menus because they appear in the content of a page itself. So, though maintaining Firefox’s brand look & feel throughout the browser is important, I think not interfering with web content is more important. To create “Firefoxy” controls on videos would essentially brand a user’s videos. So, I’m proposing something more neutral and would love feedback:
Would your proposals still indicate the about of video downloaded?
If that Volume thing pops out when you go over the 6-volume-bar thing, then it’s brilliant.
Maybe the white could be a little greyish and the greyish inside a little darker, just to make it fade away when you’re concentrating on the video.
David Bolton –
They indicated the amount of video downloaded, but you’re right; I didn’t make that clear in the screenshots – it’s corrected now.
James John Malcolm:
Actually, those are two different designs – one has the volume scrubber popping up, the other you just click on the scale. I’m very much leaning towards the first design with the pop-up, because it’s easier to mute and granular control isn’t needed.
The new mockups don’t show how loading status is indicated. Adding a third shade of grey will make it very hard to distinguish what’s what, plus it makes the interface look busy. A solution might be to only draw a border of the time bar when that part is not yet loaded. This doesn’t fit with the rest of the styles, but at least it’s clear what’s indicated.
I like the way the exact time is displayed, but it’s missing some info about how long the whole video is – I find this very useful to decide if I’ve got enough time left to watch it before lunch or similar. Adding the full time to the speechbubble though will only clutter up the interface, plus it’s unintuitive to have to skip content or hover the time bar to see how long the video is. I have no idea on how so solve this, without adding something like “2:30 / 4:23” to the whole control bar.
Combine with video, both “volume” icons are pretty clear. First mockup has the advantage of being more precise. However it is cumbersome to change the volume: You have to do two eye-hand coordinations to set the volume (hover volume icon, find position indicator). The latter mockup only requires you to find the icon itself. In any case, I hope the implementation allows to control the volume “blindly”. I.e., whenever indicator is grabbed, allow the cursor to be slammed anywhere on the screen without canceling the drag so you can easily adjust the volume while looking at the video again. Also, the latter approach doesn’t overlay the video.
The fullscreen icons you chose in these mockups are the easiest ones to understand and recognize due to their distinctive outline. The other ones in the earlier mockups either look like a dot/rectangle or don’t mean anything to me. So, keep them 🙂
Have you thought about hover effects? It would be really annoying to accidentally hit the volume control and set it to maximum instead of hitting fullscreen (or resetting time to 0:00 when you wanted to hit pause). It’s easy for the timebar, since the “current position” speechbubble pops up, plus the timebar is huge, but it’d be useful for all the others to have a visual indication of where you cursor actually points.
I like the style of these though, as they easily blend with like 99% of the sites. I can’t think of any right now where it won’t fit. Unlike the previous mockups these controls can also be used on very small videos, like 200 pixels in width, which are often used on newssites so they fit into the page’s sidebar.
Keep up the good work 🙂
Greetings
xeen
Oh, I see, you updated the time bar. Although the approach looks acceptable it has the downside of hardly showing the position indicator. You have to find that one spot and there’s no visual indicator to guide you to it. Except for VLC, all Video Players use the timebar as an indicator for the current position. David ran into the same trap as I did. To be fair, it’s only a mockup, but it didn’t occur to him (or me) that the “time indicator” is actually meant to be a “loading indicator”.
But good point on the easy-mute thing, didn’t think about that.
I like it. Minor tweaks:
The speaker isn’t quite right, the voice coil on the back always has a square edge and the coil is slightly too big.
The full-screen arrows pointing SW looks angled outward, they don’t dither well.
The pause bars are slightly too tall.
If the progress slider is grab-able, then it shouldn’t be black, it should be active white like other things. Maybe the white to its left should be slightly grayer (since it’s inactive) and the unplayed to the right grayer still.
I like it. Minor tweaks:
The speaker isn’t quite right, the voice coil on the back always has a square edge and the coil is slightly too big for that size cone.
The full-screen arrow pointing SW looks angled outward (the arrows don’t dither well?).
The pause bars are slightly too tall.
If the progress slider is grab-able, then it shouldn’t be black, it should be active white like other interactive items. Maybe the white to its left should be slightly grayer (since it’s inactive) and the unplayed to the right grayer still.
I think rather than fitting in with the Firefox theme, the controls should fit in with the OS theme. Form controls are styled natively, but I’m guessing there’s no easy “include video control widget” code. I would think implementing platform specific control looks now would be a good idea so that each can be tailored to the OS.
Please tell me these controls are just the default and developers will be able to completely over-ride them and/or style them with CSS?
Why should the controls be any different from form buttons in terms of how developers can interact with them?
Aye, I was going to say, having CSS elements for video would be tremendously helpful, as would be adding elements to that bar, like if I wanted an icon in there on the left side of the play/pause;
Assuming Firefox follows the HTML5 spec, Firefox’s own controls will only appear if the web page uses the “controls” attribute, or if JavaScript is disabled (which would prevent the page’s own controls from working).
Being able to change the colors of the default controls using CSS would be neat.
I think the dark gray looks jarring against the video and white background. I like youtube’s light gray a lot better.
Agreed with what xeen said about the total length, and what Jesse said about dark gray.
I actually use the volume more than mute (since whatever volume the video has is unlikely to mesh well with what I had my media player on before I hit the video site). I usually end up using FlashMute for muting – I’m not going to need more than one Flash thing playing at once.
I see nothing in the spec relating to full screen? I would find it useful as a user, I just don’t know of the page can figure out when it’s being hidden.
The volume control is always a problematic issue. videos tend to be recorded at varying volumes, so when someone watches a lot of videos, he will need to ability to QUICKLY and accurately change the volume.
The method that works best for this is an always visible slider.
Since most videos are short (5-10 minutes) and most users don’t need fine tuned time-positioning nearly as often as they need volume adjustment, the time slider can be shortened for the benefit of a volume slider. I actually consider a volume slider much more important than a time slider, so it always frustrates me that videos have this huge time slider and usually no volume slider at all.
My dream:
[ > (===2:35|——-)9:58 (==35%|——) x ]
So the volume slider should be about the SAME width as the time slider. The volume slider should not be less than 50% the width of the time slider.
There might be a second, more compact, design for super-small videos – say: less than ~200 pixels width.
Please, please, don’t make the controls look like they were taken straight from some Flash video player. Why can’t they just be made to look native?
The problem is not that I wouldn’t like the current designs — they look a lot slicker than those of most Flash-based players, but wasn’t the whole point of Firefox three’s redesign to make Firefox look more native?
And then, let me ask a question: Alpha two’s controls overlay the video, will it be the same with these controls? What does the spec say about overlaying the video versus adding some space under the video for the controls?
Will the controller be placed inside or outside the video frame? If outside, how much space will it take up? Will it depend of the size of the video frame? That height should probably be standardized since it will affect the layout of the page.
If the user scrolls to a place in the video that have not yet been loaded, will that part of the video be loaded using a http range request? (some workarounds are needed, but are being used, to make this work in flash if not using their special streaming server)
Couldn’t the interface work as if it was implemented something like this, so small changes would be easy:
[style]
.__video { width:459px; }
.__videoFrame { width:459px; height:288; background:#cccccc; }
.__videoControl { position:relative; height:26px; background:#656363; }
.__videoPlay { position:absolute; left:0px; top:0px; width:26px; height:26px; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAIVJREFUSMftlVENgDAMBbuFfyRgYQ7AATjAAg6QgAUUYIGggKBkODg%2BCL9AyGgg2QnorWv3JhKJfBLAAY2GKGenB1INEcAMOA0RgAdKDdFBpyUCGO%2FMzQY4RyEiy9XcbKCmvcbVDcFW%2FkTU3q2RPHSvIlIZY6a3H2z2egRphGodv5fIv9gA10%2Fg429gkcEAAAAASUVORK5CYII%3D); }
.__videoTimeline { position:absolute; left:27px; top:9px; width:375px; height:9px; -moz-border-radius:4px; background:#444444; }
.__videoTimelineLoaded { position:absolute; left:0px; top:0px; width:80%; height:9px; -moz-border-radius:4px; background:#c9c8c9; }
.__videoTimelineHandle { position:absolute; left:25%; margin:0 0 0 -4px; top:-4px; width:9px; height:18px; -moz-border-radius:4px; background:#ffffff; }
.__videoTimelineHandleLabel { position:absolute; left:-19px; top:-31px; width:48px; height:17px; -moz-border-radius:7px; background:#000000; opacity:.8; padding:3px 0 0 0; font-family:verdana; font-size:11px; font-weight:bold; color:#ffffff; text-align:center; }
.__videoVolume { position:absolute; left:407px; top:0px; width:26px; height:26px; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAJFJREFUSMftlOENAiEMRhsWuBFYgQ0c4eIEN9Kt4AQ4Qm8D3cQR3v3QRGJEAqYkl%2FB%2BQx807ScyGBwOYOohOQHRWrLwRC0lK2%2F07zYCAVB%2Bo6%2BzHngAvkV0o0z6owuwfqvlCq5Q%2BbZr7o7rtQYl0VZZ7ywi99ZhiObDkJH7jyFR05RIdkl7RNBsHkFdQ3UwaGIHlvnlEw6%2BeGQAAAAASUVORK5CYII%3D); }
.__videoFullscreen { position:absolute; left:433px; top:0px; width:26px; height:26px; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAALhJREFUSMftU8ENwjAMvLAAI1RskAnoCIyQFToBjMAKYZKyQWdggnSD48FZIJSqUdtfc1Ieji2ffD4DFRX7BMlIMpHsScZM3iuX%2BEG7lOjGL3xBTTPV61DAN%2Bp1uYn0%2FwAA59xr6URB8njJE%2F9kSySD4stW%2B7LGXvHdSCrmpDuSHMzCclvcqnmj3RhJzBBHM84aoiADDBMHa2Q9Sa4hKjnY7qemXXqwJx3rE8A1NxGAs%2FJjdXLFTvEG%2FwnnTQQyNx8AAAAASUVORK5CYII%3D); }
[/style]
[div class=’__video’]
[div class=’__videoFrame’][/div]
[div class=’__videoControl’]
[div class=’__videoPlay’][/div]
[div class=’__videoTimeline’]
[div class=’__videoTimelineLoaded’][/div]
[div class=’__videoTimelineHandle’]
[div class=’__videoTimelineHandleLabel’]2:30[/div]
[/div]
[/div]
[div class=’__videoVolume’][/div]
[div class=’__videoFullscreen’][/div]
[/div]
[/div]
1. In this proposal it looks like the current time appears only when the pointer is hovering over the slider, and the total time does not appear, is that correct?
The current time popping up over the content does interfere with the content.
The “Concept 2” proposal looks like it could show the current time always, but still does not show the total time.
Are there proposals which show both the current time and the total time?
[while it may not make much difference when you’re watching commercials, it does make a difference when you click on a seminar video and want to know if this will take 15 minutes or 60 minutes without disturbing the playback.]
2. Are there any proposals with scroll controls (like on the ends of a scrollbar)? In a long video, sometimes you want to backup just a little to repeat the last sentence or two, but it is very hard to do so by dragging the slider. Maybe just by clicking in the space before the slider to backup 10 seconds?
3. The 4-arrow expand icon took me too long to figure out; I saw a four-pointed star or clover. (Maybe nest off-center rounded-rectangle crt-screens, or show a projection screen on a stand. Does it fill screen or fill window?)
4. Will the controls be stylable with CSS?
(icons, sizes, colors, backgrounds, borders, etc.)
Duplicating this control in js just to style it seems too hard.
Since changing numbers can be distracting when there is no action in the video, numbers could appear just
(a) when video is not playing, or
(b) when pointer is over slider bar (so user can choose to show numbers by leaving pointer there, but does not show them by default if user leaves pointer over play button)
Some Variants with digital readouts:
A. separate analog/digital readouts for [played/loaded/total]
() )[0:00/0:00/10:0]
()-) )[0:00/0:30/10:0]
()——————) )[0:00/4:30/10:0]
(=========()——–) )[2:30/4:30/10:0]
(================()-) )[4:00/4:30/10:0]
(==================() )[4:30/4:30/10:0]
(==================()——————) )[4:30/9:30/10:0]
(=====================================()-)[9:30/10:0/10:0]
(=======================================()[10:0/10:0/10:0]
B. label outside edge
()0:00 )10:0
()0:00 )10:0 // hides 0:30 loaded
()0:00————–)4:30 )10:0
(=========()2:30—-)4:30 )10:0
(================()4:00 )10:0 // hides 4:30 loaded
(==================()4:30 )10:0
(==================()4:30————–) )10:0 // hides 9:30 loaded
(==================()4:30—————-)10:0
(=====================================()-)10:0 // hides 9:30 played
(=======================================()10:0
C. label inside edge
(0:00) 10:0)
(0:00)-) 10:0) // hides 0:30 loaded
(0:00)————–4:30) 10:0)
(=========(2:30)—-4:30) 10:0)
(================(4:00)-) 10:0) // hides 4:30 loaded
(==================(4:30) 10:0)
(==================(4:30)————–9:30) ) // hides 10:0 total
(==================(4:30)—————–10:0)
(=====================================(9:30)–) // hides 10:0 total
(========================================(10:0)
D. play label inside, loaded and total outside
(0:00)0:00 )10:0
(0:00)-)0:30 )10:0
(0:00)——————)4:30 )10:0
(=========(2:30)——–)4:30 )10:0
(================(4:00)-)4:30 )10:0
(==================(4:30)4:30 )10:0
(==================(4:30)——————) )10:0 // hides 9:30 loaded
(=====================================(9:30)–)10:0
(========================================(10:0)10:0
I kinda like ‘C’. (again, hiding numbers except when stopped or under pointer)
[Oops, it collapsed spaces. Trying again with ‘.’ instead of space. You might hae to view souce to see this in monospace font.]
Since changing numbers can be distracting when there is no action in the video, numbers could appear just
(a) when video is not playing, or
(b) when pointer is over slider bar (so user can choose to show numbers by leaving pointer there, but does not show them by default if user leaves pointer over play button)
Some Variants with digital readouts:
A. separate analog/digital readouts for [played/loaded/total]
()…………………………………)[0:00/0:00/10:0]
()~)……………………………….)[0:00/0:30/10:0]
()~~~~~~~~~~~~~~~~~~)………………..)[0:00/4:30/10:0]
(=========()~~~~~~~~)………………..)[2:30/4:30/10:0]
(================()~)………………..)[4:00/4:30/10:0]
(==================()………………..)[4:30/4:30/10:0]
(==================()~~~~~~~~~~~~~~~~~~).)[4:30/9:30/10:0]
(=====================================()~)[9:30/10:0/10:0]
(=======================================()[10:0/10:0/10:0]
B. label outside edge
()0:00……………………………..)10:0
()0:00……………………………..)10:0 // hides 0:30 loaded
()0:00~~~~~~~~~~~~~~)4:30…………….)10:0
(=========()2:30~~~~)4:30…………….)10:0
(================()4:00………………)10:0 // hides 4:30 loaded
(==================()4:30…………….)10:0
(==================()4:30~~~~~~~~~~~~~~).)10:0 // hides 9:30 loaded
(==================()4:30~~~~~~~~~~~~~~~~)10:0
(=====================================()~)10:0 // hides 9:30 played
(=======================================()10:0
C. label inside edge
(0:00)………………………………10:0)
(0:00)~)…………………………….10:0) // hides 0:30 loaded
(0:00)~~~~~~~~~~~~~~4:30)……………..10:0)
(=========(2:30)~~~~4:30)……………..10:0)
(================(4:00)~)……………..10:0) // hides 4:30 loaded
(==================(4:30)……………..10:0)
(==================(4:30)~~~~~~~~~~~~~~9:30)..) // hides 10:0 total
(==================(4:30)~~~~~~~~~~~~~~~~~10:0)
(=====================================(9:30)~~) // hides 10:0 total
(========================================(10:0)
D. play label inside, loaded and total outside
(0:00)0:00………………………………)10:0
(0:00)~)0:30…………………………….)10:0
(0:00)~~~~~~~~~~~~~~~~~~)4:30……………..)10:0
(=========(2:30)~~~~~~~~)4:30……………..)10:0
(================(4:00)~)4:30……………..)10:0
(==================(4:30)4:30……………..)10:0
(==================(4:30)~~~~~~~~~~~~~~~~~~)..)10:0 // hides 9:30 loaded
(=====================================(9:30)~~)10:0
(========================================(10:0)10:0
I kinda like ‘C’. (again, hiding numbers except when stopped or under pointer)
Oops, it collapses spaces and converts ‘-‘ and ‘.’. Trying again with ‘_’ instead of space. You might have to view source to see this in monospace font.
Since changing numbers can be distracting when there is no action in the video, numbers could appear just
(a) when video is not playing, or
(b) when pointer is over slider bar (so user can choose to show numbers by leaving pointer there, but does not show them by default if user leaves pointer over play button)
Some Variants with digital readouts:
A_ separate analog/digital readouts for [played/loaded/total]
()_______________________________________)[0:00/0:00/10:0]
()~)_____________________________________)[0:00/0:30/10:0]
()~~~~~~~~~~~~~~~~~~)____________________)[0:00/4:30/10:0]
(=========()~~~~~~~~)____________________)[2:30/4:30/10:0]
(================()~)____________________)[4:00/4:30/10:0]
(==================()____________________)[4:30/4:30/10:0]
(==================()~~~~~~~~~~~~~~~~~~)_)[4:30/9:30/10:0]
(=====================================()~)[9:30/10:0/10:0]
(=======================================()[10:0/10:0/10:0]
B_ label outside edge
()0:00___________________________________)10:0
()0:00___________________________________)10:0 // hides 0:30 loaded
()0:00~~~~~~~~~~~~~~)4:30________________)10:0
(=========()2:30~~~~)4:30________________)10:0
(================()4:00__________________)10:0 // hides 4:30 loaded
(==================()4:30________________)10:0
(==================()4:30~~~~~~~~~~~~~~)_)10:0 // hides 9:30 loaded
(==================()4:30~~~~~~~~~~~~~~~~)10:0
(=====================================()~)10:0 // hides 9:30 played
(=======================================()10:0
C_ label inside edge
(0:00)____________________________________10:0)
(0:00)~)__________________________________10:0) // hides 0:30 loaded
(0:00)~~~~~~~~~~~~~~4:30)_________________10:0)
(=========(2:30)~~~~4:30)_________________10:0)
(================(4:00)~)_________________10:0) // hides 4:30 loaded
(==================(4:30)_________________10:0)
(==================(4:30)~~~~~~~~~~~~~~9:30)__) // hides 10:0 total
(==================(4:30)~~~~~~~~~~~~~~~~~10:0)
(=====================================(9:30)~~) // hides 10:0 total
(========================================(10:0)
D_ play label inside, loaded and total outside
(0:00)0:00____________________________________)10:0
(0:00)~)0:30__________________________________)10:0
(0:00)~~~~~~~~~~~~~~~~~~)4:30_________________)10:0
(=========(2:30)~~~~~~~~)4:30_________________)10:0
(================(4:00)~)4:30_________________)10:0
(==================(4:30)4:30_________________)10:0
(==================(4:30)~~~~~~~~~~~~~~~~~~)__)10:0 // hides 9:30 loaded
(=====================================(9:30)~~)10:0
(========================================(10:0)10:0
I kinda like ‘C’. (again, hiding numbers except when stopped or under pointer)
Oh, and i would name my third-born (1st & 2nd are already taken) after whoever enables keyboard controls for videos.
My proposal:
If video has focus, do this:
1. cursor-left : rewind video back one second
2. cursor-right : wind video forward one second
3. CTRL+cursor-left : rewind video back TEN seconds
4. CTRL+cursor-right : wind video forward TEN seconds
5. ALT+cursor-left : rewind video to BEGINNNG
6. ALT+cursor-right : wind video to END
7. cursor-up : increase volume by 5%
8. cursor-down : decrease volume by 5%
9. ALT+cursor-up : increase volume to MAX
10. ALT+cursor-down : MUTE volume
11. Spacebar : pause / resume playback
12. ENTER : go to full-screen (or CTRL+ENTER?)
13. ESC : exit full-screen
There should be some visual (but subtle) clue that the video has focus. I suggest the video progress bar marker gets a vertical line inside it:
No focus: —( )—–
Focus: —(|)—–
I generally agree with most of the comments here.
The controls should really be native to the platform.
Total length of video should be displayed upfront somehow. (I always use this to see if I have enough time to watch it. I like the layout of YouTube’s controls.)
Keyboard shortcuts are a must! (I really really miss the spacebar play/pause when watching web videos!)
As for the volume icon: I think the speaker icon is more recognizable as volume but I think the bars icon is easier to operate. After reading some of these comments, it is clear that the bars icon is the way to go. There shouldn’t really be any confusion that bars indicates volume because its right below a video. In other words, the context gives it meaning.
Also, I’m wondering if the order of the controls is optimal? The most used controls should be placed on the corners. Play/pause seems like it is in the correct position. However, I’m wondering which feature is used more: volume or fullscreen. If the volume feature is used more then it should be placed in the right corner instead of the fullscreen button. You’ll probably have to do some research or testing there to find that out!
Thanks for allowing us to have some input on the design decisions. It is really appreciated!
One of the touches I really like about the Gnome volume control is that I can hover over it and use the scroll wheel to change the volume. This feature would be a great addition to the volume control here – perhaps with a middle-click on it to (un)mute it.
I don’t like pop-up volume controls – they require two clicks, some dragging and some extra mouse movement where the segmented bar requires only a single click. But they do offer fine control. Perhaps a horizontal volume slider inline would be a good compromise.
It would also be useful to be able to double-click on the time bar in order to access a text entry field to enter a specific time. This would help for those articles which say “the interesting content starts at 2:03” without the need to scrub back and forth.
My 2 cents from a player I work on and had some usability tests done:
– Toggle button for time, with “time left” as a default, and full time as another option (to avoid huge line like hh:mm:ss / hh:mm:ss)
– Useful to keep speaker icon as shortcut for mute
– Fixed bar for volume is preferred then pop-up (easier to control)
– For video player, ppl rather used pause when they wanted to mute (this was interesting observation from some usability tests!)
– Time tooltip while scrolling on time-line
– Keyboard shortcuts are really a must. Something like:
Play/pause – Space bar
Fullscreen/windowed mode – Enter and Double click on the video
Exit full screen mode – ESC
Volume down – minus
Volume up – plus
Mute – M
Seek step forward (10 sec) – ]
Seek step backward (10 sec) – [
Switch video mode – V
Question > do you expect to have any issue with aspect ration (4:3 / 16:9)? If yes – might be interesting to consider at least keyboard shortcut…
Cheers!
can you put a kitten somewhere on the control?