如何检测HTML5视频源为本地或外部？最佳方案探讨

一、核心判断逻辑 #

HTML5视频的源主要分为两类：

• 本地资源：包括相对路径（如./video.mp4）、同域绝对路径（如/static/video.mp4）、file://协议的本地文件路径
• 外部资源：跨域的HTTP/HTTPS协议路径（如https://cdn.example.com/video.mp4），或ftp://等其他网络协议的资源

二、正则表达式的局限性 #

用https?://匹配外部资源是一种简易方式，但并非最优方案：

• 仅能覆盖HTTP/HTTPS协议的外部资源，无法识别ftp://等其他网络协议的外部源
• 无法区分同域绝对路径（属于本地）和跨域绝对路径（属于外部）
• 对协议相对路径（如//cdn.example.com/video.mp4）的判断容易出现误差

三、更可靠的方案：使用浏览器URL API #

浏览器原生的URL对象是处理路径判断的最优工具，它能自动解析各种路径格式并转换成标准绝对URL，通过属性直接判断：

// 获取视频元素的有效源（优先用currentSrc，对应实际加载的source）
const video = document.querySelector('video');
const effectiveSrc = video.currentSrc || video.src;

if (!effectiveSrc) {
  // 处理无有效源的情况
  return;
}

try {
  // 传入当前页面origin，确保相对路径能被正确解析
  const url = new URL(effectiveSrc, window.location.origin);
  
  // 判断逻辑
  let isExternal = false;
  // 跨域的HTTP/HTTPS/FTP等网络协议资源属于外部
  if (['http:', 'https:', 'ftp:'].includes(url.protocol)) {
    isExternal = url.host !== window.location.host;
  }
  // file协议或同域资源属于本地
  const isLocal = url.protocol === 'file:' || !isExternal;

  console.log(isLocal ? '本地资源' : '外部资源');
} catch (err) {
  // 处理无效URL的情况
  console.error('无效的视频源路径');
}

关键API属性说明 #

• url.protocol：获取URL的协议部分（如http:、file:）
• url.host：获取URL的主机名+端口（如example.com、localhost:3000）
• video.currentSrc：返回视频实际加载的源地址，比video.src更准确（当存在多个<source>标签时，浏览器会选择兼容的源加载）

四、最佳实践总结 #

• 优先使用URL API而非正则：API能处理所有合法路径格式，避免正则的匹配漏洞
• 优先读取currentSrc：确保获取的是浏览器实际加载的视频源
• 区分「同域」与「跨域」：如果业务需要严格区分同域本地资源和跨域外部资源，通过对比url.host和当前页面window.location.host实现
• 异常处理：对无效URL或空源的情况做容错处理，避免代码报错

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