web-dev-qa-db-ja.com

Safariにmp4ビデオを適切に提供するようにnginxを構成するにはどうすればよいですか？

ビデオタグを使用してサファリでビデオを表示しようとしています。

これが私の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が返されます（ファイル全体が返されると思います）。しかし、サファリはビデオ全体を要求したのではなく、rangeヘッダーを使用してビデオの範囲を要求しました。

そのため、Safariでビデオが再生されなくなります。現状では、私の現在の設定はChromeとFirefoxで機能します。

私はnginxを使用してビデオコンテンツを提供しています。これは小さなプロジェクト用なので、サードパーティのサーバーの使用は避けたいと思います:)。

私の質問は、サファリにビデオを提供するためにnginxを適切に設定するにはどうすればよいですか？ nginxがリクエストのrangeヘッダーを無視していることを知っています。そのヘッダーに注意を払うようにnginxに指示する方法はありますか？

これが/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
djangonginxsafarihtml5-videogunicorn
6
teewuane

これを投稿するのはばかげていると思いますが、ここに私の問題がありました。

私のnginxインスタンスはメディアを提供するように設定されていませんでした。 /media/からのものはすべてDjangoによって提供されていました。 Djangoは、Rangeリクエストでは機能しないため、サファリのmp4ビデオを適切に提供しません。chromeでも動作する！;）

修正は簡単でした。 /media/の場所エントリをWebサイトの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;
    }
}
2
teewuane