如何通过属性查找类？实现多网站视频元素适配需求

你遇到的问题核心是不同网站对视频元素的标记方式不一致，但所有可交互的视频元素都会继承HTMLMediaElement，自带currentTime和duration属性。浏览器原生没有getClassesByProperty这类API，不过你可以自己封装函数来实现需求，以下是两种高效的解决方案：

方案1：按属性筛选媒体元素 #

先优先查找video和audio标签（这类标签天然包含媒体属性），再筛选出带有目标属性的元素，避免遍历页面所有元素导致性能问题：

function getElementsByProperty(propertyName) {
  const targetElements = [];
  // 先检查所有媒体标签，提升检索效率
  const mediaElements = document.querySelectorAll('video, audio');
  for (const el of mediaElements) {
    if (propertyName in el) {
      targetElements.push(el);
    }
  }
  
  // 若媒体标签中未找到，再遍历所有元素作为兜底（性能较差，仅应急用）
  if (targetElements.length === 0) {
    const allElements = document.getElementsByTagName('*');
    for (const el of allElements) {
      if (propertyName in el) {
        targetElements.push(el);
      }
    }
  }
  return targetElements;
}

// 使用示例：获取带有currentTime属性的元素
const videoElements = getElementsByProperty('currentTime');
// 取第一个视频元素（根据实际场景调整）
const videoClass = videoElements[0];

方案2：精准定位视频元素 #

如果只需要视频元素（排除音频），可以直接判断元素是否为HTMLVideoElement实例，同时兼容iframe嵌入的视频场景：

function getVideoElements() {
  const videoElements = [];
  // 先获取页面所有video标签
  const videoTags = document.getElementsByTagName('video');
  videoElements.push(...videoTags);
  
  // 检查iframe内部的视频（部分网站会用iframe嵌入视频）
  const iframes = document.getElementsByTagName('iframe');
  for (const iframe of iframes) {
    try {
      const innerVideos = iframe.contentDocument.getElementsByTagName('video');
      videoElements.push(...innerVideos);
    } catch (e) {
      // 跨域iframe无法访问，直接跳过
      continue;
    }
  }
  
  // 兜底：遍历所有元素查找视频实例
  if (videoElements.length === 0) {
    const allElements = document.getElementsByTagName('*');
    for (const el of allElements) {
      if (el instanceof HTMLVideoElement) {
        videoElements.push(el);
      }
    }
  }
  return videoElements;
}

// 使用示例：获取页面中的视频元素
const videoClass = getVideoElements()[0];

使用时，你可以直接调用封装好的函数，无需再依赖固定的标签名或类名，适配不同网站的视频元素结构。

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