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 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
...
You can see a nightly build of the player here: http://build.fluidproject.org/videoPlayer/videoPlayer/demos/Mammals.html
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
...