aboutsummaryrefslogtreecommitdiffstats
path: root/src/js/plyr.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js/plyr.js')
-rw-r--r--src/js/plyr.js72
1 files changed, 66 insertions, 6 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 67d77e20..e8d852e8 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,7 +1,8 @@
// ==========================================================================
// Plyr
-// plyr.js v1.0.19
+// plyr.js v1.0.20
// https://github.com/sampotts/plyr
+// License: The MIT License (MIT)
// ==========================================================================
// Credits: http://paypal.github.io/accessible-html5-video-player/
// ==========================================================================
@@ -67,7 +68,65 @@
},
storage: {
enabled: true
- }
+ },
+ html: (function() {
+ return ["<div class='player-controls'>",
+ "<div class='player-progress'>",
+ "<progress class='player-progress-played' max='100' value='0'>",
+ "<span>0</span>% played",
+ "</progress>",
+ "<progress class='player-progress-buffer' max='100' value='0'>",
+ "<span>0</span>% buffered",
+ "</progress>",
+ "</div>",
+ "<span class='player-controls-playback'>",
+ "<button type='button' data-player='restart'>",
+ "<svg><use xlink:href='#icon-refresh'></use></svg>",
+ "<span class='sr-only'>Restart</span>",
+ "</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'>{seektime}</span> seconds</span>",
+ "</button>",
+ "<button type='button' data-player='play'>",
+ "<svg><use xlink:href='#icon-play'></use></svg>",
+ "<span class='sr-only'>Play</span>",
+ "</button>",
+ "<button type='button' data-player='pause'>",
+ "<svg><use xlink:href='#icon-pause'></use></svg>",
+ "<span class='sr-only'>Pause</span>",
+ "</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'>{seektime}</span> seconds</span>",
+ "</button>",
+ "<span class='player-time'>",
+ "<span class='sr-only'>Time</span>",
+ "<span class='player-duration'>00:00</span>",
+ "</span>",
+ "</span>",
+ "<span class='player-controls-sound'>",
+ "<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
+ "<label id='mute{id}' for='mute{id}'>",
+ "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
+ "<svg><use xlink:href='#icon-sound'></use></svg>",
+ "<span class='sr-only'>Mute</span>",
+ "</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}'>",
+ "<svg><use xlink:href='#icon-bubble'></use></svg>",
+ "<span class='sr-only'>Captions</span>",
+ "</label>",
+ "<button type='button' data-player='fullscreen'>",
+ "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-collapse'></use></svg>",
+ "<svg><use xlink:href='#icon-expand'></use></svg>",
+ "<span class='sr-only'>Toggle fullscreen</span>",
+ "</button>",
+ "</span>",
+ "</div>"].join("\n");
+ })()
};
// Debugging
@@ -489,11 +548,11 @@
// Setup aria attributes
function _setupAria() {
- var label = player.buttons.play.innerText;
+ var label = player.buttons.play.innerText || "Play";
// 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;
+ label += ", " + config.title;
}
player.buttons.play.setAttribute("aria-label", label);
@@ -974,8 +1033,9 @@
// Fast forward
_on(player.buttons.forward, "click", _forward);
- // Get the HTML5 range input element and append audio volume adjustment on change
- _on(player.volume, "change", function() {
+ // Get the HTML5 range input element and append audio volume adjustment on change/input
+ // IE10 doesn't support the "input" event so they have to wait for change
+ _on(player.volume, "change input", function() {
_setVolume(this.value);
});