(Floe) video player mockups (final)

General Controls


1 video player initial state, preview frame taken from the middle of the video clip if not specified by implementer


2 video loading with interface open, on initial buffer first frame is displayed


5 video paused with interface open


33 transcript menu open and on (English)


36 request transcript menu open, language selected
38 request transcript menu open, request sending
39 request transcript menu open, transcript sent


17 captions on with interface closed
18 transcript on with interface closed


45 transcript panel open, language selected; English


7 preview box appears on timeline


7 preview box appears on timeline


6 fullscreen view
19 volume slider expanded


47 fullscreen view, transcript positioned right of player


48 fullscreen view, transcript positioned beneath player

Error Screens

45% black overlay on top of last watched frame or page background

problem loading video
> text: 14pt bold italic Open Sans
> text drop shadow: #000000 30% opacity (offset: 1px, 1px blur:0px)

retry
> text: 14pt bold Open Sans all-caps
> text drop shadow: #000000 30% opacity (offset: 1px, 1px blur:0px)


dismissing captions/transcript error

  • using close button
  • loading other captions/transcripts
  • turning off captions/transcripts
  • getting another error message from captions/transcripts

Download video player error icons (1x & 2x)

Assets & styling

Download large (2x) video player icons for high contrast themes

wedge: default high contrast

check (x2): default high contrast

Download volume slider bg

type
open sans

initial play
Download initial play icons


notes
> on initial play: large play button over frame from the middle of the video by default (or keyframe if defined), no buffering, video controls do not show on hover
> clicking initial play: