如何在YouTube非搜索页面显示视频4K/8K分辨率标签？

目前YouTube仅在搜索页提供视频的4K/8K标签，播放页、播放列表页无法直接查看；且通过播放页设置图标查看的最高分辨率存在偏差——比如3D SBS格式的8K视频，PC单屏模式下仅显示单侧4K，但视频本身是8K源。可通过以下两种方式解决：

一、使用浏览器扩展 #

直接选择专注于YouTube增强的第三方扩展，多数这类扩展会内置真实分辨率标签显示功能：

• 扩展会调用YouTube官方接口获取视频原始元数据，而非依赖前端显示的可选分辨率，能准确识别3D SBS等特殊格式视频的真实4K/8K属性
• 自动在播放页标题旁、播放列表项下方插入和搜索页样式一致的分辨率标签，无需手动操作

二、编写Tampermonkey脚本 #

如果偏好自定义，可通过油猴脚本实现核心功能，思路如下：

1. 监听页面加载：针对播放页、播放列表页的DOM变化，确保元素加载完成后再执行操作
2. 获取真实分辨率：
   • 从页面URL或DOM节点提取视频ID
   • 通过YouTube公开接口请求视频原始元数据，获取真实分辨率（包括3D SBS格式的实际分辨率参数）
3. 插入标签：在页面指定位置（如播放页标题右侧、列表项缩略图下方）添加原生样式的4K/8K标签

基础脚本示例 #

// ==UserScript==
// @name         YouTube 多页面分辨率标签显示
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在播放页、列表页显示视频真实4K/8K标签
// @match        *://www.youtube.com/watch*
// @match        *://www.youtube.com/playlist*
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';

    // 插入分辨率标签
    function insertResolutionTag(resolution, targetEl) {
        const tag = document.createElement('span');
        tag.className = 'style-scope ytd-badge-supported-renderer';
        tag.textContent = resolution;
        tag.style.cssText = 'background:#262626;color:white;padding:2px 6px;border-radius:4px;margin-left:8px;';
        targetEl.appendChild(tag);
    }

    // 获取视频真实分辨率（示例逻辑，实际可替换为更精准的接口判断）
    function getRealResolution(videoId, callback) {
        GM_xmlhttpRequest({
            url: `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoId}&format=json`,
            method: 'GET',
            onload: function(res) {
                const meta = JSON.parse(res.responseText);
                // 可通过更专业的接口获取视频原始分辨率，此处仅作示例
                if (meta.title.includes('8K') || meta.title.includes('VR180 8K')) {
                    callback('8K');
                } else if (meta.title.includes('4K')) {
                    callback('4K');
                }
            }
        });
    }

    // 处理播放页
    if (window.location.pathname === '/watch') {
        const videoId = new URLSearchParams(window.location.search).get('v');
        const observer = new MutationObserver(() => {
            const titleEl = document.querySelector('h1.style-scope ytd-watch-metadata');
            if (titleEl && !titleEl.querySelector('.style-scope.ytd-badge-supported-renderer')) {
                getRealResolution(videoId, (res) => insertResolutionTag(res, titleEl));
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
    }

    // 处理播放列表页
    if (window.location.pathname.includes('/playlist')) {
        const observer = new MutationObserver(() => {
            document.querySelectorAll('ytd-playlist-video-renderer').forEach(item => {
                if (!item.querySelector('.style-scope.ytd-badge-supported-renderer')) {
                    const videoId = item.querySelector('#video-title').href.split('v=')[1].split('&')[0];
                    const titleParent = item.querySelector('#video-title').parentElement;
                    getRealResolution(videoId, (res) => insertResolutionTag(res, titleParent));
                }
            });
        });
        observer.observe(document.body, { childList: true, subtree: true });
    }
})();

注：示例脚本通过标题识别分辨率仅作演示，实际可替换为调用YouTube视频详情接口获取精准的分辨率参数，避免标题识别的误差。

内容的提问来源于stack exchange，提问作者Chen Tian