aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorSam Potts <me@sampotts.me>2015-02-28 17:00:40 +1100
committerSam Potts <me@sampotts.me>2015-02-28 17:00:40 +1100
commit30d6a0cd5f21783b44e0e0e7f8997aae31bdce36 (patch)
treebf737d543d1f0c40eafaa80c5eebb427f7eb5ac9 /src
parentb2ffd7d3ca9077087fcecff4231a4a9986b5c3e1 (diff)
downloadplyr-30d6a0cd5f21783b44e0e0e7f8997aae31bdce36.tar.lz
plyr-30d6a0cd5f21783b44e0e0e7f8997aae31bdce36.tar.xz
plyr-30d6a0cd5f21783b44e0e0e7f8997aae31bdce36.zip
Aria tidy up
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js30
-rw-r--r--src/templates/controls.html8
2 files changed, 21 insertions, 17 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 5075a1d2..dba1d69f 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.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();
diff --git a/src/templates/controls.html b/src/templates/controls.html
index d25c52ee..3970d143 100644
--- a/src/templates/controls.html
+++ b/src/templates/controls.html
@@ -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">