Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 video element request stay pending forever (on chrome)

I have a weird issue in Chrome.

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

The first one will stay pending forever (I guess this is the "meta-data", "partial content" request. But the point is that it stay pending)

The second one to the same file is ok and goes on and close after the loading is over.

The problem here is that the first request stay pending until I close the browser page. So at some point, if I load multiple video, Chrome will break and stop downloading anything because every available request is occupied by these pending requests.

I created a reduced test case here: http://jsbin.com/ixifiq/3


I've check to reproduce the issue, and it is happening on both Video.js and MediaElements.js frontpages. Open your network tab when loading the page, you'll see the first pending request. Then press play on the video, and you'll see the second request working, but the first one will stay pending forever.

Does anyone knows a fix to this bug?

like image 303
Simon Boudrias Avatar asked Apr 21 '13 23:04

Simon Boudrias


People also ask

Why video is not playing in HTML5?

For playing the videos on web browsers, there is a new type of video element designed that is HTML5. If you see the message “HTML5 video not found” while playing a video on a web page, it means your browser doesn't support the HTML5 format codecs or missed some video codecs.

Does Chrome support the video tag?

The <video> element is supported by all modern browsers. However, not all browsers support the same video file format. MP4 files are the most widely accepted format, and other formats like WebM and Ogg are supported in Chrome, Firefox, and Opera.


1 Answers

(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:

<video preload="none">     <source src="video.webM" type="video/webM"> </video> 

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();             });     }); } 
like image 173
Ronan Avatar answered Sep 20 '22 14:09

Ronan