视频音乐同步控制异常及Cannot read properties of null报错求助

核心报错原因 #

报错Cannot read properties of null (reading 'play')和Cannot read properties of null (reading 'pause')，说明你代码里的video变量是null——也就是你用document.querySelector(".vid-container button")根本没找到对应的元素。你要控制的是视频本身，不是容器里的按钮，选择器完全错误。

分步修复 #

1. 修正视频元素选择器
   把获取video的代码改成对应HTML里的视频标签选择器，比如你的HTML里视频标签放在.vid-container内，那改成：

   const video = document.querySelector(".vid-container video");
   

   如果视频标签有单独类名（比如bg-video），直接用类名选择更稳妥：

   const video = document.querySelector(".bg-video");
   

2. 确保DOM加载完成后执行代码
   若JS代码放在HTML头部，DOM元素还没渲染就执行querySelector会导致获取到null。把调用app()的代码改成：

   document.addEventListener('DOMContentLoaded', app);
   

   这样会等页面所有元素加载完成后再初始化应用，避免元素未就绪的问题。

3. 完整修正后的代码

   const app = () => {
     const song = document.querySelector(".song");
     const play = document.querySelector(".play");
     const outline = document.querySelector(".moving-outline circle");
     // 修正视频选择器
     const video = document.querySelector(".vid-container video");
   
     const sounds = document.querySelectorAll(".sound-picker button");
     const timeDisplay = document.querySelector(".time-display");
   
     const outlineLength = outline.getTotalLength();
     let fakeDuration = 600;
   
     outline.style.strokeDasharray = outlineLength;
     outline.style.strokeDashoffset = outlineLength;
   
     play.addEventListener("click", () => {
       checkPlaying(song);
     });
   
     const checkPlaying = (song) => {
       if (song.paused) {
         song.play();
         // 现在video不为null，可以正常调用play
         video.play();
         play.src = "./svg/pause.svg";
       } else {
         song.pause();
         video.pause();
         play.src = "./svg/play.svg";
       }
     };
   };
   
   // 等DOM加载完成再执行
   document.addEventListener('DOMContentLoaded', app);
   

额外检查点 #

• 确认HTML里的视频标签存在且路径正确，建议给视频加muted属性（浏览器通常禁止自动播放带声音的视频，静音后才能通过JS正常触发播放）：

  <div class="vid-container">
    <video src="./your-video.mp4" muted loop></video>
  </div>
  

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