@lardconcepts the feedback you quoted is less about the layout of the controls; more about their performance (the previous and next buttons shouldn't lose focus after the user clicks on them). That's a bug, which I've created a new issue for: #387

That said, I'm playing around with some alternative layouts. What do you (and what do others?) think of moving the seekbar to the top of the control bar so it spans the full width of the player, then moving all buttons onto a single line, rather than two lines? Buttons that are used for player control (play/pause, all navigation buttons, volume) would be on the left; and accessibility-related buttons (plus full screen) would be on the right. See below for screen shots.

Current design of video player at 480 pixels, fully loaded with all possible buttons

Proposed design of video player at 480 pixels, fully loaded with all possible buttons

The above proposed design is more crowded than the current design, but that's partly the result of having a fully loaded player with a small width. This combination is highly unlikely. We encourage folks to include all possible accessibility features, but if they do so, they should provide the video in a wider container.

Proposed design of video player at 700 pixels, fully loaded with all possible buttons

This player is the same as the previous one, but 700 pixels wide, so the buttons aren't so crowded.

Proposed design of video player at 480 pixels, featuring the most common buttons

This player is back to 480 pixels, but includes only the most common buttons (there are no playlist-associated buttons Previous and Next, nor sign language or chapters buttons).

Proposed design of audio player at 480 pixels, with no playlist

Proposed design of audio player at 480 pixels, with a playlist

With playlists, the player would have Previous and Next buttons.

Note that the proposed new design is not intended to replace the features explained in my above comment on November 4, 2018.

Uh oh!

Customize controls #305

Description

Activity

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions