眼动追踪实验网页视频显示异常及play方法空指针错误求助

问题1：视频在所有页面显示 #

原因 #

视频元素未与对应页面绑定，未根据页面切换状态控制可见性，导致全局显示。

解决方案 #

1. 把视频嵌入对应页面容器
   将<video>标签直接放到practicePage、block1Page、block2Page的DOM容器内，避免全局挂载：

   <div id="practicePage" class="page">
     <!-- 练习页面其他内容 -->
     <video id="practiceVideo" src="practice.mp4"></video>
   </div>
   <div id="block1Page" class="page">
     <!-- Block1其他内容 -->
     <video id="block1Video" src="block1.mp4"></video>
   </div>
   

2. 用CSS控制视频可见性
   给所有页面容器加统一类名（如.page），默认隐藏，仅激活页面显示；同时通过页面激活状态控制视频显示：

   .page {
     display: none;
   }
   .page.active {
     display: block;
   }
   /* 非激活页面的视频强制隐藏 */
   .page:not(.active) video {
     display: none;
   }
   

   切换页面时，给目标页面添加active类，移除其他页面的active类即可。

问题2：调用play()时出现TypeError: Cannot read properties of null (reading 'play') #

原因 #

• 调用play()时，视频DOM元素还未加载完成，获取结果为null
• 视频元素ID拼写错误，导致document.getElementById()返回null
• 页面切换后，之前获取的视频元素已不在当前激活页面的DOM范围内

解决方案 #

1. 等待DOM加载完成再操作
   将视频操作代码放在DOMContentLoaded回调里，确保元素已渲染：

   document.addEventListener('DOMContentLoaded', function() {
     const targetVideo = document.getElementById('practiceVideo');
     if (targetVideo) {
       targetVideo.play().catch(err => console.error('播放失败:', err));
     }
   });
   

2. 切换页面时重新获取当前页面的视频元素
   每次切换到视频页面时，重新定位对应页面内的视频元素，再执行播放：

   function switchPage(pageId) {
     // 隐藏所有页面
     document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
     // 激活目标页面
     const activePage = document.getElementById(pageId);
     activePage.classList.add('active');
   
     // 仅在视频页面执行播放逻辑
     const videoPages = ['practicePage', 'block1Page', 'block2Page'];
     if (videoPages.includes(pageId)) {
       const videoId = `${pageId.split('Page')[0]}Video`;
       const currentVideo = document.getElementById(videoId);
       if (currentVideo) {
         currentVideo.play().catch(err => console.error('播放错误:', err));
       } else {
         console.error(`未找到ID为${videoId}的视频元素`);
       }
     }
   }
   

3. 检查ID一致性
   确认JavaScript中使用的视频ID和HTML里<video>标签的id完全匹配，无拼写或大小写错误。

4. 适配浏览器自动播放限制
   多数浏览器禁止无用户交互的自动播放，需绑定用户操作（如按钮点击）触发播放：

   document.getElementById('startPracticeBtn').addEventListener('click', function() {
     const practiceVideo = document.getElementById('practiceVideo');
     if (practiceVideo) {
       practiceVideo.play().catch(err => console.error('播放失败:', err));
     }
   });
   

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