4

I'm facing the problem that my HTML5 sample video doesn't load in Safari 11 on OSX, but works perfectly fine with Chrome and Firefox. Also, the video does not work on iOS in general (neither Safari nor Chrome).

Here is the HTML:

<video id="VideoElement" width="200" height="160" muted controls src="/static/media/fitness/theraband1.mp4"  type="video/mp4"></video>

Yet, I don't think that the html is the problem, as I cannot even access the video on Safari with a direct link to the file. In case you want to try by yourself, here is the link: Placeholder video

The app is programmed in Python 3 and Django 2. The video can neither be loaded by using the pythonanywhere page nor by my local Django development server.

I already searched Stack Overflow, but cannot not find a solution (e.g. question HTML5 Video tag not working in Safari , iPhone and iPad focuses much on the HTML and the video format, which I think are fine here).

Mr_Tolchock
  • 61
  • 5
  • Possible duplicate of [HTML5 Video tag not working in Safari , iPhone and iPad](https://stackoverflow.com/questions/20347352/html5-video-tag-not-working-in-safari-iphone-and-ipad) – William-H-M Dec 28 '17 at 14:00
  • Do other embedded videos from other sites work on Safari? If you're not sure, can you visit this [demo HTML5 video page](http://camendesign.com/code/video_for_everybody/test.html) from Safari browser and see if the video plays? – xyres Dec 28 '17 at 14:20
  • Yes, other embedded videos work fine on Safari, including the demo video posted above. Can you open my placeholder video posted above in Safari? – Mr_Tolchock Dec 28 '17 at 14:26

2 Answers2

2

I could finally solve the issue (in a quite inelegant way though). Instead of linking to the file on pythonanywhere, I use github as a host and it works:

Does not work:

<video id="VideoElement" width="200" height="160" controls muted src="http://USER.pythonanywhere.com/static/video.mp4"  type="video/mp4"></video>

Works:

<video id="VideoElement" width="200" height="160" controls muted src="https://github.com/USER/mysite/blob/master/static/video.mp4?raw=true"  type="video/mp4"></video>

I use exactly the same file and even the same github repository which I pull to pythonanywhere. One possible answer to that could be that pythonanywhere does not support HTTP byte-range requests (?)... well anyway, it works now...

Mr_Tolchock
  • 61
  • 5
  • 2
    just to reconfirm this awful bug. Django 2 Python 3.6. I tried literally everything and the problem is indeed that Django doesn't support byte-range requests so it would work on Chrome, Firefox but not Safari or iOS. Deployment with uWsgi also didn't fully work I am at loss of words for how careless the core developers are on this. It doesn't matter if you can serve static with Nginx or Apache. This has to work! Migrated the whole project in go lang and all works out of the box. 10 minutes vs hours trying to fix Django. – devnull Mar 18 '18 at 11:15
  • I am facing the same issue. Is there any workaround? @devnull – codingdaddy Sep 21 '18 at 06:56
  • @codingdaddy Do you successfully fix it? I'm facing it :( – KitKit Dec 06 '18 at 10:46
-1

Django can totally serve videos and other media types. The problem is that django development server is not meant to be a full fledged web server. You should perhaps consider serving the site using a webserver such as nginx or apache. You don't need to host the static content somewhere else.

Example setup:

  1. Gunicorn runs the app and listens on a socket e.g. /var/sockets/mysite.sock
  2. Configure the web server to serve the site.
    Reference: https://uwsgi-docs.readthedocs.io/en/latest/tutorials/Django_and_nginx.html

You should also run collectstatic and configure the webserver to load static content from this location. This is not mandatory but recommended since the web server can be configured to cache this static content for you for better performance.

Hope this helps.

user4212639
  • 489
  • 6
  • 6
  • 1
    The OP mentioned that this issue exists in production on Pythonanywhere and development locally. It is nowhere stated that the development server is used in production. This does not solve the original problem as you would need to be able to have the Django development server serve videos to Safari, to be able to test an app that serves videos locally (or you have to go through the whole headache of running nginx in development...). – tbrlpld Apr 08 '21 at 02:22