How to customize the seek backward/forward interval of the "ARD Mediathek" media player?

Question

The default seek backward/forward interval of the ARD Mediathek media player using the arrow keys ← and → (or alternatively J and L) is very large depending on the video length (e. g. for a video length of two hours, about 70 seconds). In my opinion, that is way too much. That's why I'm looking for a way to adjust the interval to my liking.

I tried to modify the aria-valuenow attribute value of the div.noUi-handle.noUi-handle-lower element.

const valueNow = document.querySelectorAll('.noUi-handle.noUi-handle-lower')[0];

// seek backward 10 seconds
valueNow.setAttribute('aria-valuenow', valueNow.getAttribute('aria-valuenow') - 10);

// seek forward 10 seconds
valueNow.setAttribute('aria-valuenow', valueNow.getAttribute('aria-valuenow') + 10);

But this doesn't work, my value is immediately overwritten again. Besides, there is probably a more elegant way. The implementation should be done as a Tampermonkey userscript.

Update:

I found the relevant code sections in this JavaScript file.

Changing

this.handleSeek(b.getCurrentTime() - Math.max(10, Math.floor(.01 * b.getDuration())));

to

this.handleSeek(b.getCurrentTime() - 10);

and

this.handleSeek(b.getCurrentTime() + Math.max(10, Math.floor(.01 * b.getDuration())));

to

this.handleSeek(b.getCurrentTime() + 10);

leads to the desired result.

But of course it would be total overkill to insert the entire content of the file into Tampermonkey. So the question is how to implement the two small changes more efficiently.

Answer 1

The simplest way is to fetch the script, replace those lines and inject it into the page with GM_addElement:

// ==UserScript==
// @name         Script override
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  .
// @author       You
// @match        https://www.ardmediathek.de/live*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ardmediathek.de
// @grant        GM_addElement
// @run-at       document-start
// ==/UserScript==


fetch("3206.7523101b.js").then(res => res.text()).then( text => {
    text = text.replaceAll('Math.max(10,Math.floor(.01*b.getDuration()))', '10');
    GM_addElement('script', {
        textContent: text,
    });

});

---

EDIT:

Changes needed to make the script work on the /video page:

• match the page https://www.ardmediathek.de/video/*.
• fetch the correct relative url /ardplayer.1732812071121.js. (starts with backslash)
• use a regex to replace the target lines.

Updated script:

// ==UserScript==
// @name         Script override
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  .
// @author       You
// @match        https://www.ardmediathek.de/live*
// @match        https://www.ardmediathek.de/video/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ardmediathek.de
// @grant        GM_addElement
// @run-at       document-start
// ==/UserScript==


fetch("/ardplayer.1732812071121.js").then(res => res.text()).then( text => {
    text = text.replace(/Math\.max\(10,Math\.floor\(\.01\*\S\.getDuration\(\)\)\)/g, '10');
    GM_addElement('script', {
        textContent: text,
    });

});