从零讲清楚，p站助手：视频页怎么分辨？立刻能用

标题：从零讲清楚，p站助手：视频页怎么分辨？立刻能用

简介 很多浏览器扩展、脚本或辅助工具需要先判断当前页面是不是“视频页”。无论你指的是以视频为主的网站（如视频网站、某些社交平台的视频频道，或俗称的“p站”），还是某些单页应用（SPA）里嵌入的视频区域，下面这篇实操指南会一步步把可用的方法讲清楚——包括肉眼观察、控制台快速检测、以及能立刻拿来用的书签脚本和扩展内容脚本示例。

先说明目标

• 自动或手动判断当前页面是否包含视频内容（可播放的视频流、iframe 嵌入播放器或 video 元素）。
• 能在单页应用/动态加载页面上也能可靠识别。
• 提供能直接复制粘贴到控制台或做为书签/脚本运行的代码示例。

方法总览（从简单到稳健） 1) URL 与路径规则（快速但不稳） 2) 查找 HTML5 元素（直接且常用） 3) 检查 og:video / schema.org 元数据（适用于很多站点） 4) 侦测 iframe 嵌入与第三方播放器（YouTube、Vimeo 等） 5) 监测网络请求（MIME 或媒体请求） 6) 使用 MutationObserver 处理动态加载的页面 7) 对跨域 iframe 的限制与应对

详细步骤与示例

1. URL 与路径规则（快速判断） 很多站点的视频页 URL 有明显特征，例如含 /watch/、/video/、/v/、?vid= 等。如果你的目标站点模式固定，用正则可以先行判断。举例：

• /watch\?v=
• /video/\d+ 缺点：站点改版或不同子站点会失效，适合作为第一层过滤。

1. 查找 HTML5 元素（最直接） 在控制台运行下面这段代码，可以立刻检测页面上的 video 元素并高亮第一个找到的视频： (function(){ const v = document.querySelector('video'); if(!v){ console.log('未检测到 元素'); return; } console.log('找到 video 元素：', v); v.style.outline = '4px solid #ff0'; v.scrollIntoView({behavior:'smooth', block:'center'}); })(); 优点：简单直接；能识别原生 HTML5 播放器。 缺点：很多站点使用 iframe 或自定义 JS 播放器，不一定用 标签可见于主页面。

2. 检查 Open Graph / schema.org 元数据（常用于分享） 很多页面在头部会包含 og:video、twitter:player 或 schema.org 的 VideoObject。快速检测头部元数据： (function(){ const metas = […document.querySelectorAll('meta')]; const found = metas.filter(m => /og:video|twitter:player|video|application\/ld+json/i.test(m.getAttribute('property')||m.getAttribute('name')||'') || (m.getAttribute('type') && m.getAttribute('type').includes('video'))); if(found.length) console.log('检测到视频相关 meta：', found); else { const ld = document.querySelector('script[type="application/ld+json"]'); if(ld) console.log('检测到 ld+json：', ld.textContent.slice(0,300)); else console.log('未在 meta 或 ld+json 中检测到视频信息'); } })(); 优点：对很多内容页非常可靠（用于社交分享/预览）。 缺点：有些页面不写这些 meta；单页应用可能动态注入。

3. 侦测 iframe / 第三方播放器 常见做法是查找页面内的 iframe（YouTube、Vimeo、外部播放器常见）。代码示例： (function(){ const iframes = […document.querySelectorAll('iframe')]; const vidIframes = iframes.filter(i => /youtube|vimeo|jwplayer|player/i.test(i.src)); if(vidIframes.length) console.log('可能的视频 iframe：', vidIframes); else console.log('未检测到明显的视频 iframe'); })(); 注意：跨域 iframe 内部无法访问，但通过 src 与尺寸等信息通常能判断。

4. 监听网络请求（最稳健，但需要扩展或 devtools） 在内容脚本难以访问网络请求详情时，可用浏览器扩展的 webRequest API（需要权限）或在控制台里监测 fetch/XHR 是否请求了 mp4、m3u8、webm 等媒体文件：

• 观察 Network 面板筛选 media、xhr。
• 若以脚本方式，可 patch fetch/XMLHttpRequest 来捕获 URL： (function(){ const _fetch = window.fetch; window.fetch = function(…args){ try{ if(args[0] && /(.mp4|.m3u8|mime=video|videoplay)/i.test(args[0])) console.log('fetch 请求媒体资源：', args[0]); }catch(e){} return _fetch.apply(this, args); }; const XHRopen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function(method,url){ try{ if(/(.mp4|.m3u8|.webm|video)/i.test(url)) console.log('XHR 请求媒体资源：', url); }catch(e){} return XHRopen.apply(this, arguments); }; console.log('已注入 fetch/XHR 监听'); })(); 优点：能捕获实际媒体加载，尤其对流媒体（hls/m3u8）有效。 缺点：页面可能通过 blob 或加密流加载，或请求被 Service Worker 中转。

