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

Playback speed control settings

Browse Source
This commit is contained in:
Chrysa Papadopoulou 2017-01-31 17:21:33 +02:00
parent 7608615702
commit ea30ad9494
4 changed files with 42 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -6,3 +6,6 @@ aws.json
*.mp4 *.mp4
index-*.html index-*.html
notes.txt notes.txt
.idea
.DS_Store
npm-debug.log

2
demo/src/js/main.js
View File

@ -21,7 +21,7 @@
captions: { captions: {
defaultActive: true defaultActive: true
}, },
controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'] controls: ['play', 'speed-up', 'speed-down', 'progress', 'volume', 'captions', 'settings', 'fullscreen', 'fast-forward']
}); });
plyr.loadSprite('dist/demo.svg'); plyr.loadSprite('dist/demo.svg');

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

48
src/js/plyr.js
View File

@ -85,7 +85,8 @@
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"]'
}, },
volume: { volume: {
input: '[data-plyr="volume"]', input: '[data-plyr="volume"]',
@ -987,7 +988,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">',
@ -1013,7 +1014,7 @@
'</li>', '</li>',
'</ul>', '</ul>',
'</div>', '</div>',
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">', '<form class="plyr__menu__secondary" id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">',
'<ul>', '<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">',
@ -1021,19 +1022,31 @@
'</button>', '</button>',
'</li>', '</li>',
'<li>', '<li>',
'<button type="button" class="plyr__control">2&times;</button>', '<label class="plyr__control">',
'<input type="radio" name="speed" data-plyr="speed" value="2.0" '+ (config.currentSpeed === 2 ? 'checked' : '') +'>',
'2.0&times;',
'</label>',
'</li>', '</li>',
'<li>', '<li>',
'<button type="button" class="plyr__control">1.5&times;</button>', '<label class="plyr__control">',
'<input type="radio" name="speed" data-plyr="speed" value="1.5" '+ (config.currentSpeed === 1.5 ? 'checked' : '') +'>',
'1.5&times;',
'</label>',
'</li>', '</li>',
'<li>', '<li>',
'<button type="button" class="plyr__control">1&times;</button>', '<label class="plyr__control">',
'<input type="radio" name="speed" data-plyr="speed" value="1.0" '+ (config.currentSpeed === 1 ? 'checked' : '') +'>',
'1.0&times;',
'</label>',
'</li>', '</li>',
'<li>', '<li>',
'<button type="button" class="plyr__control">0.5&times;</button>', '<label class="plyr__control">',
'<input type="radio" name="speed" data-plyr="speed" value="0.5" '+ (config.currentSpeed === 0.5 ? 'checked' : '') +'>',
'0.5&times;',
'</label>',
'</li>', '</li>',
'</ul>', '</ul>',
'</div>', '</form>',
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">', '<div class="plyr__menu__secondary" id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
'<ul>', '<ul>',
'<li role="tab">', '<li role="tab">',
@ -1643,8 +1656,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', '') + '&times;'); html = replaceAll(html, '{speed}', getSpeedDisplayValue());
// Replace current captions language // Replace current captions language
html = replaceAll(html, '{lang}', 'English'); html = replaceAll(html, '{lang}', 'English');
@ -1682,6 +1695,10 @@
} }
} }
function getSpeedDisplayValue() {
return config.currentSpeed.toFixed(1).toString().replace('.0', '') + '&times;'
}
// Find the UI controls and store references // Find the UI controls and store references
function findElements() { function findElements() {
try { try {
@ -1697,7 +1714,8 @@
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)
}; };
// Inputs // Inputs
@ -2427,6 +2445,9 @@
updateStorage({ updateStorage({
speed: speed speed: speed
}); });
//Update current value of menu
document.querySelector('[data-menu="speed"]').innerHTML = getSpeedDisplayValue();
} }
// Rewind // Rewind
@ -3537,7 +3558,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);