自定义视频播放器开发报错：Cannot read properties of null (reading 'querySelector')

报错根因 #

你遇到的Uncaught TypeError: Cannot read properties of null (reading 'querySelector')报错，是因为代码第一行const player = document.querySelector('.player')执行时没有匹配到对应DOM元素，返回了null，后续调用player.querySelector自然触发空值读取错误。

具体问题及修复方案 #

• DOM加载时机错误
  如果你的JS代码放在<head>标签内，或者放在<body>中DOM结构的上方，执行时HTML中的.player元素还没被浏览器解析渲染，自然匹配不到。
  修复方案二选一：

  1. 把所有JS代码移到</body>闭合标签的前一行，确保DOM加载完成后再执行JS逻辑
  2. 把所有JS逻辑包裹在DOM加载完成的监听事件中：

  document.addEventListener('DOMContentLoaded', function() {
    // 现有所有JS代码放在此处
  })
  

• video标签class属性重复定义
  你的video标签错误声明了两次class属性：

  <video controls class="player-video" height="369px" width="610px" class="video" id="video" ...>
  

  浏览器只会识别最后一个class="video"，导致player.querySelector('.player-video')匹配不到元素。
  修复方案：合并两个class属性：

  <video controls class="player-video video" height="369px" width="610px" id="video" ...>
  

• 元素选择范围错误
  代码中const toggle = player.querySelector('.toggle-play')会匹配失败，因为HTML中的.toggle-play按钮在.player元素的外层，不属于.player的子元素，不能从player节点向下查询。
  修复方案：改为全局查询：

  const toggle = document.querySelector('.toggle-play');
  

• 其他需修复的代码问题（避免后续报错）

  1. togglePlay函数仅定义了playState变量，没有实际执行播放/暂停逻辑，补充逻辑：

  function togglePlay() {
    video.paused ? video.play() : video.pause();
  }
  

  2. updateButton函数问题：this.pause是错误属性，应为this.paused；未定义togglePauseBtn变量，统一使用togglePlayBtn即可；赋值运算符使用错误，innerHTML +改为innerHTML =。
  3. 变量名错误：range.forEach的变量名应为ranges；定义的mousemove变量后续实际使用的是mousedown，需统一变量名。
  4. 缺少核心功能函数：你调用的progressUpdate、skip、rangeUpdate、scrub四个函数尚未定义，补全对应逻辑后才能正常使用进度条拖动、快进快退、参数调节功能。

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