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/videoPlayer/demos/Mammals.html