Как настроить nginx для правильной передачи видео в формате mp4 в 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 для обслуживания видеоконтента. Я бы не хотел использовать сторонний сервер, так как это для небольшого проекта :).

Мой вопрос в том, как правильно настроить 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

Вы смотрели nginx.com/blog/smart-efficient-byte-range-caching-nginx?

Offbeatmammal 14.09.2018 09:17
8
1
8 143
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Мой экземпляр nginx не был настроен для обслуживания носителя. Все из /media/ обслуживается django. 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;
    }
}

У меня очень похожая проблема: видео не в статическом каталоге, а nginx вообще не может воспроизводить видео в chrome + safari. Могу я спросить вопрос? Каталог / media / не используется тег <video>, где используется только / static /. Почему важно добавить / media / в конфигурационный файл nginx?

user6101147 04.05.2019 08:04

Другие вопросы по теме