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.
This didn’t seem to work for me. Not sure why exactly. I’m watching a video on adobe.com’s tut section and it returns undefined when I try to run the code above in the console.
I believe the videos on https://www.adobe.com/express/learn/tutorials are using YouTube for their videos. With a YouTube video there is a Settings icon (that looks like a gear) and inside those settings you can adjust the Playback speed. Hopefully if this works for you, you won’t need this script.
Hi. Sal,
I tried your code in the console but it did not work. The video I am attempting to speed up appears to be a combination of audio and slides built into iframes. Is this something you have seen before?
Sal, my lifesaver.
although i didn’t meet my ends because the website records how much time i spend on watching videos, but at least i feel much lighter knowing how to speed up videos in Iframe