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

iconUrl option

Browse Source
This commit is contained in:
Sam 2016-04-28 00:14:20 +10:00
parent 2385291886
commit d3028b9a03
2 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

28
src/js/plyr.js
View File

@ -39,6 +39,7 @@
duration: null, duration: null,
displayDuration: true, displayDuration: true,
iconPrefix: 'icon', iconPrefix: 'icon',
iconUrl: '',
clickToPlay: true, clickToPlay: true,
hideControls: true, hideControls: true,
tooltips: { tooltips: {
@ -644,13 +645,14 @@
// Build the default HTML // Build the default HTML
function _buildControls() { function _buildControls() {
// Create html array // Create html array
var html = []; var html = [],
iconPath = config.iconUrl + '#' + config.iconPrefix;
// Larger overlaid play button // Larger overlaid play button
if (_inArray(config.controls, 'play-large')) { if (_inArray(config.controls, 'play-large')) {
html.push( html.push(
'<button type="button" data-plyr="play" class="plyr__play-large">', '<button type="button" data-plyr="play" class="plyr__play-large">',
'<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>', '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.play + '</span>', '<span class="plyr__sr-only">' + config.i18n.play + '</span>',
'</button>' '</button>'
); );
@ -662,7 +664,7 @@
if (_inArray(config.controls, 'restart')) { if (_inArray(config.controls, 'restart')) {
html.push( html.push(
'<button type="button" data-plyr="restart">', '<button type="button" data-plyr="restart">',
'<svg><use xlink:href="#' + config.iconPrefix + '-restart" /></svg>', '<svg><use xlink:href="' + iconPath + '-restart" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.restart + '</span>', '<span class="plyr__sr-only">' + config.i18n.restart + '</span>',
'</button>' '</button>'
); );
@ -672,7 +674,7 @@
if (_inArray(config.controls, 'rewind')) { if (_inArray(config.controls, 'rewind')) {
html.push( html.push(
'<button type="button" data-plyr="rewind">', '<button type="button" data-plyr="rewind">',
'<svg><use xlink:href="#' + config.iconPrefix + '-rewind" /></svg>', '<svg><use xlink:href="' + iconPath + '-rewind" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.rewind + '</span>', '<span class="plyr__sr-only">' + config.i18n.rewind + '</span>',
'</button>' '</button>'
); );
@ -683,11 +685,11 @@
if (_inArray(config.controls, 'play')) { if (_inArray(config.controls, 'play')) {
html.push( html.push(
'<button type="button" data-plyr="play">', '<button type="button" data-plyr="play">',
'<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>', '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.play + '</span>', '<span class="plyr__sr-only">' + config.i18n.play + '</span>',
'</button>', '</button>',
'<button type="button" data-plyr="pause">', '<button type="button" data-plyr="pause">',
'<svg><use xlink:href="#' + config.iconPrefix + '-pause" /></svg>', '<svg><use xlink:href="' + iconPath + '-pause" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.pause + '</span>', '<span class="plyr__sr-only">' + config.i18n.pause + '</span>',
'</button>' '</button>'
); );
@ -697,7 +699,7 @@
if (_inArray(config.controls, 'fast-forward')) { if (_inArray(config.controls, 'fast-forward')) {
html.push( html.push(
'<button type="button" data-plyr="fast-forward">', '<button type="button" data-plyr="fast-forward">',
'<svg><use xlink:href="#' + config.iconPrefix + '-fast-forward" /></svg>', '<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.forward + '</span>', '<span class="plyr__sr-only">' + config.i18n.forward + '</span>',
'</button>' '</button>'
); );
@ -747,8 +749,8 @@
if (_inArray(config.controls, 'mute')) { if (_inArray(config.controls, 'mute')) {
html.push( html.push(
'<button type="button" data-plyr="mute">', '<button type="button" data-plyr="mute">',
'<svg class="icon--muted"><use xlink:href="#' + config.iconPrefix + '-muted" /></svg>', '<svg class="icon--muted"><use xlink:href="' + iconPath + '-muted" /></svg>',
'<svg><use xlink:href="#' + config.iconPrefix + '-volume" /></svg>', '<svg><use xlink:href="' + iconPath + '-volume" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>', '<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>',
'</button>' '</button>'
); );
@ -769,8 +771,8 @@
if (_inArray(config.controls, 'captions')) { if (_inArray(config.controls, 'captions')) {
html.push( html.push(
'<button type="button" data-plyr="captions">', '<button type="button" data-plyr="captions">',
'<svg class="icon--captions-on"><use xlink:href="#' + config.iconPrefix + '-captions-on" /></svg>', '<svg class="icon--captions-on"><use xlink:href="' + iconPath + '-captions-on" /></svg>',
'<svg><use xlink:href="#' + config.iconPrefix + '-captions-off" /></svg>', '<svg><use xlink:href="' + iconPath+ '-captions-off" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>', '<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>',
'</button>' '</button>'
); );
@ -780,8 +782,8 @@
if (_inArray(config.controls, 'fullscreen')) { if (_inArray(config.controls, 'fullscreen')) {
html.push( html.push(
'<button type="button" data-plyr="fullscreen">', '<button type="button" data-plyr="fullscreen">',
'<svg class="icon--exit-fullscreen"><use xlink:href="#' + config.iconPrefix + '-exit-fullscreen" /></svg>', '<svg class="icon--exit-fullscreen"><use xlink:href="' + iconPath + '-exit-fullscreen" /></svg>',
'<svg><use xlink:href="#' + config.iconPrefix + '-enter-fullscreen" /></svg>', '<svg><use xlink:href="' + iconPath + '-enter-fullscreen" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>', '<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>',
'</button>' '</button>'
); );