Multiple mp4 requests in Chrome stuck in 'pending'

问题

I have a list of films (buttons) which - when a user clicks - performs an AJAX request to update the video tag's source attribute. Before loading the new video (.load()), the video element is cloned, removed, then re-inserted into the DOM (this is to fix a Safari bug). See code below:

//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();

This works fine for all browsers, but Chrome seems to be throwing a spanner into the works. When the new path is put into the src attribute and the video is loaded, Chrome takes anywhere between 2 second to infinity to load the video.

Opening the dev console, I found that the mp4 file is being downloaded multiple times (an apparent feature of Chrome), and the requests are stuck in pending for an indefinite amount of time and the video rarely loads within 10 seconds. See screenshot.

Another curios behaviour in Chrome is that on a page refresh (or button-click to perform a new AJAX request), if the dev console is not open, then opening it will force the mp4 to load, and it works fine.

Does anyone know of a solution to this?

来源：https://stackoverflow.com/questions/16479374/multiple-mp4-requests-in-chrome-stuck-in-pending