I do a lot of prototyping for 10ft. We build a lot of media apps so having a video player is key. The issue is since it is a 10ft experience, users interact with the media player controls via a remote (example; Siri remote) or a controller (example; Xbox or PS4). We create our prototypes using html, javascript and css, bind inputs to keyboard keys which then can be binded to remotes or controls using 3rd party libraries. This way we no only use our prototypes to test design solutions but also use them during our usability test. We are able to run the prototypes on a big screen, give a user a remote and via a faux experience get great feedback. My goal is to test the feasibility of using an existing framework versus custom built.
Looking for some video player frameworks that have a lot of features already built in, I came across videojs.com. It is a very active and stable framework with a ton of plugins and features our clients would request such as overlays, youtube playlists and close captioning capabilities. I wanted to test out if it was simple to navigate using keyboard inputs. Here is what I came up with.
[codepen_embed height=”635″ theme_id=”0″ slug_hash=”gmNXgK” default_tab=”result” user=”lsultani” preview=”true” data-preview=”true”]See the Pen videoJS Keyboard Navigation by Leslie Sultani (@lsultani) on CodePen.[/codepen_embed]
Although I was able to do basic navigation using the keyboard to select the buttons, there is still the challenge of further accessing the inputs and manipulating them, for example, grabbing the play head and scrubbing the video and raising the volume via the slider. These are things I will have to look into. Another big think to take into consideration is the controls layout, they will need to be flexible. Not only do I need to style them but also manipulate their position to match whatever design. I am certain I can make it happen as a plugin if there isn’t one available… thats going to take some time.
Next steps, rolling my own custom HTML5 video player.
About The Author
leslie