Can I mute or disable autoplay for Twitch's featured streams?

Question

Whenever I visit the homepage for Twitch.tv, the currently featured stream automatically starts playing at full volume.

Is it possible to mute featured streams on the Twitch homepage?

If not, can I prevent them from auto playing at full volume?

Answer 1

I helped deploy an update to the FrankerFaceZ browser extension that fixes this issue. (It's also available as a userscript.)

Disable this setting: Channel > Player > Front Page > Auto-play featured broadcasters

Answer 2

BetterTTV is another alternate chrome extension that has a setting to disable the featured video from playing on the Twitch homepage, among other features.

https://chrome.google.com/webstore/detail/betterttv/ajopnjidmegmdimjlfnijceegpefgped?hl=en

Answer 3

I don't know of a way inside of Twitch's settings to do this, but you can have a userscript (using something like TamperMonkey) for it!

Essentially the technique is to keep looking for any new video elements being added inside of a particular iframe on the homepage of Twitch (because it's added dynamically) and pause/mute them. Here's a quick and dirty version that pauses videos on the homepage of Twitch on load (but not sub-pages):

// ==UserScript==
// @name         Twitch pauser
// @namespace    https://zachsaucier.com/
// @version      0.2
// @description  To show how one can pause the autoplaying video on Twitch.tv
// @author       Zach Saucier
// @match        https://www.twitch.tv/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var mySetInvertal = setInterval(function() {
        var playerIframe = document.querySelector("#player iframe");
        if(playerIframe !== null) {
            var playerIframeDoc = playerIframe.contentWindow.document,
                videoElem = playerIframeDoc.querySelector("video"),
                playPause = playerIframeDoc.querySelector(".js-control-playpause-button");

            function clickPlayButton() {
                playPause.click();
                videoElem.removeEventListener("loadeddata", clickPlayButton);
            }
            videoElem.addEventListener("loadeddata", clickPlayButton);

            clearInterval(mySetInvertal);
        }
    }, 100);
})();

also available on Greasy Fork.

or this for muting it, similarly on Greasy Fork:

// ==UserScript==
// @name         Twitch muter
// @namespace    https://zachsaucier.com/
// @version      0.2
// @description  To show how one can mute the autoplaying video on Twitch.tv
// @author       Zach Saucier
// @match        https://www.twitch.tv/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var mySetInvertal = setInterval(function() {
        var playerIframe = document.querySelector("#player iframe");
        if(playerIframe !== null) {
            var playerIframeDoc = playerIframe.contentWindow.document,
                videoElem = playerIframeDoc.querySelector("video"),
                volumeElem = playerIframeDoc.querySelector(".mute-button");

            function clickVolumeButton() {
                volumeElem.click();
                videoElem.removeEventListener("loadeddata", clickVolumeButton);
            }
            videoElem.addEventListener("loadeddata", clickVolumeButton);

            clearInterval(mySetInvertal);
        }
    }, 100);
})();