HTML5 video element non-seekable when using Django development server

Question

I've got a Django app serving a webpage with an HTML5 element. There's a wierd "feature", turning the video element to be non-seekable: video.seekable returns a timeRanges object with length=0, whereas it should be length=1.

This means I can't edit the video. JavaScript can't do anything either.

The thing is, when I upload the problematic webpage, statically - no Django, just plain HTML/JS/CSS - to my website for testing, it works fine - length=1.

However, if I try to serve the same static page on my Django dev server still gives the same problem.

I am using Django's static serving for dev/debug purposes - Do you have any idea what is causing this, or how can I fix it?

Thanks.

Answer 1

Django's dev server probably doesn't support HTTP byte ranges, which is what browsers usually use to implement seeking.

Any production web server, e.g. Apache, lighttpd, or nginx, should support these fine. If you can run your entire Django app one of these servers the problem should go away.

A workaround would be to just serve the video from a server like that: set one of them up to statically serve the video directory on your machine on a different port than Django's dev server, and then in your dev environment either change the <video src= URL to point to the new web server, or write a special view for videos that redirects to the new web server.

Answer 2

I was facing the same problem and found out an easy way around. You may want to try this:

$ pip install static-ranges
$ pip install dj_static

And in your wsgi.py file:

...
from static_ranges import Ranges
from dj_static import Cling, MediaCling
...
application = Ranges(Cling(MediaCling(get_wsgi_application())))

For more information: Click Here