Cue, a Video.js 10 skin

Cue

A cue is one line of subtitles, and the signal to begin. Cue is a quiet skin for Video.js 10 built around that idea: it stays out of the picture, speaks five languages, and turns any sentence into a clip.

Concept

  • Quiet until you reach for it. One row: play, volume, time, language, clip, settings, full screen. The controls fade in as the pointer comes near the bar (the last 30% of the player's height), and the subtitles step up so the bar never covers a line.
  • Five languages, one asset. The English original plus Spanish, French, German and Italian voice-overs and subtitles are tracks on one Mux asset. The language button shows the voice you hear (EN, IT…), a short line under it lights up while subtitles are on, and one panel holds both lists, filled by Video.js from the stream.
  • Clips that keep the language. The scissors on the bar turn the seek bar into a range that snaps to subtitle lines, so a clip never cuts a word. The link keeps the voice, the subtitles and the look; the saved video fades in and out with the subtitles burned in.
  • The film's own light. The skin has no colour of its own. Around the player, the page glows with the colours of the scene.

Two rules guided every choice: don't make me think, and less is more.

Palette

Monochrome on purpose: the only colour comes from the film.

  • Ink#FFFFFF Icons, text, progress · 19.0:1 on Night
  • Mist#C9CBD2 Menu values, hints · 11.7:1 on Night
  • Night#101114 · 95% Menus and panels; the subtitle band at 80%
  • Track#FFFFFF · 32% The part of the seek bar still to play
  • Line#F5F6FC · 16% Hairlines and borders
  • Veil#000 80% → 0% The shade under the controls

Typography

Cue is about lines you read in a second, over a moving picture. So everything is set in Atkinson Hyperlegible, drawn by the Braille Institute for readers with low vision: letters that are easy to mix up, like I, l and 1 or O and 0, are drawn so they cannot be. Next sets the subtitles, menus and labels; Mono sets every time on screen, so the figures never jump while they count.

Urquhart Castle, gazing out over the dark waters of Loch Ness,Subtitles · Next · 500 · on Night 80%
Create a clipLabels · Next · 14 px · 600
0:49 / 1:33Time · Mono · 14 px · 600
0:49.0 – 0:53.0 · 4.0 sClip range · Mono · 13 px · 600

Atkinson Hyperlegible Next · Atkinson Hyperlegible Mono · OFL 1.1, served with the skin

Details

  • Subtitles first. English subtitles are on from the start; Off is one tap away.
  • 44 px targets. Every control is the same easy size.
  • Solid icons. Play and pause read on bright and dark frames alike.
  • Calm motion. Fades of 0.6 s or less; none with reduced motion.
  • Keyboard. Everything works with keys; press ? in the player for the list.