HTML5 элемент видео не загружается на iPhone/iPad

Question

Это повторяющийся вопрос, но я не смог найти решение, которое работает для меня. Я не могу понять, почему мой элемент <video> не загружается на iPhone или iPad.

Вот мой HTML код:

<div class="embed-responsive embed-responsive-16by9"> 
<video id="movie" preload controls autobuffer> 
<source src="/digital-portfolio/video/client.mp4" type="video/mp4"> 
<source src="/digital-portfolio/video/client.webm" type="video/webm"> 
<source src="/digital-portfolio/video/client.ogv" type="video/ogg"> 
</video> 
</div> 

видео играет хорошо в Google Chrome, но имеет проблемы, отображающие на iPhone или IPad. Кроме того, я добавил следующее к моему .htaccess файлу:

# Video 
AddType video/mp4         mp4 m4v f4v f4p 
AddType video/ogg         ogv 
AddType video/webm         webm 
AddType video/x-flv         flv 

Из всех ресурсов, которые я прочитал, я покрыл свои базы хорошо играть этот <video> элемент на большинство браузеров/устройствах, но он по-прежнему не работает. Вот изображение моего видео на iPhone:

Answer 1

Там в несколько возможностей.

Первый попробовать добавляет заголовок ответа на Accept-Ranges: bytes HTTP, как показано здесь Safari Web Content Guide: Configuring Your Server

Если это не сработает, то вполне возможно, что вам, возможно, придется перекодировать видео с некоторыми другими флагами кодирования. У меня был успех с ffmpeg и такими параметрами, как:

ffmpeg -i %1 -pass 1 -vcodec libx264 -preset slow -profile:v baseline -b:v 2000k -b:a 128k -r 25 -g 50 -vf setfield=1 -f mp4 -threads 0 -y %1-hq.mp4 
ffmpeg -i %1 -pass 2 -vcodec libx264 -preset slow -profile:v baseline -b:v 2000k -b:a 128k -r 25 -g 50 -vf setfield=1 -f mp4 -threads 0 -y %1-hq.mp4