Video Player Roadmap

Goals for Video Player

• ideal for delivery of OER to a diverse audience
• personalizable in terms of preferred sensory input modes
• platform agnostic
• flexible based on context
• fully configurable by an integrator

Designs

• (Floe) video player mockups (final)
• Video Player Feature List
• Video Player Questions
• Video Player_keyboard shortcuts summary

Iterations

Here is a rough plan for implementing the designs specified above.

Full screen

• Full screen on all supported platforms (IE8, IE9, latest FF, latest Chrome, latest Safari)
• Hide and show controls time based on focus and hover

Integration with Wordpress

• Ensure cross browser support
• Fallback for old browsers
• Use player on IDI website

Cross format support

• Fall back for non HTML5 video
• Support for YouTube videos
• Support for Vimeo

Video Player in a learning context

• Integrate video player into OER Commons

More Access

• Described video support
• Keyboard shortcuts

Scrub bar refinements

• Progress communicated in the scrub bar
• Frame preview
• Editable timecodes

Mobile

• Video player works on a mobile
• Styling refined for mobile

Organizing and quick access

• Chapters
• Bookmarks (might be removed from the designs)

API and More details

• Decide on and implement a public API
• Adjustable window size
• Layout switching
• Embed feature

Development Decisions

Selection of base player

We considered how modular and configurable each of the existing video players are as well as other factors such as license, general code quality, etc (see Evaluations of Existing HTML5 Video Players for details.)

We found that none of the players we looked at offered enough of what we were looking for to serve as the basis for our video player, though we did find some modules that offered functionality that could be useful.

We will create a Video Player that supports full configurability and customizability by designing it in the Infusion tradition: combining smaller modules that focus on one thing and do it well. We will create some pieces and use others that exist already:

• mediaelement.js http://mediaelementjs.com/
• Captionator http://captionatorjs.com/
• John Dyer's full-screen support http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

Those modules will be used in a videoPlayer depending on the browser type and its version shown in the following diagram

We will start with Charly Molter's video player code as the base for tying the pieces together.

Video Player Community Code Review - Jan. 27, 2012

Code

The code base is being hosted on github .

You can see a nightly build of the player here: http://build.fluidproject.org/videoPlayer/demos/Mammals.html