0

I'm using VideoJs to play various videos. Some bigger than others. Here's a simple scenario. A video starts playing that has 100mb length in total with a duration of 10 minutes. If the user skips to minute 2 then a call will be made to the backend to server the whole remaining video.

That's not good as far as user experience goes.The download time can be quite big and the player will be stuck in loading until it's finished.

Ideally what I'd want for it to do is download in chunks of 5-10 seconds.

Honestly javascript isn't my strong point so I don't really know where to being in doing that.

The backend accepts byte ranges. And I also have a Varnish.

Also I'm not opposed to using another video player if the one I'm currently using is not ok or for some reason doesn't support what I'm looking for.

Any pointing in the right direction is greatly appreciated.

For anybody who comes across this question and has the same problem:

https://info.varnish-software.com/blog/caching-partial-objects-varnish

Also make sure that varnish forwards the Range header.

Andrei
  • 3,434
  • 5
  • 21
  • 44

1 Answers1

3

This is quite possibly an issue with your file or server configuration, and not necessarily VideoJS. When you want users to be able to seek beyond the current buffer, you're usually talking about psueudo streaming.

To do this, your server must:

  • Support byte-range requests (you indicated that your back-end does support this)
  • Return the correct content-type header

Since you stated your server does support byte-range requests, I'd double check the content-type header.

Also, if you are using H.264 MP4 files, you might need to optimize them for streaming by moving the metadata (MOOV atom) to the beginning of the file. Some video encoders also refer to this as "fast start". A standalone application that can do this to already encoded MP4s is qtfaststart.

Otherwise, VideoJS should support seeking automatically. You can find a number of examples of them on JSFiddle.

You can also try to seek programmatically to see if that behaves any differently:

let player = VideoJS.setup("video");
player.play();
player.currentTime(340);  // time to seek to
JoshG
  • 6,472
  • 2
  • 38
  • 61
  • 1
    You're right. I was looking at the backed configs and it seems there's a problem with the vcl varnish config. Somewhere. When logged in everything works fine. For example `Content-Range: bytes 40566784-108567442/108567443` . When not logged in `Content-Range: bytes 0-119823824/119823825`. It seems that varnish isn't forwarding the header properly or it's removing it along the way. I'll check into that. And I'll accept your answer too since it's the closest to the problem. – Andrei Sep 22 '19 at 09:10
  • 1
    Unfortunately I don't know much about Varnish, so I can't help with that. If you can't figure it out, I'd post another question asking about that specifically since I know there are quite a few Varnish experts that monitor that tag. – JoshG Sep 22 '19 at 09:19
  • 1
    Figured it out. I was missing one config from the file: `sub vcl_hash { if (req.http.x-range ~ "bytes=") { hash_data(req.http.x-range); unset req.http.Range; } }`. Thanks for the heads up. – Andrei Sep 22 '19 at 09:38