Has anyone met this weird html5 video playback issue? Black element, with no possibility to load

Question

Scenario

I have a video element:

<video class=​"media video" src=​"http:​/​/​localhost:​3000/​uploads/​medias/​2014/​08/​11/​nahNYjjysJBuwSsxj_2" loop>​</video>​

Using jQuery I move it around the DOM (attaching and detaching it).

Sometimes after a new attachemnt (using $.appendTo ) the video goes black with no possibility to programatically play it. Ie: I can do the following with no success:

var video = $('video')[0]; // using jQuery I get the reference to the DOM element
video.load(); // nothing happens
video.play(); // nothing happens
video.pause(); // nothing happens

I also have a listener on it

$('video').on('canplay', function () {/*...*/});

which never gets triggered.

I've tried changing the url to:

v.src = v.src + '?cache_bust=true'; 
// then
v.load(); v.play();

but nothing happens.

Notes

• There are multiple 4-5 video elements on the page that I move around in a similar manner
• I always append the video elements using $.appendTo to a visible area and then try to play them
• The server is setup to support Range requests and caching.

In the healthy case they look like:

In the failing scenario a request looks like:

Chrome shows pending and the server never reports an incoming request. `

Question

• Has anyone met this / similar problem?
• Does a solution for it exist?
• If not: Does a reliable workaround exist?

Findings (update)

As I've been digging deeper. I've realized this might be a chrome/ium issue. Thus I've found the following pages:

• HTML5 video request stay pending (forever)
• Byte range cache is locked when attempting to open the same video twice
• Might be dupe of HTML5 video element request stay pending forever (on chrome)

Which all show bugs that have been open for 1.5 - 4 years. Which does not look too promising. Therefore I will dive into searching for alternatives, trying out:

• Disabling cache for videos
• using video.src = null; video.load(); video.src = null; video.load(); on every video hide
• Disabling byte ranges

Answer 1

In which format are your videos? Many encoders, including FFmpeg and MEncoder, write the mp4 metadata very unclean. In most cases the index will be written at the end of the video file and not, as expected at beginning of the file. So the entire video must be downloaded before it can be played.

The correction can be done under Linux with a small but powerful tool called qt-fast start . This small program is conveniently already by default in the tools subdirectory of the FFmpeg installation included.

Answer 2

If you're indeed using Chrome, this may be related to chrome's behaviour concerning videos, ie using byte serving to get the video stream, then mess up when receiving a 200 HTTP code, and not 206 which suits the byte serving thing better.

The problem seems to happen mainly when replaying the video. You'll find more info in this other thread: HTML5 video will not loop