diff options
Diffstat (limited to 'src/js/plyr.js')
-rw-r--r-- | src/js/plyr.js | 72 |
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); }); |