如何自定义ARD Mediathek媒体播放器的快进快退间隔？

问题背景 #

ARD Mediathek播放器的快退/快进功能（方向键←/→或J/L键）默认间隔会随视频时长动态变化——比如两小时的视频，单次快进快退约70秒，这个间隔对很多人来说太长。

之前尝试直接修改进度条元素的aria-valuenow属性：

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

// 快退10秒
valueNow.setAttribute('aria-valuenow', valueNow.getAttribute('aria-valuenow') - 10);

// 快进10秒
valueNow.setAttribute('aria-valuenow', valueNow.getAttribute('aria-valuenow') + 10);

但修改后的值会被播放器的实时状态立刻覆盖，这种方法既不稳定也不优雅，需要用Tampermonkey用户脚本实现更可靠的自定义。

核心逻辑定位 #

在网站的核心JS代码中，找到了控制快进快退间隔的逻辑：

• 原快退代码：

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

• 原快进代码：

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

可以看到，系统会取10秒和视频时长的1%中的较大值作为间隔。直接修改这段代码能实现需求，但导入整个JS文件过于冗余，我们可以用更高效的猴子补丁方案。

高效解决方案：Tampermonkey脚本 #

以下是直接拦截键盘事件、替换自定义间隔的脚本，无需修改原网站JS文件：

// ==UserScript==
// @name         ARD Mediathek 自定义快进快退间隔
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  固定ARD Mediathek播放器的快进/快退间隔为自定义时长
// @author       自定义
// @match        https://www.ardmediathek.de/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 自定义快进快退间隔（单位：秒）
    const CUSTOM_SEEK_STEP = 10;

    // 等待播放器核心实例加载完成
    function waitForPlayerReady() {
        // 通过Vue实例获取播放器核心对象（ARD Mediathek用Vue构建播放器）
        const videoElement = document.querySelector('video');
        if (!videoElement) {
            setTimeout(waitForPlayerReady, 500);
            return;
        }

        const playerInstance = videoElement.parentElement.__vue__;
        if (playerInstance && playerInstance.handleSeek && playerInstance.getCurrentTime) {
            setupCustomSeek(playerInstance);
            console.log(`ARD Mediathek 快进快退间隔已设置为 ${CUSTOM_SEEK_STEP} 秒`);
        } else {
            setTimeout(waitForPlayerReady, 500);
        }
    }

    // 绑定自定义快进快退逻辑
    function setupCustomSeek(player) {
        document.addEventListener('keydown', (event) => {
            // 仅当焦点在播放器区域内时生效，避免干扰页面其他操作
            if (!player.$el.contains(document.activeElement)) return;

            switch(event.key) {
                // 快退：左箭头、J键
                case 'ArrowLeft':
                case 'j':
                case 'J':
                    event.preventDefault();
                    player.handleSeek(player.getCurrentTime() - CUSTOM_SEEK_STEP);
                    break;
                // 快进：右箭头、L键
                case 'ArrowRight':
                case 'l':
                case 'L':
                    event.preventDefault();
                    player.handleSeek(player.getCurrentTime() + CUSTOM_SEEK_STEP);
                    break;
            }
        });
    }

    // 启动脚本
    waitForPlayerReady();
})();

脚本说明 #

1. 等待播放器加载：通过循环检查获取播放器的Vue实例，确保核心方法handleSeek和getCurrentTime可用后再执行逻辑。
2. 拦截键盘事件：覆盖原方向键/J/L键的默认行为，直接调用播放器的handleSeek方法传入自定义间隔，完全绕过原动态计算逻辑。
3. 自定义间隔：修改CUSTOM_SEEK_STEP变量即可调整快进快退的秒数，比如改成15秒只需把值改成15。

进阶方案：猴子补丁替换原计算逻辑 #

如果你希望更贴近原网站的调用逻辑，可以找到计算间隔的方法并替换它的返回值（需要根据实际JS结构调整）：

// 假设原计算间隔的方法名为getSeekStep
const originalGetSeekStep = player.getSeekStep;
player.getSeekStep = function(duration) {
    return CUSTOM_SEEK_STEP; // 固定返回自定义间隔
};

这种方法不需要监听键盘事件，但需要精准定位到原计算方法，适合对网站JS结构比较熟悉的用户。

内容的提问来源于stack exchange，提问作者Three Year Old