3

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:

Good request

In the failing scenario a request looks like:

enter image description here

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:

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
Community
  • 1
  • 1
Matyas
  • 12,474
  • 3
  • 57
  • 68
  • What does your console say? And try adding some sort of callback to your `.load` function, smth like `.load(function(){ console.log(1)})`. And btw, `localhost:3000`, is this RoR app? – Y.Puzyrenko Oct 08 '14 at 09:23
  • The console does not report any error and the load never finishes, and the video.readyState remains on 0 ( `HAVE_NOTHING` ). This is a [meteor](http://meteor.com) app. Serving supports caching & range requests. Right now I am disabling the caching for videos to see if the problem still persists. The main issue is that is also hard to reproduce the problem as it happens from time to time only. – Matyas Oct 08 '14 at 09:55
  • @Matyas hey I am having sort of similar problem, can you have a look into my issue. http://stackoverflow.com/questions/29093473/accept-ranges-not-working-with-chrome and http://stackoverflow.com/questions/29115886/avoid-range-header-while-requesting-for-video – Amogh Mar 18 '15 at 12:20

2 Answers2

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.

Sven Schürmann
  • 582
  • 2
  • 4
  • Videos are in mp4 format. When loading the file for the first time I can see chrome making the range requests reading first part then the last bit, to get its meta information. Moreover the problem seems to happen with caching enabled. I still need to do more tests, try out more workarounds. As mentioned in the question I've already found more people experiencing the same problems with cached video data in mp4 format. But unfortunately I have not pinned the exact problem. If it's a caching / hardware based decoding / video format issue. – Matyas Oct 08 '14 at 09:51
  • I dont't believe that is an caching problem. For one of our customers, we have implemented an video portal with html5. And we were faced with the same error as you described below. The solution was to swap the index of the videofile. Take a look here [link](http://renaun.com/blog/code/qtindexswapper/). – Sven Schürmann Oct 08 '14 at 10:24
  • Ok thanks for the suggestion. I am just in the progress of creating the transcoding script. Will try both `qt-faststart` and transcoding to `webm`. Thank you for the suggestion. By the way: 1. did you use range-requests and caching? 2. Did you ever move the video element around / showed the same video on the same page multiple times? – Matyas Oct 08 '14 at 10:39
  • I used one video player for the video portal. To load an other video I have changed the `src` attribute of the video element. I'm not sure what you mean with range-request. When you mean to skip forward or backward in the video then yes. For another project I have built an video carousel with html 5 and flash fallback. There were many video players which move in circle. No issues with video playback – Sven Schürmann Oct 08 '14 at 11:31
0

If you're indeed using Chrome, this may be related to chrome's behaviour concerning videos, i.e. 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

Community
  • 1
  • 1
Saucistophe
  • 184
  • 1
  • 9