Aria tidy up
This commit is contained in:
Sam Potts
parent
b2ffd7d3ca
commit
30d6a0cd5f
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.0.15",
|
||||
"version": "1.0.16",
|
||||
"description": "A simple HTML5 media player using custom controls",
|
||||
"homepage": "http://plyr.io",
|
||||
"keywords": [
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
# Changelog
|
||||
|
||||
## v1.0.16
|
||||
- Aria label is now dynamic
|
||||
|
||||
## v1.0.15
|
||||
- Fix for seek time display in controls
|
||||
- More documentation for controls html
|
||||
|
||||
11
controls.md
11
controls.md
@ -11,8 +11,7 @@ The classes and data attributes used in your template should match the `selector
|
||||
You need to add several placeholders to your html template that are replaced when rendering:
|
||||
|
||||
- `{id}` - the dynamically generated ID for the player (for form controls)
|
||||
- `{aria-label}` - the play button label for screen readers
|
||||
- `{seek-time}` - the seek time specified in options for fast forward and rewind
|
||||
- `{seektime}` - the seek time specified in options for fast forward and rewind
|
||||
|
||||
Currently all buttons and inputs need to be present for Plyr to work but later we'll make it more dynamic so if you omit a button or input, it'll still work.
|
||||
|
||||
@ -38,9 +37,9 @@ var controls = [
|
||||
'</button>',
|
||||
'<button type="button" data-player="rewind">',
|
||||
'<svg><use xlink:href="#icon-rewind"></use></svg>',
|
||||
'<span class="sr-only">Rewind <span class="player-seek-time">{seek_time}</span> seconds</span>',
|
||||
'<span class="sr-only">Rewind <span class="player-seek-time">{seektime}</span> seconds</span>',
|
||||
'</button>',
|
||||
'<button type="button" aria-label="{aria-label}" data-player="play">',
|
||||
'<button type="button" data-player="play">',
|
||||
'<svg><use xlink:href="#icon-play"></use></svg>',
|
||||
'<span class="sr-only">Play</span>',
|
||||
'</button>',
|
||||
@ -50,7 +49,7 @@ var controls = [
|
||||
'</button>',
|
||||
'<button type="button" data-player="fast-forward">',
|
||||
'<svg><use xlink:href="#icon-fast-forward"></use></svg>',
|
||||
'<span class="sr-only">Fast forward <span class="player-seek-time">{seek_time}</span> seconds</span>',
|
||||
'<span class="sr-only">Fast forward <span class="player-seek-time">{seektime}</span> seconds</span>',
|
||||
'</button>',
|
||||
'<span class="player-time">',
|
||||
'<span class="sr-only">Time</span>',
|
||||
@ -64,7 +63,7 @@ var controls = [
|
||||
'<svg><use xlink:href="#icon-sound"></use></svg>',
|
||||
'<span class="sr-only">Mute</span>',
|
||||
'</label>',
|
||||
'<label for="volume{id}" class="sr-only">Volume:</label>',
|
||||
'<label for="volume{id}" class="sr-only">Volume</label>',
|
||||
'<input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume">',
|
||||
'<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">',
|
||||
'<label for="captions{id}">',
|
||||
|
||||
2
dist/js/docs.js
vendored
2
dist/js/docs.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/plyr.js
vendored
2
dist/js/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/templates.js
vendored
2
dist/js/templates.js
vendored
@ -1,2 +1,2 @@
|
||||
var templates = {};
|
||||
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-playback\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-refresh\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind <span class=\"player-seek-time\">{seek-time}</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" aria-label=\"{aria-label}\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Fast forward <span class=\"player-seek-time\">{seek-time}</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-sound\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-sound\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume:</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-bubble\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-collapse\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-expand\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
|
||||
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-playback\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-refresh\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind <span class=\"player-seek-time\">{seektime}</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Fast forward <span class=\"player-seek-time\">{seektime}</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-sound\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-sound\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-bubble\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-collapse\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-expand\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.0.15",
|
||||
"version": "1.0.16",
|
||||
"description": "A simple HTML5 media player using custom controls",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "gulpfile.js",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v1.0.15
|
||||
// plyr.js v1.0.16
|
||||
// https://github.com/sampotts/plyr
|
||||
// ==========================================================================
|
||||
// Credits: http://paypal.github.io/accessible-html5-video-player/
|
||||
@ -432,11 +432,8 @@
|
||||
// Need to do a default?
|
||||
var html = config.html;
|
||||
|
||||
// Replace aria label instances
|
||||
html = _replaceAll(html, "{aria-label}", config.playAriaLabel);
|
||||
|
||||
// Replace seek time instances
|
||||
html = _replaceAll(html, "{seek-time}", config.seekTime);
|
||||
html = _replaceAll(html, "{seektime}", config.seekTime);
|
||||
|
||||
// Replace all id references
|
||||
html = _replaceAll(html, "{id}", player.random);
|
||||
@ -490,6 +487,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Setup aria attributes
|
||||
function _setupAria() {
|
||||
var label = player.buttons.play.innerText;
|
||||
|
||||
// If there's a media title set, use that for the label
|
||||
if (typeof(config.title) !== "undefined" && config.title.length) {
|
||||
label = player.buttons.play.innerText + ", " + config.title;
|
||||
}
|
||||
|
||||
player.buttons.play.setAttribute("aria-label", label);
|
||||
}
|
||||
|
||||
// Setup media
|
||||
function _setupMedia() {
|
||||
player.media = player.container.querySelectorAll("audio, video")[0];
|
||||
@ -1058,14 +1067,6 @@
|
||||
return false;
|
||||
}
|
||||
|
||||
// Set up aria-label for Play button with the title option
|
||||
if (typeof(config.title) === "undefined" || !config.title.length) {
|
||||
config.playAriaLabel = "Play";
|
||||
}
|
||||
else {
|
||||
config.playAriaLabel = "Play " + config.title;
|
||||
}
|
||||
|
||||
// Setup media
|
||||
_setupMedia();
|
||||
|
||||
@ -1080,6 +1081,9 @@
|
||||
return false;
|
||||
}
|
||||
|
||||
// Set up aria-label for Play button with the title option
|
||||
_setupAria();
|
||||
|
||||
// Captions
|
||||
_setupCaptions();
|
||||
|
||||
|
||||
@ -14,9 +14,9 @@
|
||||
</button>
|
||||
<button type="button" data-player="rewind">
|
||||
<svg><use xlink:href="#icon-rewind"></use></svg>
|
||||
<span class="sr-only">Rewind <span class="player-seek-time">{seek-time}</span> seconds</span>
|
||||
<span class="sr-only">Rewind <span class="player-seek-time">{seektime}</span> seconds</span>
|
||||
</button>
|
||||
<button type="button" aria-label="{aria-label}" data-player="play">
|
||||
<button type="button" data-player="play">
|
||||
<svg><use xlink:href="#icon-play"></use></svg>
|
||||
<span class="sr-only">Play</span>
|
||||
</button>
|
||||
@ -26,7 +26,7 @@
|
||||
</button>
|
||||
<button type="button" data-player="fast-forward">
|
||||
<svg><use xlink:href="#icon-fast-forward"></use></svg>
|
||||
<span class="sr-only">Fast forward <span class="player-seek-time">{seek-time}</span> seconds</span>
|
||||
<span class="sr-only">Fast forward <span class="player-seek-time">{seektime}</span> seconds</span>
|
||||
</button>
|
||||
<span class="player-time">
|
||||
<span class="sr-only">Time</span>
|
||||
@ -41,7 +41,7 @@
|
||||
<span class="sr-only">Mute</span>
|
||||
</label>
|
||||
|
||||
<label for="volume{id}" class="sr-only">Volume:</label>
|
||||
<label for="volume{id}" class="sr-only">Volume</label>
|
||||
<input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume">
|
||||
|
||||
<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user