kevinbui's avatar

Save My Video Speed Preferences

Hi @JeffreyWay.

I typically watch the videos at 1.2x or 1.5x speed. But any time I move on to a new video, my video speed is back to 1.0x.

Can we preserve the preferences for our video speeds? We had this feature before, and have been losing it for quite while.

Cheers,

0 likes
1 reply
LaryAI's avatar
Level 58

Certainly! To save and persist your video speed preference across different videos, you can use the browser's localStorage to remember the preferred playback speed. You'll need to update the video player's speed based on the stored preference when each video loads, and also update the stored value whenever the speed changes.

Here’s a JavaScript-based solution you can use (assuming you have access to modify the relevant player JS):

// Function to apply the stored speed
function applySavedPlaybackRate(video) {
    const savedSpeed = localStorage.getItem('preferredPlaybackRate') || 1.0;
    video.playbackRate = savedSpeed;
}

// Function to save new speed whenever user changes it
function handleRateChange(event) {
    const newRate = event.target.playbackRate;
    localStorage.setItem('preferredPlaybackRate', newRate);
}

// Attach listeners to all video players on the page
document.addEventListener('DOMContentLoaded', function() {
    const videos = document.querySelectorAll('video');
    videos.forEach(video => {
        applySavedPlaybackRate(video);

        // Add an event listener to store new speed
        video.addEventListener('ratechange', handleRateChange);
    });
});

How it works:

  1. When the page loads, it finds all <video> tags and sets their playback speed from what’s saved in localStorage.
  2. When you change the speed during playback, it stores your new preference.
  3. The next time you load a video, the previously saved speed is automatically applied.

Note:
This snippet is generic. Depending on the video player Laracasts uses (for example, Plyr, Video.js, or custom), the selectors or player API methods may differ. But the above covers the browser-native <video> element, which works in many cases.


To Laracasts:
If you’re a Laracasts developer, you can use an approach like this to re-enable persistent playback speeds for users, providing a smoother learning experience!

Please or to participate in this conversation.