Hold-to-Speed-Up Shortcut for Video Playback (YouTube-style)

Hi Laracasts team 👋

First off, thank you for the amazing content and platform.

I wanted to suggest a small but highly impactful improvement to the video player experience:
a “hold-to-speed-up” shortcut, similar to how YouTube temporarily increases playback speed while holding a key.

Use Case

There are a few common scenarios where this would be extremely useful:

When reviewing content I’ve already watched
When a section feels slower but I still want to follow along
When searching for a specific explanation without skipping context
When consuming all content but at a variable pace depending on relevance

Currently, while playback speed controls exist, switching speeds manually is slower and interrupts the flow.

Using seek forward/backward also isn’t ideal because:

It’s easy to miss important context
It often requires rewinding and rewatching unwanted parts

Suggested Behavior

Hold a key (e.g. Space, Shift, or configurable)
→ temporarily increase playback speed (e.g. 2x)
Release the key
→ return to normal playback speed

This would allow quick, fluid control over pacing without losing context.

Note

I may have missed this feature if it already exists — apologies if that’s the case! I wasn’t able to find any shortcut or setting for this behavior.

I believe this would significantly improve the learning experience, especially for users who frequently review or skim content.

Thanks again 🙌

LaryAI

1 month ago

Level 58

Absolutely, this is a great idea and can be accomplished with a bit of JavaScript by leveraging the keydown and keyup events on the desired key. Here’s how you can implement a hold-to-speed-up shortcut on any HTML5 video element—similar to YouTube’s "hold Shift" for 2x playback speed.

Below is a simple solution you can adapt for your video component. The example uses the Shift key, but you can change it to another key if you want.

// Select your video player, e.g. <video id="laracasts-player" ...>
const video = document.getElementById('laracasts-player');

let heldKey = false;
const NORMAL_SPEED = 1;
const SPEED_UP = 2; // Change this to your desired fast-forward rate
const SPEED_KEY = 'Shift'; // Or use ' ' (space), 'Control', etc.

// Listen for holding down and releasing the key
window.addEventListener('keydown', (e) => {
    // Prevent repeating action if key is held
    if (!heldKey && e.key === SPEED_KEY) {
        heldKey = true;
        video.playbackRate = SPEED_UP;
    }
});

window.addEventListener('keyup', (e) => {
    if (heldKey && e.key === SPEED_KEY) {
        heldKey = false;
        video.playbackRate = NORMAL_SPEED;
    }
});

Key Points:

This works for all standard HTML5 video elements.
Change SPEED_KEY to any key you prefer (eg: 'Space', 'Control').
Adjust SPEED_UP to whatever rate you find most helpful (eg: 1.5, 2, etc).

UI Consideration:

You may want to add a small visual indicator to show when the speed-up mode is active.

Vue Example:
If you’re building your player with Vue, you could attach these handlers in a component’s mounted/beforeUnmount hooks to ensure proper clean up:

mounted() {
    this.keyDown = (e) => { /* ...same as above... */ };
    this.keyUp = (e) => { /* ...same as above... */ };
    window.addEventListener('keydown', this.keyDown);
    window.addEventListener('keyup', this.keyUp);
},
beforeUnmount() {
    window.removeEventListener('keydown', this.keyDown);
    window.removeEventListener('keyup', this.keyUp);
}

Summary:
This small addition greatly enhances the control and fluidity of consuming video content, as you suggested. 💪

Let me know if you need a drop-in Vue/React/Alpine-specific example!

Please or to participate in this conversation.