How to change the playing speed of videos in HTML5?

Mastering playbackRate

The HTML5 playbackRate attribute gives you the power to control video speed dynamically.

Browser support

Modern browsers like Chrome 43+, Firefox 20+, IE 9+, and Edge 12+ support playbackRate. Just be sure to account for those stubbornly clinging to older versions.

Live tweak speed

Introduce interactivity by delegate triggers to 'd' key to up the speed, and 's' to lower the speed:

// Use your keyboard as a gear shift! 🎹🔀 
document.addEventListener('keypress', function(event) {
  var video = document.querySelector('video');
  if (event.key === 'd') {
    video.playbackRate += 0.5;
  } else if (event.key === 's') {
    video.playbackRate -= 0.5;
  }
});


Bookmarklets for any time edit

With bookmarklets, control video speed whenever you want. They’re available across GitHub repositories and can be installed by dragging links to your bookmarks bar.

Video events use

Use the onloadstart video event to dynamically set playbackRate as soon as the video begins loading:

// No more waiting, we're hitting the gas pedal as soon as the light turns green! 🚦
document.querySelector('video').addEventListener('onloadstart', function() {
  this.playbackRate = 1.5;
});


Design user-friendly controls

Advanced video speed control sounds cool, but don't forget to provide a end-user experience.

In-built controls

The <video> tag's controls attribute offers the standard video speed control:

<video controls>
  <!-- Your video source -->
</video>


Custom controls

With HTML and JavaScript, you can craft pleasure-to-use speed controller:

<label for="speedRange">Speed: </label>
<input type="range" id="speedRange" min="0.5" max="2" step="0.1" value="1" onchange="document.querySelector('video').playbackRate = this.value" />


Multiple video control

In cases where you have multiple video elements:

// Hey there, I see you have a lot of videos. Let's slow down, shall we? 🎥❎
var videos = document.getElementsByTagName("video");
var firstVideo = videos[0];
firstVideo.playbackRate = 1.5;


Watch out for...

• Browser Support: Keep compatibility in check. Consider fallbacks for older browsers.
• Audio Distortion: Changing video speed might affect the audio.
• User Expectations: Make sure your controls are user-friendly and display the current speed.

Further Reading

1. HTML Audio/Video DOM playbackRate Property — master the control of playback rate using HTML5 Video property.
2. HTMLMediaElement: playbackRate property - Web APIs | MDN — MDN's detailed guide on video playback rate control.
3. ruby vs js string concatenation in rails - Stack Overflow — a lively community discussion with examples of how to adjust video speed in HTML5.
4. web.dev — solid guidance and resources for HTML5 and cutting-edge web development practices.
5. Video.js - Make your player yours | Video.js — an open-source library for more HTML5 video functionalities like variable speed playback.
6. HTML5 Video — the official W3C's guide on HTML5 video APIs, and control of playback.

Wrapping up

Remember, practice makes perfect! If you find this answer useful, add your vote. Happy coding!👩‍💻