1. MutationObserver：单页应用（SPA）必备 很多现代站点通过 JS 动态渲染内容，需要监听 DOM 变化来识别新加入的视频元素。示例： (function(){ const obs = new MutationObserver(muts => { for(const m of muts){ for(const n of m.addedNodes){ if(n.nodeType===1){ if(n.tagName.toLowerCase()==='video') { console.log('新增 video 元素：', n); n.style.outline='4px solid #0f0'; } if(n.querySelector && n.querySelector('video')) { console.log('新增包含 video 的节点：', n); n.querySelector('video').style.outline='4px solid #0f0'; } } } } }); obs.observe(document.body, {childList:true, subtree:true}); console.log('已启用 MutationObserver 监听视频元素变化'); })(); 配合前面的检测逻辑可以覆盖 SPA 场景。

2. 跨域 iframe 的应对 如果视频是放在跨域 iframe 中，页面脚本无法访问其内部 DOM。可通过：

• 解析 iframe src（通常能看到 video/playlist id）。
• 使用 webRequest（扩展权限）监测 iframe 的网络请求。
• 在扩展场景下向 iframe 注入内容脚本（需在 manifest 中包含对应域）。

实战：一行书签（Bookmarklet）——快速标出页面中的视频 把下面代码作为书签 URL（去掉换行并以 javascript: 开头）： javascript:(function(){const v=document.querySelectorAll('video,iframe'); if(!v.length){alert('未发现 video 或 iframe');return;} v.forEach((el,i)=>{el.style.outline='4px solid red'; el.setAttribute('data-video-highlight',i);}); alert('已高亮 '+v.length+' 个元素');})(); 用法：在任何页面点击即可高亮检测到的 video 或 iframe，马上可用。

实战：Chrome 扩展内容脚本（核心检测逻辑） 示例内容脚本（content.js）核心片段： (function(){ function isVideoPage(){ if(document.querySelector('video')) return true; if([…document.querySelectorAll('iframe')].some(i=>/youtube|vimeo|player|video/i.test(i.src))) return true; if([…document.querySelectorAll('meta')].some(m=>/(og:video|twitter:player|video)/i.test((m.getAttribute('property')||m.getAttribute('name')||'')))) return true; return false; } if(isVideoPage()){ chrome.runtime.sendMessage({type:'VIDEOPAGEDETECTED'}); } // 监听未来变化 const obs = new MutationObserver(()=>{ if(isVideoPage()) chrome.runtime.sendMessage({type:'VIDEOPAGEDETECTED'}); }); obs.observe(document.body, {childList:true, subtree:true}); })(); 配合 background script 可触发图标变更或弹出操作。

测试与调试小贴士

• 在 Chrome DevTools 的 Elements 里搜索 video、og:video、player、m3u8。
• Network 面板选择 Media 类型或在过滤器里输入 mp4/m3u8/webm 关键字。
• 当页面使用 blob:url 或 base64 时，追溯来源通常需要在 Network 面板查看先前的请求（可能是分段 ts 或 m3u8）。
• 单页应用里，导航不会刷新页面，需依赖 MutationObserver 或路由钩子（如果可访问）来触发检测。

常见误判与解决

• 误把展示图片（缩略图）当成视频页：优先检测 video 元素和实际的媒体请求。
• 第三方播放框架把播放器渲染为 canvas：需根据常见播放器的类名或 iframe src 识别（例如 jwplayer、plyr）。
• 加密或 DRM：即使检测到媒体流，也可能无法直接访问或下载，识别只做判断，不做侵入操作。

快速检查清单（部署前可用）

• 页面是否含
• 页面 head 是否含 og:video / twitter:player / ld+json 中的 VideoObject？
• 页面是否包含指向 YouTube/Vimeo/JWPlayer 的 iframe？
• 网络是否发起 .m3u8、.mp4、.webm 或 ts 请求？
• 页面是否为 SPA？如是，启用 MutationObserver。

结语 把几个方法组合起来，就能在绝大多数场景下可靠判断“视频页”。快速筛选可用 URL/元数据/HTML5 video，稳妥方案还应监听网络请求并针对 SPA 使用 MutationObserver。文中给出的书签与脚本片段都可以直接复制粘贴使用，作为“p站助手”或其他工具的检测模块，能在几分钟内投入实战。

需要我把上面的脚本整理成 Tampermonkey 用户脚本或完整的 Chrome 扩展清单（manifest + 示例文件）供你直接部署吗？