(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
check (x2): default high contrast
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: