Загруженные видео не воспроизводятся в мобильном браузере, но воспроизводятся на рабочем столе broswer

Question

Я установил сервер (gunicorn и nginx) для загрузки видео с использованием Python/Django и просмотра их в браузере. Видеопроигрыватель, который я использую, - videojs. Все видеоролики - h.264 mp4. Размер видео составляет 5-40 МБ.

Видеозагрузка прекрасна, и я могу просматривать загруженное видео на рабочем столе и в браузере для ноутбука.

Проблема в том, что я не могу смотреть те же видео (которые воспроизводятся в браузере рабочего стола) на мобильных устройствах.

Я получаю эту ошибку:

This video could not be loaded, either because the server or network failed or because the format is not supported.

Что не так?

Update

Однако я проверил мобильные браузеры с поддержкой WebM видео в мобильном и Opera и Chrome воспроизводит видео отлично. Это команда, которую я использовал для WebM:

ffmpeg -i test2.mov -codec:v libvpx -quality good -cpu-used 0 -b:v 600k -maxrate 600k -bufsize 1200k -qmin 10 -qmax 42 -vf scale=-1:480 -threads 4 -codec:a vorbis -b:a 128k -strict -2 test2_webmmm.webm 

И это для h.264 mp4 (только рабочий Firefox):

ffmpeg -i inputfile.avi -codec:v libx264 -profile:v baseline -preset slow -b:v 250k -maxrate 250k -bufsize 500k -vf scale=-1:360 -threads 0 -codec:a libfdk_aac -b:a 96k output.mp4 

Update

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'faststart.mp4': 
    Metadata: 
    major_brand  : isom 
    minor_version : 512 
    compatible_brands: isomiso2avc1mp41 
    encoder   : Lavf56.40.100 
    Duration: 00:03:36.56, start: 0.046440, bitrate: 350 kb/s 
    Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1/0x31637661), yu 
v420p, 640x360 [SAR 1:1 DAR 16:9], 249 kb/s, 23.98 fps, 23.98 tbr, 24k tbn, 47.9 
5 tbc (default) 
    Metadata: 
     handler_name : VideoHandler 
    Stream #0:1(und): Audio: aac (LC) (mp4a/0x6134706D), 44100 Hz, stereo, flt 
p, 96 kb/s (default) 
    Metadata: 
     handler_name : SoundHandler 

Update

Вот некоторые примеры которые я собрал по пути:

1. Некоторые из видеороликов, которые я загрузил с YouTube и загрузил их на сервер без кодирования, хорошо воспроизводятся во всех браузерах.
2. Однако, если я кодирую одно и то же видео (видео YouTube) и загружаю его на сервер, он не воспроизводится на мобильных устройствах, а только на настольных браузерах.
3. Видео, которые я взял с мобильного (Samsung s4 и iPhone 6), и закодировать его с помощью ffmpeg, не воспроизводятся в мобильных браузерах, только на настольных браузерах.
4. Но URL-адрес того же видео (который я взял с мобильного), который размещен на Amazon s3, хорошо играет во всех браузерах (даже без кодированных видео).

Answer 1

Что официальная документация tells:

Streaming и AAC плеер Совместимость

By default when encoding AAC files using libfdk_aac the metadata ('moov' atom) is written after the audio stream ('mdat' atom) at the end of the file. In order to enable streaming of the encoded file the 'moov' atom has to be moved before the 'mdat' atom. In addition some AAC player implementations have issues decoding such files.

FFmpeg предлагает опцию '-movflags + FastStart' охватывающую ту функциональность, которая может быть использована при кодировании:

ffmpeg -i input.wav -c:a libfdk_aac -movflags +faststart output.m4a 

Existin г файлы m4a могут быть изменены с помощью «программы, которая распространяется с FFmpeg в«кварты-Faststart каталог инструментов '

qt-faststart input.m4a output.m4a 

Таким образом, вы можете попробовать это:

ffmpeg -i inputfile.avi -codec:v libx264 -profile:v baseline -preset slow -b:v 250k -maxrate 250k -bufsize 500k -vf scale=-1:360 -threads 0 -codec:a libfdk_aac -movflags +faststart output.mp4 

Answer 2

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

Он также воспроизводится из Интернета, используя указанную выше ссылку (54.169.222.113/video/62) в Chrome на Mac, но не в Safari. Он также будет воспроизводиться из веб-ссылки и Android-планшета (Samsung Note) в браузере по умолчанию и в Chrome.

Видео само по себе прекрасно работает с рабочего стола на Safri. Выполнение этого обходит ваш сайт, включая ваш скрипт и HTML и проигрыватель video.js.

Проверяя сайт videojs.com, они используют ту же версию video.js (4.12.11), что и вы, но когда вы смотрите на источник, у них, похоже, есть другое количество строк, что на самом деле не должно быть с тем же номером версии. Вполне возможно, что они просто добавили некоторые изменения для тестирования, но я думаю, что стоит пересмотреть свой HTML и video.js снова и попытаться сопоставить его как можно ближе с сайтом videojs.com (который Я думаю, вы использовали в качестве отправной точки, поскольку она близка, но не совсем такая же на данный момент).

UPDATE

Ok - Я скачал видео с вашей ссылке точно так, как вы предоставили выше, 1437658474_37_faststart.mp4, и добавить его в качестве простого статического файла в локальном веб-сервере.

видео играли хорошо в следующих клиентах, которые подключены к серверу по сети:

• Mac Safari
• Mac Chrome
• Android стандартных и хромовых браузеры
• iPhone сафари

Я также отредактировал страницу video.com (локально используя инструменты браузера) и добавил ваше видео, и это будет не играть.

Оказывается, что есть тонкая проблема с видео на некоторых браузерах, который проявляется при использовании videojs - проблема может быть продемонстрирована довольно легко с помощью вашего сайта:

• видео никогда не воспроизводит на сафари на УДС
• видео всегда воспроизводится на Chrome на MAC

если вы не смогли решить проблему в автономном режиме как-то (если это так, пожалуйста, дайте нам знать, как это интересная проблема!), я думаю, что это стоило бы его поднять на форумах videojs.

Answer 3

Я решил свою проблему, выполнив двухкоординатную кодировку с помощью qtfaststart (python). Сначала я использовал -movflags +faststart, и не знаю, почему это не сработало. Но теперь он работает практически во всех браузерах.

Это код, который я использовал:

первый проход

ffmpeg -i mobile.mp4 -codec:v libx264 -profile:v baseline -preset slow -b:v 250k -maxrate 250k -bufsize 500k -vf scale=-1:360 -threads 0 -codec:a libfdk_aac -movflags +faststart mobile-output.mp4 

второй проход

qtfaststart mobile-output.mp4 qt-mobile-output.mp4