Merge branch 'develop' of https://github.com/Selz/plyr into develop
# Conflicts: # dist/plyr.js # src/js/plyr.js
This commit is contained in:
commit
9c599884a8
3
.gitignore
vendored
3
.gitignore
vendored
@ -6,3 +6,6 @@ aws.json
|
|||||||
*.mp4
|
*.mp4
|
||||||
index-*.html
|
index-*.html
|
||||||
notes.txt
|
notes.txt
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
npm-debug.log
|
4
dist/plyr.js
vendored
4
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
@ -257,7 +257,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
|
|||||||
<tr>
|
<tr>
|
||||||
<td><code>controls</code></td>
|
<td><code>controls</code></td>
|
||||||
<td>Array</td>
|
<td>Array</td>
|
||||||
<td><code>['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen']</code></td>
|
<td><code>['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen']</code></td>
|
||||||
<td>Toggle which control elements you would like to display when using the default controls html. If you specify a <code>html</code> option, this is redundant. The default value is to display everything.</td>
|
<td>Toggle which control elements you would like to display when using the default controls html. If you specify a <code>html</code> option, this is redundant. The default value is to display everything.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@ -402,6 +402,12 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
|
|||||||
<td>[1.0, 1.5, 2.0, 0.5]</td>
|
<td>[1.0, 1.5, 2.0, 0.5]</td>
|
||||||
<td>Playback speed list.</td>
|
<td>Playback speed list.</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>loops</code></td>
|
||||||
|
<td>Array</td>
|
||||||
|
<td>[Loop All, Loop in, Loop out, No Loop]</td>
|
||||||
|
<td>Playback loop list.</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
171
src/js/plyr.js
171
src/js/plyr.js
@ -38,13 +38,15 @@
|
|||||||
debug: false,
|
debug: false,
|
||||||
autoplay: false,
|
autoplay: false,
|
||||||
loop: false,
|
loop: false,
|
||||||
|
loopin: 0,
|
||||||
|
loopout: null,
|
||||||
seekTime: 10,
|
seekTime: 10,
|
||||||
volume: 10,
|
volume: 10,
|
||||||
volumeMin: 0,
|
volumeMin: 0,
|
||||||
volumeMax: 10,
|
volumeMax: 10,
|
||||||
volumeStep: 1,
|
volumeStep: 1,
|
||||||
defaultSpeed: 1.0,
|
defaultSpeed: 1.0,
|
||||||
currentSpeed: 1.0,
|
currentSpeed: 1,
|
||||||
speeds: [0.5, 1.0, 1.5, 2.0],
|
speeds: [0.5, 1.0, 1.5, 2.0],
|
||||||
duration: null,
|
duration: null,
|
||||||
displayDuration: true,
|
displayDuration: true,
|
||||||
@ -85,7 +87,9 @@
|
|||||||
fullscreen: '[data-plyr="fullscreen"]',
|
fullscreen: '[data-plyr="fullscreen"]',
|
||||||
settings: '[data-plyr="settings"]',
|
settings: '[data-plyr="settings"]',
|
||||||
pip: '[data-plyr="pip"]',
|
pip: '[data-plyr="pip"]',
|
||||||
airplay: '[data-plyr="airplay"]'
|
airplay: '[data-plyr="airplay"]',
|
||||||
|
speed: '[data-plyr="speed"]',
|
||||||
|
loop: '[data-plyr="loop"]'
|
||||||
},
|
},
|
||||||
volume: {
|
volume: {
|
||||||
input: '[data-plyr="volume"]',
|
input: '[data-plyr="volume"]',
|
||||||
@ -165,7 +169,12 @@
|
|||||||
captions: 'Captions',
|
captions: 'Captions',
|
||||||
settings: 'Settings',
|
settings: 'Settings',
|
||||||
speed: 'Speed',
|
speed: 'Speed',
|
||||||
quality: 'Quality'
|
quality: 'Quality',
|
||||||
|
loop: 'Loop',
|
||||||
|
loopin: 'Loop in',
|
||||||
|
loopout: 'Loop out',
|
||||||
|
loopall: 'Loop all',
|
||||||
|
loopclear: 'No Loop',
|
||||||
},
|
},
|
||||||
types: {
|
types: {
|
||||||
embed: ['youtube', 'vimeo', 'soundcloud'],
|
embed: ['youtube', 'vimeo', 'soundcloud'],
|
||||||
@ -195,7 +204,8 @@
|
|||||||
volume: null,
|
volume: null,
|
||||||
captions: null,
|
captions: null,
|
||||||
fullscreen: null,
|
fullscreen: null,
|
||||||
speed: null
|
speed: null,
|
||||||
|
loop: null
|
||||||
},
|
},
|
||||||
// Events to watch on HTML5 media elements
|
// Events to watch on HTML5 media elements
|
||||||
events: ['ready', 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'seeked', 'emptied'],
|
events: ['ready', 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'seeked', 'emptied'],
|
||||||
@ -977,7 +987,7 @@
|
|||||||
'<svg><use xlink:href="' + iconPath + '-settings" /></svg>',
|
'<svg><use xlink:href="' + iconPath + '-settings" /></svg>',
|
||||||
'<span class="plyr__sr-only">' + config.i18n.settings + '</span>',
|
'<span class="plyr__sr-only">' + config.i18n.settings + '</span>',
|
||||||
'</button>',
|
'</button>',
|
||||||
'<div class="plyr__menu__container" id="plyr-settings-{id}" aria-hidden="true" aria-labelled-by="plyr-settings-toggle-{id}" role="tablist" tabindex="-1">',
|
'<form class="plyr__menu__container" id="plyr-settings-{id}" aria-hidden="true" aria-labelled-by="plyr-settings-toggle-{id}" role="tablist" tabindex="-1">',
|
||||||
'<div>',
|
'<div>',
|
||||||
'<div id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
|
'<div id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
|
||||||
'<ul>',
|
'<ul>',
|
||||||
@ -990,7 +1000,7 @@
|
|||||||
'<li role="tab">',
|
'<li role="tab">',
|
||||||
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">',
|
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">',
|
||||||
config.i18n.speed +
|
config.i18n.speed +
|
||||||
'<span class="plyr__menu__value">{speed}</span>',
|
'<span class="plyr__menu__value" data-menu="speed">{speed}</span>',
|
||||||
'</button>',
|
'</button>',
|
||||||
'</li>',
|
'</li>',
|
||||||
'<li role="tab">',
|
'<li role="tab">',
|
||||||
@ -999,6 +1009,12 @@
|
|||||||
'<span class="plyr__menu__value">Auto</span>',
|
'<span class="plyr__menu__value">Auto</span>',
|
||||||
'</button>',
|
'</button>',
|
||||||
'</li>',
|
'</li>',
|
||||||
|
'<li role="tab">',
|
||||||
|
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-loop-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-loop" aria-expanded="false">',
|
||||||
|
config.i18n.loop +
|
||||||
|
'<span class="plyr__menu__value" data-menu="loop"></span>',
|
||||||
|
'</button>',
|
||||||
|
'</li>',
|
||||||
'</ul>',
|
'</ul>',
|
||||||
'</div>',
|
'</div>',
|
||||||
'<div id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">',
|
'<div id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">',
|
||||||
@ -1024,21 +1040,33 @@
|
|||||||
'</button>',
|
'</button>',
|
||||||
'</li>',
|
'</li>',
|
||||||
'<li>',
|
'<li>',
|
||||||
'<button type="button" class="plyr__control">2×</button>',
|
'<label class="plyr__control">',
|
||||||
|
'<input type="radio" name="speed" data-plyr="speed" value="2.0" '+ (config.currentSpeed === 2 ? 'checked' : '') +'>',
|
||||||
|
'2.0×',
|
||||||
|
'</label>',
|
||||||
'</li>',
|
'</li>',
|
||||||
'<li>',
|
'<li>',
|
||||||
'<button type="button" class="plyr__control">1.5×</button>',
|
'<label class="plyr__control">',
|
||||||
|
'<input type="radio" name="speed" data-plyr="speed" value="1.5" '+ (config.currentSpeed === 1.5 ? 'checked' : '') +'>',
|
||||||
|
'1.5×',
|
||||||
|
'</label>',
|
||||||
'</li>',
|
'</li>',
|
||||||
'<li>',
|
'<li>',
|
||||||
'<button type="button" class="plyr__control">1×</button>',
|
'<label class="plyr__control">',
|
||||||
|
'<input type="radio" name="speed" data-plyr="speed" value="1.0" '+ (config.currentSpeed === 1 ? 'checked' : '') +'>',
|
||||||
|
'1.0×',
|
||||||
|
'</label>',
|
||||||
'</li>',
|
'</li>',
|
||||||
'<li>',
|
'<li>',
|
||||||
'<button type="button" class="plyr__control">0.5×</button>',
|
'<label class="plyr__control">',
|
||||||
|
'<input type="radio" name="speed" data-plyr="speed" value="0.5" '+ (config.currentSpeed === 0.5 ? 'checked' : '') +'>',
|
||||||
|
'0.5×',
|
||||||
|
'</label>',
|
||||||
'</li>',
|
'</li>',
|
||||||
'</ul>',
|
'</ul>',
|
||||||
'</div>',
|
'</div>',
|
||||||
'<div id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
|
'<div id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
|
||||||
'<ul class="js-plyr__menu__list--quality">',
|
'<ul>',
|
||||||
'<li role="tab">',
|
'<li role="tab">',
|
||||||
'<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
|
'<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
|
||||||
config.i18n.quality,
|
config.i18n.quality,
|
||||||
@ -1094,8 +1122,40 @@
|
|||||||
'</li>',
|
'</li>',
|
||||||
'</ul>',
|
'</ul>',
|
||||||
'</div>',
|
'</div>',
|
||||||
|
'<div id="plyr-settings-{id}-loop" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-loop-toggle" role="tabpanel" tabindex="-1">',
|
||||||
|
'<ul>',
|
||||||
|
'<li role="tab">',
|
||||||
|
'<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
|
||||||
|
config.i18n.loop,
|
||||||
|
'</button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button" class="plyr__control" data-plyr="loop" data-loop__type="loopall">',
|
||||||
|
config.i18n.loopall,
|
||||||
|
'<span data-loop__value="loopall"></span>',
|
||||||
|
'</button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button" class="plyr__control" data-plyr="loop" data-loop__type="loopin">',
|
||||||
|
config.i18n.loopin + ': ',
|
||||||
|
'<span data-loop__value="loopin"></span>',
|
||||||
|
'</button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button" class="plyr__control" data-plyr="loop" data-loop__type="loopout">',
|
||||||
|
config.i18n.loopout + ': ',
|
||||||
|
'<span data-loop__value="loopout"></span>',
|
||||||
|
'</button>',
|
||||||
|
'</li>',
|
||||||
|
'<li>',
|
||||||
|
'<button type="button" class="plyr__control" data-plyr="loop" data-loop__type="loopclear">',
|
||||||
|
config.i18n.loopclear,
|
||||||
|
'</button>',
|
||||||
|
'</li>',
|
||||||
|
'</ul>',
|
||||||
|
'</div>',
|
||||||
'</div>',
|
'</div>',
|
||||||
'</div>',
|
'</form>',
|
||||||
'</div>'
|
'</div>'
|
||||||
);
|
);
|
||||||
/* beautify ignore:end */
|
/* beautify ignore:end */
|
||||||
@ -1646,8 +1706,8 @@
|
|||||||
// Replace seek time instances
|
// Replace seek time instances
|
||||||
html = replaceAll(html, '{seektime}', config.seekTime);
|
html = replaceAll(html, '{seektime}', config.seekTime);
|
||||||
|
|
||||||
// Replace seek time instances
|
// Replace speed time instances
|
||||||
html = replaceAll(html, '{speed}', config.currentSpeed.toFixed(1).toString().replace('.0', '') + '×');
|
html = replaceAll(html, '{speed}', getSpeedDisplayValue());
|
||||||
|
|
||||||
// Replace current captions language
|
// Replace current captions language
|
||||||
html = replaceAll(html, '{lang}', 'English');
|
html = replaceAll(html, '{lang}', 'English');
|
||||||
@ -1685,6 +1745,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getSpeedDisplayValue() {
|
||||||
|
return config.currentSpeed.toFixed(1).toString().replace('.0', '') + '×'
|
||||||
|
}
|
||||||
|
|
||||||
// Find the UI controls and store references
|
// Find the UI controls and store references
|
||||||
function findElements() {
|
function findElements() {
|
||||||
try {
|
try {
|
||||||
@ -1700,7 +1764,9 @@
|
|||||||
forward: getElement(config.selectors.buttons.forward),
|
forward: getElement(config.selectors.buttons.forward),
|
||||||
fullscreen: getElement(config.selectors.buttons.fullscreen),
|
fullscreen: getElement(config.selectors.buttons.fullscreen),
|
||||||
settings: getElement(config.selectors.buttons.settings),
|
settings: getElement(config.selectors.buttons.settings),
|
||||||
pip: getElement(config.selectors.buttons.pip)
|
pip: getElement(config.selectors.buttons.pip),
|
||||||
|
speed: document.querySelectorAll(config.selectors.buttons.speed),
|
||||||
|
loop: document.querySelectorAll(config.selectors.buttons.loop)
|
||||||
};
|
};
|
||||||
|
|
||||||
// Inputs
|
// Inputs
|
||||||
@ -2395,6 +2461,49 @@
|
|||||||
return toggle;
|
return toggle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Toggle loop
|
||||||
|
function toggleLoop(toggle) {
|
||||||
|
if (['loopin', 'loopout', 'loopall'].indexOf(toggle) === -1) {
|
||||||
|
toggle = 'loopclear';
|
||||||
|
}
|
||||||
|
|
||||||
|
var currentTime = Number(plyr.media.currentTime);
|
||||||
|
|
||||||
|
switch (toggle) {
|
||||||
|
case 'loopin':
|
||||||
|
if (config.loopout && config.loopout <= currentTime) {
|
||||||
|
config.loopout = null;
|
||||||
|
}
|
||||||
|
config.loopin = currentTime;
|
||||||
|
break;
|
||||||
|
case 'loopout':
|
||||||
|
if (config.loopin >= currentTime) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
config.loopout = currentTime;
|
||||||
|
break;
|
||||||
|
case 'loopall':
|
||||||
|
config.loopin = 0;
|
||||||
|
config.loopout = plyr.media.duration - 2;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
config.loopin = 0;
|
||||||
|
config.loopout = null;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
//check if can loop
|
||||||
|
config.loop = is.number(config.loopin) && is.number(config.loopout);
|
||||||
|
var loopin = updateTimeDisplay(config.loopin, document.querySelector('[data-loop__value="loopin"]'));
|
||||||
|
var loopout = is.number(config.loopout) ? updateTimeDisplay(config.loopout + 2, document.querySelector('[data-loop__value="loopout"]')) : document.querySelector('[data-loop__value="loopout"]').innerHTML = '';
|
||||||
|
if (config.loop) {
|
||||||
|
document.querySelector('[data-menu="loop"]').innerHTML = loopin + ' - ' + loopout;
|
||||||
|
} else {
|
||||||
|
document.querySelector('[data-menu="loop"]').innerHTML = config.i18n.loopclear;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
// Speed-up
|
// Speed-up
|
||||||
function setSpeed(speed) {
|
function setSpeed(speed) {
|
||||||
// Load speed from storage or default value
|
// Load speed from storage or default value
|
||||||
@ -2430,6 +2539,9 @@
|
|||||||
updateStorage({
|
updateStorage({
|
||||||
speed: speed
|
speed: speed
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//Update current value of menu
|
||||||
|
document.querySelector('[data-menu="speed"]').innerHTML = getSpeedDisplayValue();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Rewind
|
// Rewind
|
||||||
@ -2867,7 +2979,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set values
|
if (is.number(config.loopin) && is.number(config.loopout) && plyr.media.currentTime >= config.loopout) {
|
||||||
|
seek(config.loopin);
|
||||||
|
}
|
||||||
|
|
||||||
setProgress(progress, value);
|
setProgress(progress, value);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2927,8 +3042,10 @@
|
|||||||
plyr.secs = ('0' + plyr.secs).slice(-2);
|
plyr.secs = ('0' + plyr.secs).slice(-2);
|
||||||
plyr.mins = ('0' + plyr.mins).slice(-2);
|
plyr.mins = ('0' + plyr.mins).slice(-2);
|
||||||
|
|
||||||
|
var txt = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs;
|
||||||
// Render
|
// Render
|
||||||
element.innerHTML = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs;
|
element.innerHTML = txt;
|
||||||
|
return txt;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show the duration on metadataloaded
|
// Show the duration on metadataloaded
|
||||||
@ -3540,7 +3657,10 @@
|
|||||||
proxy(plyr.buttons.forward, 'click', config.listeners.forward, forward);
|
proxy(plyr.buttons.forward, 'click', config.listeners.forward, forward);
|
||||||
|
|
||||||
// Speed-up
|
// Speed-up
|
||||||
proxy(plyr.buttons.speed, 'click', config.listeners.speed, setSpeed);
|
proxy(plyr.buttons.speed, 'click', config.listeners.speed, function() {
|
||||||
|
var speedValue = document.querySelector('[data-plyr="speed"]:checked').value;
|
||||||
|
setSpeed(Number(speedValue));
|
||||||
|
});
|
||||||
|
|
||||||
// Seek
|
// Seek
|
||||||
proxy(plyr.buttons.seek, inputEvent, config.listeners.seek, seek);
|
proxy(plyr.buttons.seek, inputEvent, config.listeners.seek, seek);
|
||||||
@ -3556,6 +3676,14 @@
|
|||||||
// Fullscreen
|
// Fullscreen
|
||||||
proxy(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, toggleFullscreen);
|
proxy(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, toggleFullscreen);
|
||||||
|
|
||||||
|
// Loop
|
||||||
|
proxy(plyr.buttons.loop, 'click', config.listeners.loop, function(event) {
|
||||||
|
var loopValue = event.target.getAttribute('data-loop__value') || event.target.getAttribute('data-loop__type');
|
||||||
|
if (['loopin', 'loopout', 'loopall', 'loopclear'].indexOf(loopValue) > -1) {
|
||||||
|
toggleLoop(loopValue);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Handle user exiting fullscreen by escaping etc
|
// Handle user exiting fullscreen by escaping etc
|
||||||
if (support.fullscreen) {
|
if (support.fullscreen) {
|
||||||
on(document, fullscreen.eventType, toggleFullscreen);
|
on(document, fullscreen.eventType, toggleFullscreen);
|
||||||
@ -3998,6 +4126,9 @@
|
|||||||
// Set playback speed
|
// Set playback speed
|
||||||
setSpeed();
|
setSpeed();
|
||||||
|
|
||||||
|
// Set loop
|
||||||
|
toggleLoop();
|
||||||
|
|
||||||
// Reset time display
|
// Reset time display
|
||||||
timeUpdate();
|
timeUpdate();
|
||||||
|
|
||||||
@ -4040,12 +4171,16 @@
|
|||||||
isPaused: function() {
|
isPaused: function() {
|
||||||
return plyr.media.paused;
|
return plyr.media.paused;
|
||||||
},
|
},
|
||||||
|
isLooping: function() {
|
||||||
|
return config.loopin && config.loopout;
|
||||||
|
},
|
||||||
on: function(event, callback) {
|
on: function(event, callback) {
|
||||||
on(plyr.container, event, callback);
|
on(plyr.container, event, callback);
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
play: play,
|
play: play,
|
||||||
pause: pause,
|
pause: pause,
|
||||||
|
loop: toggleLoop,
|
||||||
stop: function() {
|
stop: function() {
|
||||||
pause();
|
pause();
|
||||||
seek();
|
seek();
|
||||||
|
Loading…
x
Reference in New Issue
Block a user