视频无法在Safari和iOS上运行

时间:2017-12-28 13:42:17

标签: django html5 video safari http-headers

我遇到的问题是我的HTML5示例视频无法在OSX上的Safari 11中加载,但与Chrome和Firefox完全兼容。此外,该视频一般不适用于iOS(Safari和Chrome)。

以下是HTML:

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

然而,我并不认为HTML是问题,因为我甚至都不能   访问Safari上的视频,并直接链接到该文件。如果你   想要自己尝试,这里是链接:Placeholder video

该应用程序在 Python 3 Django 2 中编程。视频既不能通过pythonanywhere页面加载,也不能通过我当地的Django开发服务器加载。

我已经搜索过Stack Overflow,但是找不到解决方案(例如问题HTML5 Video tag not working in Safari , iPhone and iPad 非常关注HTML和视频格式,我觉得这很好)。

2 个答案:

答案 0 :(得分:2)

我终于可以解决这个问题了(虽然这种方式非常不优雅)。我没有链接到pythonanywhere上的文件,而是使用github作为主机,它可以工作:

不起作用:

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

<强>使用:

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

我使用完全相同的文件,甚至使用相同的github存储库,我将其放到pythonanywhere。一个可能的答案可能是pythonanywhere不支持HTTP字节范围请求(?)......好吧无论如何,它现在可以工作......

答案 1 :(得分:0)

Django可以完全投放视频和其他媒体类型。 问题在于django开发服务器并不意味着是成熟的Web服务器。您也许应该考虑使用诸如nginx或apache之类的Web服务器为站点提供服务。您无需将静态内容托管在其他地方。

示例设置:

  1. Gunicorn运行应用程序并在套接字上监听,例如 /var/sockets/mysite.sock
  2. 配置Web服务器以服务站点。
    参考:https://uwsgi-docs.readthedocs.io/en/latest/tutorials/Django_and_nginx.html

您还应该运行collectstatic并将Web服务器配置为从该位置加载静态内容。这不是强制性的,但建议您这样做,因为可以将Web服务器配置为缓存此静态内容,以提高性能。

希望这会有所帮助。