如何让.load()方法在jQuery的.each()循环中正常工作？

你遇到的问题是因为误用了jQuery的load()方法——你写的$(this).load()是jQuery用来通过AJAX加载HTML内容的方法，而非<video>元素原生的load()方法（用于重新解析视频源并加载）。

要正确调用每个视频的原生load()方法，有几种可行的写法：

方法一：遍历jQuery集合调用原生方法 #

$(function() {
  const bgv = $('.bgvid');
  // 给所有video下的source设置真实src
  $('source', bgv).each(function() {
    const el = $(this);
    el.attr('src', el.data('src'));
  });
  // 遍历所有video元素，调用原生load()
  bgv.each(function() {
    this.load(); // this指向当前video的DOM原生对象
  });
});

方法二：合并处理逻辑（更紧凑） #

可以把source的处理和视频加载合并到同一个遍历中：

$(function() {
  $('.bgvid').each(function() {
    // 处理当前视频下的source标签
    $('source', this).each(function() {
      $(this).attr('src', $(this).data('src'));
    });
    // 调用当前视频的原生load()方法
    this.load();
  });
});

补充说明 #

如果习惯用jQuery对象操作，也可以通过$(this).get(0)取出DOM原生对象再调用load()，效果和直接用this.load()完全一致：

bgv.each(function() {
  $(this).get(0).load();
});

以上写法会自动适配页面上所有带有.bgvid类的视频实例，无需手动指定索引。

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