Как настроить nginx для корректной работы с mp4-видео в Safari? - PullRequest
Новая
       22

Как настроить nginx для корректной работы с mp4-видео в Safari?

0 голосов
/ 13 сентября 2018

Я пытаюсь использовать тег видео для отображения видео в сафари.

Вот мой фрагмент 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, images) обслуживаются должным образом.

Проблема, с которой я сталкиваюсь, заключается в том, что когда safari запрашивает видео, nginx должен вернуть 206 partial content ответ. Тем не менее, он возвращает 200 OK со всем видео (я думаю, что весь файл возвращается). Но Safari не запрашивал видео целиком, он запрашивал диапазон видео, используя заголовок range.

Так что это приводит к тому, что видео не воспроизводится в Safari. В настоящее время мои текущие настройки работают в Chrome и Firefox.

Я использую nginx для показа видеоконтента. Я хотел бы избежать использования стороннего сервера, так как это для небольшого проекта:).

У меня вопрос: как правильно настроить nginx для показа видео в сафари? Я знаю, что nginx игнорирует заголовок range в запросе. Есть ли способ заставить nginx обратить внимание на этот заголовок?

Вот мой конфиг nginx в /etc/nginx/sites-available/myproject: 

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

1 Ответ

0 голосов
/ 21 декабря 2018

Я чувствую себя глупо, публикуя это, но здесь была моя проблема.

Мой экземпляр nginx не был настроен для обслуживания носителя. Все, что от /media/ обслуживалось Джанго. Django неправильно обслуживает видео mp4 для сафари, потому что оно не работает с Range запросами. Это будет служить им достаточно правильно, чтобы хром работал, хотя! ;)

Исправление было простым. Добавьте запись местоположения для /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;
    }
}
...