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. I.e.: 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();
on every video hide - Disabling
byte ranges