我正在尝试使用视频标签在 safari 中显示视频。
这是我的html片段:
<video autoplay="" muted="" loop="" preload="auto" poster="http://my.ip.add.ress/static/my_video_image.jpg">
<source src="http://my.ip.add.ress/static/my_video.mp4" type="video/mp4" />
<source src="http://my.ip.add.ress/static/my_video.webm" type="video/webm" />
</video>
静态文件(css、js、图像)正在正确提供。
我遇到的问题是当 safari 请求视频时,nginx 应该返回
206 partial content
回复。但是,它返回 200 OK
整个视频(我认为整个文件都返回了)。但是 safari 并没有请求整个视频,而是使用 range
请求了一系列视频。标题。所以这会导致视频无法在 Safari 中播放。就这样,我当前的设置适用于 Chrome 和 Firefox。
我正在使用 nginx 来提供视频内容。我想避免使用第 3 方服务器,因为这是一个小项目:)。
我的问题是如何正确设置 nginx 以向 safari 提供视频?我知道 nginx 忽略了
range
请求中的 header 。有没有办法告诉 nginx 注意那个 header ?这是我在
/etc/nginx/sites-available/myproject
中的 nginx 配置:server {
listen 80;
server_name my.ip.add.ress;
location = /favicon.ico { access_log off; log_not_found off; }
location /static/ {
alias /home/website/my_python_virtual_env/my_project/static_folder_containing_mp4_videos/;
}
location / {
# gunicorn to django
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
}
这是请求:
Request
Range: bytes=0-1
Accept: */*
Connection: Keep-Alive
Accept-Encoding: identity
DNT: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15
Referer: http://my.ip.add.ress/
X-Playback-Session-Id: 97A1EC54-85A3-42A1-8EA2-8657D03058B6
这是回应:
Response
Content-Type: video/mp4
Date: Thu, 13 Sep 2018 17:48:40 GMT
Last-Modified: Wed, 12 Sep 2018 22:20:39 GMT
Server: nginx/1.14.0 (Ubuntu)
Content-Length: 10732143
Connection: keep-alive
X-Frame-Options: SAMEORIGIN
在有视频工作的网站上,请求/响应如下所示:
Request
GET /big_buck_bunny.mp4 HTTP/1.1
Range: bytes=0-1
Host: clips.vorwaerts-gmbh.de
Accept: */*
Connection: keep-alive
Accept-Encoding: identity
Accept-Language: en-us
DNT: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15
X-Playback-Session-Id: C2EAAF63-1230-44A9-9A16-6332C1EDEBF0
Response
HTTP/1.1 206 Partial Content
ETag: "5416d8-47f21fa7d3300"
Content-Type: video/mp4
Date: Thu, 13 Sep 2018 17:28:47 GMT
Last-Modified: Tue, 09 Feb 2010 02:50:20 GMT
Server: cloudflare
Content-Length: 2
Expires: Fri, 13 Sep 2019 17:28:47 GMT
Connection: keep-alive
Content-Range: bytes 0-1/5510872
Set-Cookie: __cfduid=d2776dbf7a6baaa1b2f2572d600deda141536859727; expires=Fri, 13-Sep-19 17:28:47 GMT; path=/; domain=.vorwaerts-gmbh.de; HttpOnly
Vary: Accept-Encoding
Cache-Control: public, max-age=31536000
CF-RAY: 459c5511b243a064-SLC
CF-Cache-Status: HIT
最佳答案
我觉得发布这个很傻,但这是我的问题。
我的 nginx 实例未设置为为媒体提供服务。来自 /media/
的任何内容由 Django 提供服务。 Django 无法为 safari 正确提供 mp4 视频,因为它不适用于 Range
要求。不过,它可以为它们提供足够的服务,让 chrome 正常工作! ;)
修复很简单。添加 /media/
的位置条目到我的网站 nginx.conf 文件。
server {
listen 80;
server_name my.ip.add.ress;
location = /favicon.ico { access_log off; log_not_found off; }
# still have to have this location entry to serve the static files...
location /static/ {
alias /home/website/my_python_virtual_env/my_project/static_folder_containing_static_files/;
}
# Added this location entry to nginx, my videos were NOT in the static folders, they were in the media folders. I feel dumb but hopefully this will help someone else out there!
location /media/ {
alias /home/website/my_python_virtual_env/my_project/media_folder_containing_mp4_videos/;
}
location / {
# gunicorn to django
include proxy_params;
proxy_pass http://unix:/run/gunicorn.sock;
}
}
关于django - 如何配置 nginx 以将 mp4 视频正确提供给 Safari?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52319533/