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

A laptop with PHP code on the screen

A look at some of PHP 7.4’s new features

PHP 7.4 was released on 28 November 2019 and with it comes a lot of new features. In this post we'll examine a few of the more interesting ones along with examples of how they can be used. PHP has long been the punchline in low-effort memes, and though some of the disdain for the language is justified, more recent… Continue reading »

Some text from a computer terminal

Scheduling database backups with cron jobs

We're going to create a bash script which runs mysqldump (a MySQL backup program) to generate a database backup with a filename containing the date. We're then going to set up a cron job (a utility for running scheduled tasks) to run the script at regular intervals. We'll do all of this securely so that other users on the server can't… Continue reading »