蘑菇视频电脑版深夜刷到，我用最短路径把清晰度自动切换搞定了

蘑菇视频1282026-06-16 12:22:01

深夜追剧、刷番或刷博主回放，网络时快时慢、播放器清晰度来回跳，让人既懊恼又困倦。蘑菇视频电脑版界面多变、默认没有“恒定最高画质”选项，于是我摸索出一套最短路径：用一个轻量级的浏览器脚本把清晰度自动切换成你想要的分辨率，几分钟上手，长期省心。下面把完整流程、可复制的脚本、调试技巧和常见问题一并整理好，直接拿去用。

为什么要自动切换清晰度

晚上宽带波动时，播放器可能自动降清晰度以保证流畅，结果画质忽然变差。
手动切换频繁打断观看体验，尤其手机、遥控或睡意朦胧时。
有些视频站把“自动”作为默认，但“自动”策略不一定符合你对清晰度和缓冲的偏好。

解决思路很直接：让脚本观察播放器界面（或视频标签），在页面加载或清晰度被改变时，自动选回你设置的目标清晰度（例如 1080p、720p 或“高清”这样的文本），并在必要时反复尝试直到生效。这个方法兼容大多数基于 HTML5 播放器的网站，只需定位清晰度选择 UI 即可。

工具与准备

浏览器：Chrome / Edge / Brave / Vivaldi（Chromium 内核）或 Firefox。
插件：Tampermonkey（或 Greasemonkey / Violentmonkey）。Tampermonkey 更易上手。
基本技能：打开开发者工具（F12），查找清晰度菜单或按钮的 DOM 选择器（一个 CSS 路径），以及了解播放器的更新逻辑（可选）。

最短路径实战：Tampermonkey 脚本（通用模板）下面给出一个通用且可配置的脚本模板。你只需把目标站点的 @match 地址和清晰度按钮的选择器替换成实际值，保存启用后脚本会监测并自动切换清晰度。

（把脚本复制到 Tampermonkey 新建脚本里，按需修改注释里标注的部分）

// ==UserScript==
// @name         蘑菇视频自动清晰度切换（通用模板）
// @match        *://*.moguvideo.example/*   // 把这行换成蘑菇视频的实际页面地址匹配规则
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    // ---------- 可配置项 ----------
    const targetLabels = ['1080p', '高清', '720p']; // 优先级从前到后，找到第一个匹配就选它
    const qualityMenuButtonSelector = '.quality-btn'; // 清晰度菜单按钮（点击展开选项）
    const qualityOptionSelector = '.quality-list .item'; // 展开后的选项列表项
    const maxTries = 10;        // 最大尝试次数
    const tryInterval = 1000;   // 每次尝试间隔（毫秒）
    // -------------------------------

    let tries = 0;

    function log(...args) {
        console.log('[自动清晰度]', ...args);
    }

    function findAndClickQuality() {
        tries++;
        // 找到清晰度菜单按钮并点击展开
        const menuBtn = document.querySelector(qualityMenuButtonSelector);
        if (!menuBtn) {
            if (tries < maxTries) {
                setTimeout(findAndClickQuality, tryInterval);
            } else {
                log('未找到清晰度菜单按钮，停止尝试。');
            }
            return;
        }

        // 尝试展开菜单（有些按钮需要 hover 或特殊事件，可先尝试 click）
        menuBtn.click();

        setTimeout(() => {
            // 找到选项列表
            const options = Array.from(document.querySelectorAll(qualityOptionSelector));
            if (!options.length) {
                if (tries < maxTries) {
                    log('未找到清晰度选项，重试...');
                    setTimeout(findAndClickQuality, tryInterval);
                } else {
                    log('未找到清晰度选项，停止尝试。');
                }
                return;
            }

            // 按优先级选择第一个匹配项
            for (const label of targetLabels) {
                const opt = options.find(o => o.innerText.trim().includes(label));
                if (opt) {
                    log('找到目标清晰度:', label, '，点击选择。');
                    opt.click();
                    return;
                }
            }

            log('在选项中未找到目标标签，当前选项为：', options.map(o => o.innerText.trim()));
            // 若未匹配任何标签，可在尝试次数允许时再次尝试
            if (tries < maxTries) setTimeout(findAndClickQuality, tryInterval);

        }, 300); // 等待菜单展开动画
    }

    // 当页面动态加载或播放器切换时触发一次
    function initObserver() {
        const body = document.body;
        if (!body) return;
        const mo = new MutationObserver((mutations) => {
            // 根据变更触发一次尝试（防止频繁触发）
            if (tries >= maxTries) return;
            findAndClickQuality();
        });
        mo.observe(body, { childList: true, subtree: true });
    }

    // 首次尝试（页面就绪后）
    setTimeout(() => {
        findAndClickQuality();
        initObserver();
    }, 1000);

})();

如何找到正确的选择器（一步到位技巧）

在打开的视频页面按 F12，切换到 Elements（元素）面板。
手动点击播放器里的清晰度按钮，观察哪个 DOM 节点发生高亮或被添加了 active 类。右键选择“Copy → Copy selector”可得到一个精确路径，或挑选包含类名的简洁选择器（如 .player-controls .quality-btn）。
清晰度下拉或弹出后，再复制选项项的选择器（注意文本包含“1080p/高清”之类）。
把这些选择器替换脚本里的 qualityMenuButtonSelector 和 qualityOptionSelector。

调试技巧与常见问题

菜单需要 hover 才会出现：把 menuBtn.click() 换成 menuBtn.dispatchEvent(new MouseEvent('mouseover', {bubbles:true})); 或者同时派发 mouseover 和 click。
网站用 Shadow DOM 或 React 严重封装：试试直接查找 video 元素并读取播放质量 API（若有），或通过播放器暴露的全局对象控制。复杂情况可用播放控制库的 debug 方法，视具体站点而定。
脚本不起作用：确认 Tampermonkey 已启用脚本，@match 地址匹配正确，浏览器没有阻止内容脚本。
反复自动切换但实际无效：可能是站点采用分段自适应流（DASH/HLS）并在内部管理分辨率，强制点击可能被播放器策略覆盖。解决方法是延迟点击、增加尝试次数，或查找播放器的 API（例如 window.player.setQuality(…) 这类方法）。

进阶：按网络情况动态切换如果希望更智能——在网速好的时候选 1080p、欠佳时回退到 720p——可以把脚本扩展为检测 video.buffered、networkInformation（navigator.connection.downlink）或监测播放卡顿次数，根据阈值在 targetLabels 中切换优先级。示例策略：