Chrome中的多个mp4请求陷入“待定”状态

Question

我有一个电影（按钮）列表 - 当用户点击时 - 执行AJAX请求以更新视频标签的源属性。在加载新视频（.load（））之前，视频元素被克隆，删除，然后重新插入DOM（这是为了修复Safari错误）。请参阅以下代码：

//load in new paths
var contentVideos = $("#projectsMedia video source");
contentVideos.each(function () {
    if ($(this).attr("src").lastIndexOf("mp4") !== -1) {
        $(this).attr("src", videoPath + ".mp4");
    } else if ($(this).attr("src").lastIndexOf("ogv") !== -1) {
        $(this).attr("src", videoPath + ".ogv");
    } else if ($(this).attr("src").lastIndexOf("webm") !== -1) {
        $(this).attr("src", videoPath + ".webm");
    }
});

//clone vid, delete, reload for safari bug
var clonedVid = $("#projectsMedia video").clone();
$("#projectsMedia video").remove();
clonedVid.insertAfter($("#projectsMedia h1"));
$("#projectsMedia video")[0].load();

这适用于所有浏览器，但Chrome似乎正在投入一个扳手。当新路径被放入src属性并加载视频时，Chrome会在2秒到无穷大之间的任何位置加载视频。

打开开发控制台后，我发现mp4文件被多次下载（Chrome的一个明显特征），并且请求无限期地停留在待处理状态，视频很少在10秒内加载。见截图。

Chrome中的另一个好奇行为是在页面刷新（或按钮单击以执行新的AJAX请求），如果开放控制台未打开，则打开它将强制加载mp4，并且它可以正常工作。

有谁知道这个解决方案？