调用jQuery('video')[0].load()报未捕获类型错误，视频无法加载如何解决

问题根因 #

jQuery('video')[0].load()抛出未捕获类型错误的核心原因是jQuery('video')没有匹配到页面中存在的video元素，取索引[0]得到的是undefined，对undefined调用load()方法就会触发类型错误，和jQuery版本无关。

修复方案 #

• 1. 增加元素存在性校验
     调用视频方法前先判断是否匹配到元素，避免空值调用报错，示例代码：

  const $video = jQuery('video');
  // 确认匹配到元素再执行操作
  if ($video.length) {
    $video[0].load();
    $video[0].play();
  } else {
    // 调试用，可确认选择器是否正确
    console.log('当前未匹配到video元素', $video);
  }
  

• 2. 调整操作时机，等待lightbox渲染完成
     lightbox内容通常是点击后动态插入DOM的，你触发$("#lightboxID").click()后立即执行video选择，此时lightbox的DOM还没完成渲染，video元素还没挂载到页面，自然匹配不到。可以将视频操作逻辑放到lightbox的打开完成回调中，没有回调的话可以临时加短延时：

  $("#lightboxID").click();
  // 等待lightbox渲染完成后再操作视频
  setTimeout(() => {
    jQuery('.play-img-cont.videoDiv').show();
    jQuery('.play-img-cont.videoImage').hide();
    $('.video-js, #my-video_html5_api').show();
    // 后续视频操作逻辑都放这里
  }, 100);
  

• 3. 使用更精准的选择器
     全局$('video')匹配容错率低，你代码中已经明确用到视频IDmy-video_html5_api、播放器IDpubvid，直接用ID选择器定位更准确，避免匹配不到或者匹配到错误元素：

  // 替换原来的jQuery('video')
  const $video = $('#my-video_html5_api');
  

• 4. 补全代码语法缺失
     你贴出的代码最后缺少两层闭合符，会导致语法错误影响执行，补全后的结尾部分为：

  myPlayer.on('ended', function() {
            jQuery('.play-img-cont, .videoImage').show();
            jQuery('.videoDiv').hide();
            this.exitFullscreen();
        }); // 补全ended回调的闭合
  }); // 补全外层代码块的闭合（根据你外层的包裹结构调整）
  

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