视频不适用于 Safari 和 iOS

Question

我面临的问题是，我的 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 和视频格式，我认为这很好）。

Answer 1

我终于可以解决这个问题了（不过以一种非常不雅的方式）。我没有链接到 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>

我使用完全相同的文件，甚至是我拉到 pythonanywhere 的同一个 github 存储库。一个可能的答案可能是 pythonanywhere 不支持 HTTP 字节范围请求（？）......无论如何，它现在可以工作......

Answer 2

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

示例设置：

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

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

希望这会有所帮助。