Speeding Up My Learning By Increasing the Playback Speed of Wistia Videos

So the first thing I set about learning, or relearning, is the JavaScript for WordPress course from Zac Gordon. I had started it a few months back, but hadn’t gotten all the way through it. I wanted to pick it up and finish it, but found that my recollection of what I’d already gone through was a bit rusty. So time to review, right? Ugh. That’s a lot of time spent re-learning things. So I decided to be selective in what videos I want to rewatch. But more importantly for this post, I also wanted to speed up the video playback since this is a review. Sorry Zac.

Since this course uses the Wistia video service which dishes out .mp4 files using HTML5, I looked through the browser extensions that are available for speeding up videos in Chrome, but they weren’t doing the trick. However, I did run across a nice hack which actually uses JavaScript to change the playback speed. (Using JavaScript to hack the JavaScript course – I love that!)

All that needs to be done is to Inspect the page that has the video and on the Console tab, drop in the following code.

playbackRate = 1.5;

var videos = document.getElementsByTagName("video");

for (i = 0; i < videos.length; i++){
  videos[i].playbackRate = playbackRate;

Make sure the cursor is after the last bracket and hit return. Then you should be able to click play on the video and have it going at the speed you indicated in the playbackRate variable. Feel free to increase or decrease that variable to find something that’s comfortable for you. You’ll need to do this on every page that has video embedded on it, but it should work for all the videos on that page.

Like I said, kind of hacky, but it’s relatively quick and simple to do, plus it’s flexible. Time to make a keyboard shortcut for the snippet!