Playr | HTML5

Playr: yet another HTML5

Julien 'delphiki' Villetorte
< gdelphiki[at]gmail[dot]com >
@delphiki

Compatibility & Features

All major browsers.

• Easy integration
• Multiple SubRip / WebVTT tracks support
• True fullscreen (Mozilla & Webkit)
• No Flash fallback yet

Download

Available on GitHub.

Notes on local testing

Some browsers disable XMLHttpRequest on local files by default.

• Opera: enable opera:config#UserPrefs|AllowFileXMLHttpRequest
• Chrome: launch it with --allow-file-access-from-files

Usage

Just add the class name "playr_video" to your video tag:

WebVTT implementation

Working features:

• Track kinds:
  • subtitles
  • chapters
• Text position
• Text alignment
• Text size
• Vertical text (incompatible with other cue settings)
• Line position
• Class tags
• Cue timestamps tags Note on cue timestamps:

00:00:17,556 --> 00:00:20,631 Can you hear it? <00:00:18,556>The noise, <00:00:19,600>the drumbeat?

::cue:past & ::cue:future are remplaced with the CSS classes playr_cue_past & playr_cue_future.
They're not defined by default. Customize them as you wish.

Keyboard

• : switch between controls
• : volume up
• : volume down
• : rewind
• : forward
• : toggle fullscreen
• : delay subtitles (-500 ms)
• : delay subtitles (+500 ms)
• : default subtitles sync

Demo

WebVTT subtitles file: download
WebVTT chapters file: download