One of the things YouTube has done well has made certain shortcuts for videos ubiquitous. The flipside is that when an HTML5 video doesn't have those shortcuts, it's annoying.
That's the case with F1 TV. So, with my new found browser extension building skills, I decided to tackle that one issue (of the very many) that plague the F1 TV website.
There really isn't much to blog about in this one, but here's some things that were interesting to learn on my browser extension journey.
Before going any further, you can pick up the code for my extension on GitHub.
You can run several types of scripts ranging from popups in the toolbar, background scripts, content scripts, and developer tools scripts. Each one of these has its own unique restrictions and ways to interact with the website. I'm not going to go into each in detail here, but it was interesting to learn about.
manifest.json ahead of time and specify which browser addresses on which to perform the injection.
Though I had pretty simple needs for playback, pause / play and minimal seeking, it turned out that YouTube power users have enjoyed a number of playback controls that I had no idea existed. Here's what they look like:
The code is thankfully simple enough:
MutationObserveris used to wait for the HTML5
<video>tag to be added to the page by
I am trying to add Google Cast abilities to it too. This seems like a bit of a harder challenge since the HLS (HTTP Live Streaming) stream needs to be authenticated.
It turns out you have to build a Cast Receiver and Cast Sender for Google's Cast API...which is a bit more trouble than I originally anticipated.
Sounds like a good idea for a future hack!