Speed Up Video in Iframe

My wife has to watch some videos as part of an online course. These videos do not have speed controls, however she would like to watch the video at an increased rate (e.g. 1.5x the normal speed).

Manually adding code like the following in the browser console

document.querySelector('video').playbackRate = 1.5;

should do the trick.

iframe Problem

Unfortunately, the video appears in an iframe inside another iframe therefore this code does NOT work.

Instead we need to make this call in the correct frame.

Solution for My Wife

On the specific site my wife was dealing with the following changes the video speed to 1.5x.

window.frames[0].frames[1].document.querySelector('video').playbackRate = 1.5;

General Solution

Since it is non-trivial to determine which frame contains the video, a general solution makes the call on each frame recusively.

General Solution

function feAdjustVideoPlaybackInFrame(frame, playbackRate) {
  var i;
  for (i=0; i<frame.frames.length; i++) {
    try {
      feAdjustVideoPlaybackInFrame(frame.frames[i], playbackRate);
      frame.frames[i].document.querySelector('video').playbackRate = playbackRate;
    }
    catch(e) {};
  }
}
feAdjustVideoPlaybackInFrame(window, 1.5);

General Solution Explanation

Initially, we call our function with the frame set to window (the top level frame). Inside the function we determine the number of frames inside this frame (frame.frames.length) and then iterate the variable i through the index for each frame (e.g. if there are two frames, we loop through using i=0 and i=1).
For each inner frame we call our function again (this time with the inner frame instead of window). This allows us to drill down through all frames.

In each frame (frame.frames[i]) we search for the <video> element (document.querySelector('video')) and when we find it we set the playbackRate to 1.5. We wrap this call in a try/catch block, so if any part of it fails (e.g. there is no video element in this frame) our code skips over the error and moves forward with the next item.

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.