HTML5 video element request stay pending forever (on chrome)

Question

I have a weird issue in Chrome.

Each time I load a element, chrome will start two HTTP request.

The first one will stay pending fo

Answer 1

(This bug still exists in Chrome 38.0.2125.111, OS X 10.10)

This may be a Chrome bug & you may solve it without any dummy ?time-suffix trick, just helping Chrome releasing sockets faster:

I had the same bug on a RevealJs HTML presentation, with 20+ videos (one per slide, autoplayed on slide focus). As a side effect, this unreleased socket problem also affected other ajax-lazy-loaded medias following immediately the first pending/blocked video, in the same HTML DOM.

Following Walter's answer (see bug report), I fixed the issue following the next steps:

1- Set video preload attribute to none:

2 - Use a canplaythrough event handler to play and/or pause the video once it is loaded & ready. This helps Chrome releasing the socket used to load that video :

function loadVideos(){
    $("video").each(function(index){
            $(this).get(0).load();
            $(this).get(0).addEventListener("canplaythrough", function(){
                this.play();
                this.pause();
            });
    });
}