Add keyboard shortcuts to mute, set playback rate to slowest speed, and set playback rate to fastest speed

pull/262/head
ElementalAlchemist 3 years ago committed by Mike Lang
parent d635a7941c
commit 1ff1bcf0ab

@ -92,6 +92,7 @@
<ul>
<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
<li>K or Space: Toggle pause</li>
<li>M: Toggle mute</li>
<li>J: Back 10 seconds</li>
<li>L: Forward 10 seconds</li>
<li>Left arrow: Back 5 seconds</li>
@ -102,6 +103,8 @@
<li>Period (.): Forward 1 frame</li>
<li>Equals (=): Increase playback speed one step</li>
<li>Hyphen (-): Decrease playback speed one step</li>
<li>Shift+=: Maximum playback speed</li>
<li>Shift+-: Minimum playback speed</li>
<li>Backspace: Reset playback speed to 1x</li>
<li>
Left bracket ([): Set start point for active range (indicated by arrow) to active video

@ -104,6 +104,7 @@
<ul>
<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
<li>K or Space: Toggle pause</li>
<li>M: Toggle mute</li>
<li>J: Back 10 seconds</li>
<li>L: Forward 10 seconds</li>
<li>Left arrow: Back 5 seconds</li>
@ -114,6 +115,8 @@
<li>Period (.): Forward 1 frame</li>
<li>Equals (=): Increase playback speed one step</li>
<li>Hyphen (-): Decrease playback speed one step</li>
<li>Shift+=: Maximum playback speed</li>
<li>Shift+-: Minimum playback speed</li>
<li>Backspace: Reset playback speed to 1x</li>
</ul>
</div>

@ -9,9 +9,7 @@ function moveSpeed(amount) {
if (currentIndex < 0 || currentIndex >= PLAYBACK_RATES.length) {
return; // We've reached/exceeded the edge
}
videoElement.playbackRate = PLAYBACK_RATES[currentIndex];
const playbackSelector = document.getElementById("video-controls-playback-speed");
playbackSelector.value = videoElement.playbackRate;
setSpeed(videoElement, PLAYBACK_RATES[currentIndex]);
}
function increaseSpeed() {
@ -22,6 +20,12 @@ function decreaseSpeed() {
moveSpeed(-1);
}
function setSpeed(videoElement, speed) {
videoElement.playbackRate = speed;
const playbackSelector = document.getElementById("video-controls-playback-speed");
playbackSelector.value = speed;
}
document.addEventListener("keypress", (event) => {
if (event.target.nodeName === "INPUT" || event.target.nodeName === "TEXTAREA") {
return;
@ -79,6 +83,9 @@ document.addEventListener("keypress", (event) => {
case "L":
videoElement.currentTime += 1;
break;
case "m":
videoElement.muted = !videoElement.muted;
break;
case ",":
videoElement.currentTime -= 1 / VIDEO_FRAMES_PER_SECOND;
break;
@ -88,9 +95,15 @@ document.addEventListener("keypress", (event) => {
case "=":
increaseSpeed();
break;
case "+":
setSpeed(videoElement, PLAYBACK_RATES[PLAYBACK_RATES.length - 1]);
break;
case "-":
decreaseSpeed();
break;
case "_":
setSpeed(videoElement, PLAYBACK_RATES[0]);
break;
case "[":
if (typeof setCurrentRangeStartToVideoTime === "function") {
setCurrentRangeStartToVideoTime();

Loading…
Cancel
Save