HTML5-Videoelement wird nicht auf iPhone/iPad geladen

Question

Dies ist eine wiederholte Frage, aber ich konnte keine Lösung finden, die für mich funktioniert. Ich kann nicht herausfinden, warum meinElement nicht auf iPhone oder iPad geladen wird.

Hier ist mein HTML-Code:

<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> 

Das Video spielt in Google Chrome gut, aber hat Probleme auf einem iPhone oder iPad angezeigt werden. Zusätzlich habe ich die folgende meiner .htaccess Datei hinzugefügt:

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

Von allen Ressourcen, die ich gelesen habe, sollte ich meine Basen haben gut abgedeckt in den meisten Browsern/Geräte dieses <video> Element zu spielen, aber es ist immer noch funktioniert nicht. Hier ist ein Bild von meinem Video auf einem iPhone:

Answer 1

Es gibt ein paar Möglichkeiten.

Die erste ist das Hinzufügen der Accept-Ranges: bytes HTTP-Response-Header, um zu versuchen, wie Safari Web Content Guide: Configuring Your Server

hier gezeigt Wenn das nicht funktioniert, dann es möglich ist, dass Sie das Video mit einigen anderen Kodierung Flags neu codieren müssen. Ich hatte Erfolg mit ffmpeg und Parameter wie folgt:

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