delphiki/playr

Yet another HTML5 <video> player.

Playr: yet another HTML5 <video> player

License

MIT License

Compatibility

All major browsers.

Features

• Easy integration
• Multiple SubRip / WebVTT tracks support
• Keyboard accessible
• True fullscreen

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:

<video src="myVideo.ext" class="playr_video">
	<track kind="subtitles" label="English Subtitles" srclang="en" src="mySubs.srt" /> // optional
</video>

You can now force the caption rendering if you prefer to use Playr's rendering over the native one, by adding the following attribute:

<video ... data-rendering="playr">

WebVTT implementation

Working features:

• Track kinds:
  • subtitles
  • captions
  • descriptions
  • 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

• Tab : switch between controls
• ↑ : volume up
• ↓ : volume down
• ← : rewind
• → : forward
• f : toggle fullscreen
• x : delay subtitles (-500 ms)
• c : delay subtitles (+500 ms)
• d : default subtitles sync

Demos

See demos on the project page.

playr's Issues

2 Bugs of Playr are found and fixed

hello,
I am using your Playr project, and find 2 bugs. I fixed them.
I send an e-mail to your gmail account. Please check it out.

Thanks,

Autoplay doesn't work

Setting autoplay doesn't have an effect on the video:

<video class="playr_video" autoplay>
</video>

Up and down arrow shortcut

Hi again,

Another annoying thing, I think, is that with the up and down arrow shortcut for the volume, we can't navigate in the page any more with those keys.

Wouldn't it be better to use those kinds of useful keys in the browsing context combined with another key like Ctrl or any of those kinds of keys?

Bye.

Few videos on the same web page

Hi,

The first problem is that the more there are videos, the slowest it becomes and after a certain number of video (about 40), it's impossible to load the page. Now, this might be independent from playr, maybe it's just too much for the browser or the virtual memory or I don't know what.

Then, another problem tie to multiple videos is that, when using a keyboard shortcut, it works in all videos (it's particularly annoying for the start and stop with space).

Thanks for taking interest on this issue.
Bye.

Request: download link in the menu

Hi,
Sorry, I didn't found how to submit a request, so I write it on the issues.
I think it would be great to have a download link in the menu to give the ability to download the video.
Bye.

Wishlist: support for multiple audio tracks

An option to select among several audio tracks in a video would be useful, especially for videos dubbed to several languages. The last time I checked, there was no consensus on how to implement it in HTML5, except that the video file must include all the audio files (muxed). You may want to check at http://dev.w3.org/html5/spec/media-elements.html#media-resources-with-multiple-media-tracks for more details on how to implement it in your player. Also, there's a proposed method for having the video and audio files separated: http://blog.gingertech.net/2011/05/01/html5-multi-track-audio-or-video/

srt Subtitle Flaws

Hi there,

I've noticed that .srt-Subtitles for Videos aren't working properly

• In latest Firefox, they aren't shown in Fullscreen mode
• In latest Chrome, they aren't shown at all
  tested with your demo page.

Bests, Martin

Chapters menu and Webkit-based browsers

Chapters menu does not display properly on webkit-based browsers (fades out when not hovering a chapter title).

GPL

I'd like to consider your lib, but I can't due to gpl:
http://en.wikipedia.org/wiki/GNU_General_Public_License#Copyleft

Since I plan to use it for commercial use. If you change to apache or LGPL i'd consider it again.

subtitles for audio

Hi,

As seen on the spec, the track element and so, the subtitles are for media elements and not only for video element:

http://dev.w3.org/html5/spec-preview/the-track-element.html

It would be realy great to be able to use playr also with audio element to display some subtitles in the screen while listening to the audio track.

Indeed, it would have been better to have a poster attribute in the audio element, to have a fixed image on the background of the screen, but, it's not in html5 spec, so, displaying just the subtitles would be enough, I would really apreciate just to be able to do that.

Bye.

Strange behavior with the space shortcut for play/pause

Since today's changes, when pressing the space to play or pause, it plays then pauses again (or the contrary), if the space bar is pushed during about one second, it plays, then pauses, then plays (or the contrary).