ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Keyboard accessibility improvements (Fixes #66)

Browse Source 
- Enter now works on checkboxes within the controls
This commit is contained in:
Sam Potts 2015-03-21 17:00:05 +11:00
parent 9feffb2972
commit 388cb4df39
10 changed files with 160 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/error.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.26/docs.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.27/docs.css">
</head>
<body>
<main>

10
docs/index.html
View File

@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.26/plyr.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.27/plyr.css">
<!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.26/docs.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.27/docs.css">
</head>
<body>
<header>
@ -67,13 +67,13 @@
<!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<script>
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.26/sprite.svg");
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.27/sprite.svg");
</script>
<!-- Plyr core script -->
<script src="//cdn.plyr.io/1.0.26/plyr.js"></script>
<script src="//cdn.plyr.io/1.0.27/plyr.js"></script>
<!-- Docs script -->
<script src="//cdn.plyr.io/1.0.26/docs.js"></script>
<script src="//cdn.plyr.io/1.0.27/docs.js"></script>
</body>
</html>

12
gulpfile.js
View File

@ -22,7 +22,8 @@ var fs = require("fs"),
s3 = require("gulp-s3"),
gzip = require("gulp-gzip"),
replace = require("gulp-replace"),
open = require("gulp-open");
open = require("gulp-open"),
size = require("gulp-size");
var root = __dirname,
paths = {
@ -223,6 +224,10 @@ gulp.task("cdn", function () {
// Upload to CDN
gulp.src(paths.upload)
.pipe(size({
showFiles: true,
gzip: true
}))
.pipe(rename(function (path) {
path.dirname = path.dirname.replace(".", version);
}))
@ -234,6 +239,11 @@ gulp.task("cdn", function () {
gulp.task("docs", function () {
console.log("Uploading " + version + " docs to " + aws.docs.bucket);
// Replace versioned files in readme.md
gulp.src([root + "/readme.md"])
.pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
.pipe(gulp.dest(root));
// Replace versioned files in *.html
gulp.src([paths.docs.root + "*.html"])
.pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))

3
package.json
View File

@ -1,6 +1,6 @@
{
"name": "plyr",
"version": "1.0.26",
"version": "1.0.27",
"description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io",
"main": "gulpfile.js",
@ -18,6 +18,7 @@
"gulp-replace": "^0.5.3",
"gulp-s3": "^0.3.0",
"gulp-sass": "^1.3.3",
"gulp-size": "^1.2.1",
"gulp-svgmin": "^1.0.0",
"gulp-svgstore": "^5.0.0",
"gulp-uglify": "~0.3.1",

8
readme.md
View File

@ -38,7 +38,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.0.26/plyr.js` to `https://cdn.plyr.io/1.0.26/plyr.js`
**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.0.27/plyr.js` to `https://cdn.plyr.io/1.0.27/plyr.js`
### Bower
If bower is your thang, you can grab Plyr using:
@ -51,11 +51,11 @@ More info on setting up dependencies can be found in the [Bower Docs](http://bow
If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
```html
<link rel="stylesheet" href="//cdn.plyr.io/1.0.26/plyr.css">
<script src="//cdn.plyr.io/1.0.26/plyr.js"></script>
<link rel="stylesheet" href="//cdn.plyr.io/1.0.27/plyr.css">
<script src="//cdn.plyr.io/1.0.27/plyr.js"></script>
```
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.26/sprite.svg`.
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.27/sprite.svg`.
### CSS
If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.

111
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.0.25
// plyr.js v1.0.27
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -317,6 +317,17 @@
function _toggleHandler(element, events, callback, toggle) {
events = events.split(" ");
// If a nodelist is passed, call itself on each node
if(element instanceof NodeList) {
for (var x = 0; x < element.length; x++) {
if (element[x] instanceof Node) {
_toggleHandler(element[x], arguments[1], arguments[2], arguments[3]);
}
}
return;
}
// If a single node is passed, bind the event listener
for (var i = 0; i < events.length; i++) {
element[toggle ? "addEventListener" : "removeEventListener"](events[i], callback, false);
}
@ -332,6 +343,35 @@
_toggleHandler(element, events, callback, false);
}
// Trigger event
function _triggerEvent(element, event) {
// Create faux event
var fauxEvent = document.createEvent("MouseEvents");
// Set the event type
fauxEvent.initEvent(event, true, true);
// Dispatch the event
element.dispatchEvent(fauxEvent);
}
// Toggle checkbox
function _toggleCheckbox(event) {
// Only listen for return key
if(event.keyCode && event.keyCode != 13) {
return true;
}
// Toggle the checkbox
event.target.checked = !event.target.checked;
// Set the attribute for CSS hooks
event.target[event.target.checked ? "setAttribute" : "removeAttribute"]("checked", "");
// Trigger change event
_triggerEvent(event.target, "change");
}
// Get percentage
function _getPercentage(current, max) {
if(current === 0 || max === 0 || isNaN(current) || isNaN(max)) {
@ -496,7 +536,7 @@
if (config.captions.defaultActive) {
_toggleClass(player.container, config.classes.captions.active, true);
player.buttons.captions.setAttribute("checked", "checked");
player.buttons.captions.setAttribute("checked", "");
}
}
@ -590,9 +630,12 @@
player.buttons.restart = _getElement(config.selectors.buttons.restart);
player.buttons.rewind = _getElement(config.selectors.buttons.rewind);
player.buttons.forward = _getElement(config.selectors.buttons.forward);
player.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen);
// Inputs
player.buttons.mute = _getElement(config.selectors.buttons.mute);
player.buttons.captions = _getElement(config.selectors.buttons.captions);
player.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen);
player.checkboxes = _getElements("[type='checkbox']");
// Progress
player.progress = {};
@ -899,7 +942,11 @@
}
// Set the current time
// Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
try {
player.media.currentTime = targetTime.toFixed(1);
}
catch(e) {}
// Logging
_log("Seeking to " + player.media.currentTime + " seconds");
@ -1225,22 +1272,6 @@
// Handle user exiting fullscreen by escaping etc
_on(document, fullscreen.fullScreenEventName, _toggleFullscreen);
// Click video
if(player.type === "video" && config.click) {
_on(player.videoContainer, "click", function() {
if(player.media.paused) {
_play();
}
else if(player.media.ended) {
_seek();
_play();
}
else {
_pause();
}
});
}
// Time change on media
_on(player.media, "timeupdate seeking", _timeUpdate);
@ -1251,15 +1282,18 @@
_on(player.buttons.seek, "change input", _seek);
// Captions
_on(player.buttons.captions, "click", function() {
_on(player.buttons.captions, "change", function() {
_toggleCaptions(this.checked);
});
// Clear captions at end of video
// Handle the media finishing
_on(player.media, "ended", function() {
// Clear
if(player.type === "video") {
player.captionsContainer.innerHTML = "";
}
// Reset UI
_checkPlaying();
});
@ -1277,6 +1311,25 @@
// Loading
_on(player.media, "waiting canplay seeked", _checkLoading);
// Toggle checkboxes on return key (as they look like buttons)
_on(player.checkboxes, "keyup", _toggleCheckbox);
// Click video
if(player.type === "video" && config.click) {
_on(player.videoContainer, "click", function() {
if(player.media.paused) {
_play();
}
else if(player.media.ended) {
_seek();
_play();
}
else {
_pause();
}
});
}
}
function _init() {
@ -1324,9 +1377,14 @@
// Listeners
_listeners();
// Successful setup
return true;
}
_init();
if(!_init()) {
return {};
}
return {
media: player.media,
@ -1357,7 +1415,8 @@
}
// Get the players
var elements = document.querySelectorAll(config.selectors.container), players = [];
var elements = document.querySelectorAll(config.selectors.container),
players = [];
// Create a player instance for each element
for (var i = elements.length - 1; i >= 0; i--) {
@ -1373,7 +1432,11 @@
// Setup a player instance and add to the element
if(typeof element.plyr === "undefined") {
element.plyr = new Plyr(element);
// Create new instance
var instance = new Plyr(element);
// Set plyr to false if setup failed
element.plyr = (Object.keys(instance).length ? instance : false);
}
// Add to return array

6
src/less/plyr.less
View File

@ -524,13 +524,13 @@
z-index: 10000000;
background: #000;
video {
height: 100%;
}
.player-video-wrapper {
height: 100%;
width: 100%;
video {
height: 100%;
}
.player-captions {
top: auto;
bottom: 90px;

6
src/sass/plyr.scss
View File

@ -532,13 +532,13 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
z-index: 10000000;
background: #000;
video {
height: 100%;
}
.player-video-wrapper {
height: 100%;
width: 100%;
video {
height: 100%;
}
.player-captions {
top: auto;
bottom: 90px;