JQuery/JavaScript修改video src在iOS浏览器无效的解决求助

问题根源 #

iOS Safari对video媒体资源的加载机制和其他浏览器不同，直接修改<source>的src后，它不会主动重新加载新资源，必须手动触发加载流程。

具体解决步骤 #

• 修改src后必须调用load()方法
  改完source的src之后，一定要调用video元素的load()，强制浏览器重新解析资源。代码示例：

  $('.videopreview source').attr('src', '你的视频地址');
  $('.videopreview')[0].load(); // 关键步骤：触发重新加载
  

• 更简洁方案：直接修改video的src
  不用通过<source>元素，直接给video标签设置src，同样加上load()更保险：

  $('.videopreview').attr('src', '你的视频地址');
  $('.videopreview')[0].load();
  

• 修正媒体类型不匹配的问题
  你原代码里<source>的type是video/webm，但实际赋值的是MP4格式视频，iOS对媒体类型匹配要求严格，必须把type改成video/mp4，否则可能拒绝加载。

• 极端情况：重新创建source元素
  如果上面的方法都无效，可以移除原有source，重新创建新的source插入video后再调用load：

  const videoEl = $('.videopreview')[0];
  // 移除旧的source标签
  $(videoEl).find('source').remove();
  // 创建新的source并插入
  const newSource = $('<source>').attr({
    src: '你的视频地址',
    type: 'video/mp4'
  });
  $(videoEl).append(newSource);
  videoEl.load();
  

额外注意事项 #

• iOS Safari要求视频自动播放必须在用户交互（比如点击）事件内触发，无法无交互自动播放。
• 视频地址请使用HTTPS协议，iOS对HTTP资源有严格限制。

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