From a41208578552dca987ccd5c5ee166f3b0dcc84c5 Mon Sep 17 00:00:00 2001 From: Amo Wu Date: Wed, 31 Aug 2016 15:11:29 +0800 Subject: [PATCH 1/6] feat: add playback speed button --- src/js/plyr.js | 74 ++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 71 insertions(+), 3 deletions(-) diff --git a/src/js/plyr.js b/src/js/plyr.js index 9af0ad05..f880ee4f 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -39,6 +39,14 @@ volumeMin: 0, volumeMax: 10, volumeStep: 1, + defaultSpeed: 1.0, + currentSpeed: 1.0, + speeds: [ + 1.0, + 1.5, + 2.0, + 0.5 + ], duration: null, displayDuration: true, loadSprite: true, @@ -75,7 +83,8 @@ forward: '[data-plyr="fast-forward"]', mute: '[data-plyr="mute"]', captions: '[data-plyr="captions"]', - fullscreen: '[data-plyr="fullscreen"]' + fullscreen: '[data-plyr="fullscreen"]', + speedup: '[data-plyr="speed-up"]' }, volume: { input: '[data-plyr="volume"]', @@ -143,7 +152,8 @@ toggleMute: 'Toggle Mute', toggleCaptions: 'Toggle Captions', toggleFullscreen: 'Toggle Fullscreen', - frameTitle: 'Player for {title}' + frameTitle: 'Player for {title}', + speedup: 'Speed x{speed}' }, types: { embed: ['youtube', 'vimeo', 'soundcloud'], @@ -172,7 +182,8 @@ mute: null, volume: null, captions: null, - fullscreen: null + fullscreen: null, + speedup: null }, // 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', 'emptied'], @@ -802,6 +813,16 @@ ); } + // Speed-up button + if (_inArray(config.controls, 'speed-up')) { + html.push( + '' + ); + } + // Progress if (_inArray(config.controls, 'progress')) { // Create progress @@ -1270,6 +1291,9 @@ // Replace seek time instances html = _replaceAll(html, '{seektime}', config.seekTime); + // Replace seek time instances + html = _replaceAll(html, '{speed}', config.currentSpeed); + // Replace all id references with random numbers html = _replaceAll(html, '{id}', Math.floor(Math.random() * (10000))); @@ -1316,6 +1340,7 @@ plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind); plyr.buttons.forward = _getElement(config.selectors.buttons.forward); plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); + plyr.buttons.speedup = _getElement(config.selectors.buttons.speedup); // Inputs plyr.buttons.mute = _getElement(config.selectors.buttons.mute); @@ -1956,6 +1981,28 @@ _seek(plyr.media.currentTime + seekTime); } + // Speed-up + function _speedup(speed) { + if (!_is.number(speed)) { + var index = config.speeds.indexOf(config.currentSpeed); + if (index !== -1) { + var nextIndex = index + 1; + if (nextIndex >= config.speeds.length) { + nextIndex = 0; + } + speed = config.speeds[nextIndex]; + } else { + speed = config.defaultSpeed; + } + } + + config.currentSpeed = speed; + + plyr.media.playbackRate = speed; + + _updateSpeedupTooltip(speed); + } + // Seek to time // The input parameter can be an event or a number function _seek(input) { @@ -2523,6 +2570,24 @@ } } + // Update hover tooltip for playback speed changed + function _updateSpeedupTooltip(speed) { + if (!isNaN(speed)) { + speed = config.currentSpeed; + } + + var button = plyr.buttons.speedup; + var template = config.i18n.speedup; + + var elements= button.getElementsByClassName(config.classes.tooltip); + if (elements.length === 0){ + return; + } + + var tooltip = elements[0]; + tooltip.innerHTML = _replaceAll(template, '{speed}', speed); + } + // Show the player controls in fullscreen mode function _toggleControls(toggle) { // Don't hide if config says not to, it's audio, or not ready or loading @@ -2985,6 +3050,9 @@ // Fast forward _proxyListener(plyr.buttons.forward, 'click', config.listeners.forward, _forward); + // Speed-up + _proxyListener(plyr.buttons.speedup, 'click', config.listeners.speedup, _speedup); + // Seek _proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek); From f0ac542a7f313c472a869ea522ff3fbcc133ca70 Mon Sep 17 00:00:00 2001 From: Amo Wu Date: Wed, 31 Aug 2016 15:34:44 +0800 Subject: [PATCH 2/6] refactor: add localStorage supporting --- src/js/plyr.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/js/plyr.js b/src/js/plyr.js index f880ee4f..eb7b9f2d 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -2001,6 +2001,9 @@ plyr.media.playbackRate = speed; _updateSpeedupTooltip(speed); + + // Save speed to localStorage + _updateStorage({speed: speed}); } // Seek to time @@ -2570,6 +2573,16 @@ } } + // Set playback speed + function _setSpeedup(speed) { + // Load speed from storage or default value + if (_is.undefined(speed)) { + speed = plyr.storage.speed || config.defaultSpeed; + } + + _speedup(speed); + } + // Update hover tooltip for playback speed changed function _updateSpeedupTooltip(speed) { if (!isNaN(speed)) { @@ -3438,6 +3451,9 @@ _setVolume(); _updateVolume(); + // Set playback speed + _setSpeedup(); + // Reset time display _timeUpdate(); From c291e8c5d90710cf7c1afd6f6e50f41333dd67b4 Mon Sep 17 00:00:00 2001 From: Amo Wu Date: Wed, 31 Aug 2016 15:42:01 +0800 Subject: [PATCH 3/6] refactor: check config.speeds format --- src/js/plyr.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/js/plyr.js b/src/js/plyr.js index eb7b9f2d..a676f635 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1983,6 +1983,10 @@ // Speed-up function _speedup(speed) { + if (!_is.array(config.speeds)) { + _warn('Invalid speeds format'); + return; + } if (!_is.number(speed)) { var index = config.speeds.indexOf(config.currentSpeed); if (index !== -1) { From ea60fd0f4546891c011b3fb472ab42b841dce972 Mon Sep 17 00:00:00 2001 From: Amo Wu Date: Wed, 31 Aug 2016 17:18:44 +0800 Subject: [PATCH 4/6] docs: update readme --- readme.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index bb2c0881..b24e339f 100644 --- a/readme.md +++ b/readme.md @@ -244,7 +244,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke controls Array - ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'] + ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'] Toggle which control elements you would like to display when using the default controls html. If you specify a html option, this is redundant. The default value is to display everything. @@ -383,6 +383,12 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke — Two properties; enabled which toggles if local storage should be enabled (if the browser supports it). The default value is `true`. This enables storing user settings, currently it only stores volume but more will be added later. The second property key is the key used for the local storage. The default is plyr_volume until more settings are stored. + + speeds + Array + [1.0, 1.5, 2.0, 0.5] + Playback speed list. + From ac7e1ab2997c667fb578bd1a1a639e35275dcd77 Mon Sep 17 00:00:00 2001 From: Amo Wu Date: Mon, 5 Sep 2016 18:00:11 +0800 Subject: [PATCH 5/6] test: add `speed-up` button --- demo/src/js/main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/demo/src/js/main.js b/demo/src/js/main.js index 3337df88..80dab906 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -20,7 +20,8 @@ }, captions: { defaultActive: true - } + }, + controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'] }); plyr.loadSprite('dist/demo.svg'); From 78ec5b3322e082b609b5f038350d84d7027b2e92 Mon Sep 17 00:00:00 2001 From: Amo Wu Date: Mon, 5 Sep 2016 22:56:19 +0800 Subject: [PATCH 6/6] refactor: sorting speed --- src/js/plyr.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/plyr.js b/src/js/plyr.js index a676f635..9a437383 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -42,10 +42,10 @@ defaultSpeed: 1.0, currentSpeed: 1.0, speeds: [ + 0.5, 1.0, 1.5, - 2.0, - 0.5 + 2.0 ], duration: null, displayDuration: true,