Html5 player for Course Online System

COL HTML5 PlayerCACS

COL Players• Online Players

• Flash• Silverlight

• Offline Players• Flash• Silverlight• iPhone/iPad App• Android App

All PlatformsWindows / Mac / Linux / Android / iPad

All PlatformsWindows / Mac / Linux / Android / iPad

HTML5 Player Features

Challenges we met

Challenges• Too many screen sizes to adapt• The screen data is too big• User Interaction

• Two whiteboards, one video, one screen• Desktop devices and touch devices

Study from other Apps

Responsive LayoutAuto suit different screen sizes

Customizable

Keyboard ShortcutsAction Shortcut

Toggle play/pause k or SpacebarGo back 5 seconds Left arrow

Go back 10 seconds j or Ctrl+Left arrowGo forward 5 seconds   Right arrowGo forward 10 seconds l or Ctrl+Right Arrow

Restart 0 (not the keypad number)

Go to Full Screen mode fExit Full Screen mode   Escape

Increase speed Shift+>Decrease speed Shift+<

Disadvantages of Using HTML5

Disadvantages of Using HTML5

• No local storage

• No support to legacy browsers

• No support iPhone due to Apple’s limitation

The future plan

• HTML5 for desktop (Windows/Mac)

• Support subtitles and closed captions

Demo