Как играть в mp4 видео файл с HTML5 video tag на iOS (iPhone и iPad)?

Я хочу отображать видео HTML5 для своих пользователей с помощью тега video. Для Firefox, Chrome и Opera WEBM работает так, как ожидалось. В Safari на Windows и Mac моя версия MP4 тоже работает. Единственная проблема, с которой я сталкиваюсь, заключается в том, что он не будет играть на iPad и iPhone (Safari, конечно).

создание видео

MP4 (h.264 + acc-lc) преобразуется следующим образом (с профилем: базовый уровень и уровень 3.0 для максимальной совместимости с iOS):

  • поток #0:0(англ): видео: кодек H264 (ограниченная базовая линия) (avc1 / 0x31637661), yuv420p, 640x352, 198 кб/с, 17 кадров в секунду, 17 tbr, 17408 tbn, 34 tbc (по умолчанию)
  • поток #0: 1 (eng): аудио:aac (LC) (mp4a / 0x6134706D), 48000 Гц, стерео, fltp, 56 КБ/С (по умолчанию)

Edit: весь выход ffprobe (небольшие изменения битрейта и т. д. к вышеупомянутому):

Metadata:
major_brand     : isom
minor_version   : 512
compatible_brands: isomiso2avc1mp41
encoder         : Lavf56.30.100
Duration: 00:01:00.05, start: 0.046440, bitrate: 289 kb/s
Stream #0:0(eng): Video: h264 (Constrained Baseline) 
(avc1 /0x31637661), yuv420p, 640x352, 198 kb/s, 25 fps, 25 tbr, 
12800 tbn, 50 tbc (default)
Metadata:
  handler_name    : VideoHandler
Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, 
stereo, fltp, 85 kb/s (default)
Metadata:
  handler_name    : SoundHandler

я нашел различные требования для устройств iOS, как этой и этой, и кто-то упомянуто, чтобы добавить формат пикселей yuv420p при преобразовании.

в самом деле ffmpeg cmd выглядит так:

ffmpeg -i __inputfile__ -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -b:v 200K -r 17 -bt 800K -c:a libfdk_aac -b:a 85k -ar 44100 -y __outputfile_lowversion__.mp4

отображать видео

С помощью Modernizr я определяю, какой формат "поддерживается", и добавляю его в src или video тег. Последнее, что добавляет правильный тип MIME. Для mp4 я добавляю type="video/mp4". Полный код video тег есть:

<video class="p-video" preload="auto" autoplay="" type="video/mp4" src="http://full.url/to/video_low.mp4"/>

я пробовал различные способы: собственная реализация с собственным интерфейсом, элементы управления и прочее от поставщиков браузера и видео.js просто проверить, не слишком ли я studip для этого. Все работают в перечисленных выше средах, за исключением iPhone и iPad.

Я читал эту статью на видео в интернете, особенно эта часть и обслуживать только" правильный "файл с" правильным " типом без posterнабор атрибутов.

Мой Apache имеет

AddType video/mp4                      mp4 m4v f4v f4p
AddType video/ogg                      ogv
AddType video/webm                     webm

и байтовые диапазоны включены. Это необходимо для получения частичного содержимого с сервера.

кто-нибудь знает, что там происходит? Заранее спасибо!

Edit: Safari и Chrome оба броска MEDIA_ERR_SRC_NOT_SUPPORTED ошибка на iPad. Должна быть проблема с кодировкой.

6
ffmpeg html5 ipad iphone mp4

2 ответов

попробуйте включить '' - или определить src по-разному.

 <video src="http://example.com/path/mymovie.mov"
         controls
         height=340 width=640
         poster="http://example.com/path/poster.jpg">
  </video>

проверьте эту статью " о HTML5 аудио и видео для Safari "(руководство разработчиков)

кроме того, хорошая стабильная помощь HTML5 <video> тег для iPad / iPhone is JW player. (работает с ним)

 jwplayer('video').setup({
     flashplayer: '/Scripts/jwplayer/player.swf',
     file: 'seanpenn.mp4',
     autostart: false,
     controlbar: 'over',
     image: 'spicoli.jpg',
     width: 295,
     height: 214,
     skin: '/Scripts/jwplayer/glow.xml',
     stretching: 'exactfit'
 });
2

Я нашел причину, по которой iPad и iPhone не будут играть. моя папка имеет ограниченный доступ через htaccess для защиты бета-приложения. Firefox и так далее перенаправляют имя пользователя и пароль на все запросы, safari на Mac снова запрашивает учетные данные, но браузеры на iPad и iPhone этого не делают. Чтобы быстро проверить это Я удалил защиту папки, и она работала нормально. Спасибо за все вклады и мысли о моей проблеме!

2