Shanking HTML5 Autoplay Videos with Safari’s Debug Menu

If you’re like me, you despise autoplaying videos on websites. Back in what I’ll refer to as “the day” you could tweak your browser’s plugin settings to do various things such as requiring a click to play those videos. There were also other plugins to manage that for you automatically.

In some respects, thankfully, the web has moved forward and no longer relies upon plugins as much to play video. The downside to this native ability to play video is that it can be tricky to wrangle sites that behave badly and autoplay a video on just about every article. (I’m looking at you, CNN.) It’s enraging for many reasons, chiefly for me that it’s CPU cycles that I didn’t explicitly allow the site to do – thus effecting my battery – and it’s just really obnoxious.

There’s a lot of solutions to this problem if you’re on Firefox or Chrome, but with Safari it gets a little more difficult. Safari is my browser of choice because it behaves the way I expect it to. I also like the developer tools in it better than other browsers. That being said, I do use Chrome – mainly to contain the security dumpster fire that is Flash.

A lot of Safari solutions out there no longer work due to changes Apple’s made and other reasons. Fret not, I’ve found a solution. This applies to Safari 10 on macOS Sierra.

  1. Expose Safari’s Debug menu
    This is dead easy. Open up Terminal and do:

    defaults write IncludeInternalDebugMenu 1

    Restart Safari if it was already open.

  2. You’ll have a shiny new Debug menu up on the menubar. Debug -> Media Flags -> Video Needs User Action

  3. With that enabled go to an offending site. *cough* CNN *cough* The video should be stopped dead in its tracks. Should you actually wish to view it, click on it and it will load.

Cool, right? Mostly, yes. There is one big fat caveat on this solution:
It absolutely clobbers all HTML5 video. A big site you’ll see issues with is YouTube. (Serious note: THANK YOU YouTube for moving to the HTML5 player by default.) You’ll need to click many times in order to play the video – not just to get past an ad (if you’re so lucky) but also because videos are streamed in segments. You may need to click as you’re watching in order to get the entire video.

No worries, there’s a solution.

You could certainly go diving back into the Debug menu and disable the Video Needs User Action selection, but that’s not elegant. Let’s add a keyboard shortcut to it.

  1. Open your System Preferences and go to Keyboard.
  2. On the Shortcuts tab you’ll be able to add an App Shortcut for Safari and assign it to a keyboard shortcut of your choosing. I picked Command-Option-V (for Video)
  3. Once you’re done, your Keyboard shortcut should look like this:

    and within Safari, your Debug menu should have the shortcut next to it:

    If you need help creating a keyboard shortcut, Apple has a support article on it.

So, there you have it, keep those baddies at bay with a handy-dandy keyboard shortcut. Essentially, I’m leaving the option enabled unless I head to a site I specifically want to disable it on (e.g. YouTube).