上传视频后修改现有video标签src属性控制台报412错误如何解决

问题根因 #

• 412状态码代表先决条件失败，触发场景是浏览器请求资源时携带了If-Match/If-Unmodified-Since这类缓存校验头，服务器比对后发现资源不符合校验条件就会返回该错误。你这里的触发原因是原有video标签已经加载过旧视频，更新src时浏览器复用了旧的缓存校验头去请求新视频，和新视频的ETag/最后修改时间不匹配导致校验失败。
• 另外你修改src后没有主动触发video标签的重载逻辑，也可能导致加载异常。

修复方案 #

把AJAX成功回调部分改成以下代码即可：

success: function(data){
    console.log(data); // vid/01.mp4 - 输出正常
    // 给路径加时间戳参数，规避缓存校验问题
    const newSrc = data + '?t=' + Date.now();
    $('#bvid').attr('src', newSrc);
    // 主动触发video重载
    $('#bvid')[0].load();
    // 若需要自动播放可放开下一行注释
    // $('#bvid')[0].play();
}

如果调整后仍有问题，再排查两个点：

• 确认video标签所在页面的域名和视频资源域名完全一致，或者视频资源的CORS配置允许当前域名访问。
• 检查服务器上传逻辑，确认返回路径时视频已经完全写入磁盘，没有出现返回路径时文件还在上传中的时序问题。

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