Laravel Blade视图中video.currentTime设置函数失效问题求助

可能的原因及对应解决方案： #

• 视频加载状态未达标
  普通HTML/PHP环境下视频加载时机可能更快，而Laravel视图中可能视频元数据尚未加载完成就执行了跳转代码。修改JS函数，确保视频元数据加载后再设置播放进度：

  function abc() {
      alert('clicked');
      const video = document.getElementById('v0');
      
      // 检查视频是否已加载足够元数据
      if (video.readyState >= 2) { // HAVE_CURRENT_DATA 状态
          video.currentTime = 26;
      } else {
          // 监听元数据加载完成事件，仅执行一次
          video.addEventListener('loadedmetadata', () => {
              video.currentTime = 26;
          }, { once: true });
      }
  }
  

• 重复的元素ID
  检查Blade模板中是否存在多个id="v0"的元素，重复ID会导致getElementById获取到错误元素。确保视频元素ID唯一，或改用类选择器定位：

  <video class="target-video" controls preload>
      <source type="video/mp4" src="{{asset('assets/img/mobile.mp4')}}">
  </video>
  

  const video = document.querySelector('.target-video');
  

• 视频资源路径验证
  确认{{asset('assets/img/mobile.mp4')}}生成的URL正确：右键视频元素，检查src属性是否指向可正常访问的视频文件。路径错误会导致视频无法加载，自然无法跳转进度。

• 查看控制台错误
  按F12打开浏览器控制台，检查是否有JS报错（比如视频元素未找到、资源加载失败等），根据报错信息精准定位问题。

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