CODEWITHSUNDEEP
djangohtmlvideosafarihttp-headers
Mr_Tolchock
Mr_Tolchock

Reputation: 61

Video does not work on Safari and iOS

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).

Upvotes: 4

Views: 2248

Answers (2)

user4212639
user4212639

Reputation: 499

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.

Upvotes: -1

Mr_Tolchock
Mr_Tolchock

Reputation: 61

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...

Upvotes: 2

Related Questions