Taking Control of Video and Audio on Web Pages

← Back
A control panel

I’ve been using a chrome extension called Video Speed Controller for a few weeks to control speed of videos on web pages which was a productivity-hack recommended by Wes Bos on the excellent Syntax podcast, which he co-hosts alongside Scott Tolinski. As Wes pointed out, most video on the web is just HTML5 video elements and that is what allows plugins of this kind to work. Recently, my friends were discussing the lack of basic functionality, such as even a pause button, on many videos on the wb. I was already familiar with the HTMLMediaElement properties and methods, which I’ve used in the past to create a custom audio player, so it occurred to me that all you would need to do is target the relevant HTMLMediaElement in the DOM through the JavaScript console and you’d be able to manipulate everything about the video to suit your needs. I tested it out and it’s incredibly straightforward.

All you need to do is open the JavaScript console in your browser (for the uninitiated, press F12 and select the console tab) and create a variable which refers to the video element. Since there’s likely to only be one video element on a page, there’s no need to trawl through the DOM elements looking for an id or class. You can just target the video element:

const player = document.querySelector('video');

You can then call the html5 media methods on the constant we created:

player.pause();
player.play();

Beyond pausing and playing the video there are plenty of other things you can control. All the HTMLMediaElement methods and properties can be changed at your leisure. Watching a video with a player that doesn’t have a volume control? Simple, just change the volume property. Want to speed up or slow down a video? Just change the playbackRate property. This works on all your favourite sites including Youtube, Netflix and Twitch. It’s particularly useful for obnoxious video players like the Instagram’s which lack basic features like a volume button. All of this also applies to audio elements, such as podcasts, in the same way as video.

Some examples:

Change the volume:

player.volume = 0.2;

Mute:

player.muted = true;

Change the playback speed:

player.playbackRate = 1.5;

Set the video to loop:

player.loop = true;

So there you have it; if you ever want to change something about a video or audio element on a page then remember that you can simply open the JavaScript console and change whatever you like.

Recent Blog Posts


How to improve your Google PageSpeed score with Webp images

If you're still serving images in long-time standard formats such as JPEG and PNG then a Google PageSpeed Insights analysis of your site will identify an opportunity to improve your page loading times by serving images in "next-gen" formats. There are several so-called "next-gen" image formats which offer superior compression to JPEG and PNG but in this post we will… Continue reading »

A puzzle with one piece missing

What are WebSockets?

What do WebSockets do? Hypertext Transfer Protocol (HTTP) is unidrectional, meaning requests can only be made by the client. This is a limitation which means that a certain class of web application cannot be built using HTTP alone. WebSockets are a separate communication protocol, fully compatible with HTTP, which allow for bidirectional communication between a client and a server. A protocol… Continue reading »