Floe video player wireframes (January 2012)

Owned by Tona Monjo
Last updated: Dec 20, 2012 by Former user (Deleted)Version comment
4 min read

Overview

These wireframes are an evolution of the November 2011 wireframes. 

Download the PDF format. 

1. Initial view and mouse on video

Fig1. After loading the video, all the options remain visible for about 4 sec. Then they disappear. When the user moves the mouse over the video, the options will appear again.

Options will be available by mouse, tapping (in touch devices) or keyboard. The keyboard shortcuts will be customizable by Display Preferences.

2. Hover

Fig2. Hover on video elements

Fig3. Mouse on scrubbing bar (with frame preview)


Fig4. Mouse on scrubbing bar, played frames (with frame preview)


Fig5. Hover on scrubbing bar, current frame


Fig6. Diverse hovers

3. Selecting the Video quality 

Fig7. When the user clicks on the Video Quality option, all the options available appear. 

Fig8. The user selects a new Video Quality

4. Captions

Fig9. The user can select another language for the Captions, or add a new translation (heads to Universal Subtitles). 

Fig10. Indication for the captions that come from Universal Subtitles. 

5. Audio Narration

Fig11. The user can select another language for the Audio Narration, or request a new one.

Fig12. Process to request a new caption.

6. Full Text

Fig13. The user can select another language for the Full Text, or request a new translation. Grey area indicates the text in the frame that is being played.

Fig14. In case that the Full Text is derived from Universal Subtitles Captions, it is indicated in the title of the Full Text box.

Fig15. Options to hide the Full Text, and to resize its box.

Fig16. On mouse over the Full Text, the scrubbing bar shows where the highlighted text appears in the video.

7. Embed

Fig17. Option to embed the video in a external web page.

8. Full Screen

Fig18. Full Screen view.

Fig19. Full Screen view, with hovers.

Fig20. Full Screen view, captions and its options displayed.

9. Full Screen, full text displayed

Fig21. Full Screen view, Full Text displayed. The video resizes to accomodate the text. 

Fig22. On mouse over the Full Text, the scrubbing bar shows where the highlighted text appears in the video. The user can also drag the vertical bar between the video and the text, to adjust their size. 

10. View in Tablet, portrait orientation

Fig23. Video with Full Text, as seen in a Tablet, portait orientation. 

Fig24. The user can drag the bar to resize video and text area.Â