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

Bug fixes and improvements

Browse Source
This commit is contained in:
Sam Potts
2015-03-04 08:08:38 +11:00
parent 9e65b67bc1
commit 4d483bf66c
10 changed files with 167 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/js/plyr.js
View File

@ -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);
});