HTML5-Video-Tag funktioniert nicht in Safari, iPhone und iPad

Ich versuche, eine HTML5-Webseite zu erstellen, auf der es ein kleines Video wie 13s gibt. Ich habe die Flash-Version dieses Videos in das 3-Format konvertiert: .ogv mit fireFogg, .webm mit Firefogg und .mp4 mit der HandBrake-Anwendung das HTML-Skript Ich habe auf meiner Seite verwendet:

<video  width="800" height="640" loop preload="false" autoplay  controls tabindex="0">
  <source src="xmasvideo/video.mp4" type="video/mp4" />
  <source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
  <source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>

Das Video funktioniert in Chrome und FireFox einwandfrei, aber weder in Safari auf dem Desktop noch auf dem iPhone oder iPad. Die Ausgabe ist einfach eine leere Seite, auf der die Steuerelemente des Video-Tags angezeigt werden, aber nichts geladen ist

Beachten Sie, dass die von mir verwendete Safari-Version HTML5-Video unterstützt

Ich hatte das gleiche Problem mit Apple-Geräten wie iPhone und iPad. Ich habe den Energiesparmodus ausgeschaltet und es hat funktioniert. Sie sollten auch folgende playsinlineAttribute in Video-Tags einfügen:

<video class="video-background" autoplay loop muted playsinline>

Es hat nur unter Einbeziehung funktioniert playsinline.

Eine weitere mögliche Lösung für zukünftige Sucher: (Wenn Ihr Problem kein Mimetyp-Problem ist.)

Aus irgendeinem Grund werden Videos nicht auf dem iPad abgespielt, es sei denn, ich setze das Kontrollkästchen = "true".

Beispiel: Das hat bei mir auf dem iPhone funktioniert, aber nicht auf dem iPad.

<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

Und das funktioniert jetzt sowohl auf dem iPad als auch auf dem iPhone:

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

Ihr Webserver unterstützt möglicherweise keine HTTP-Bytebereichsanforderungen. Dies ist bei dem von mir verwendeten Webserver der Fall. Das Ergebnis ist, dass das Video-Widget geladen wird und eine Wiedergabeschaltfläche angezeigt wird. Das Klicken auf die Schaltfläche hat jedoch keine Auswirkung. - Das Video funktioniert in FF und Chrome, jedoch nicht in iPhone oder iPad.

Lesen Sie hier auf mobiforge.com mehr über Byte-Range-Anfragen in Anhang A: Streaming für Apple iPhone :

Zunächst fordert der Safari-Webbrowser den Inhalt an. Wenn es sich um eine Audio- oder Videodatei handelt, wird der Media Player geöffnet. Der Media Player fordert dann die ersten 2 Bytes des Inhalts an, um sicherzustellen, dass der Webserver Anforderungen für den Bytebereich unterstützt. Wenn es sie unterstützt, fordert der Media Player des iPhones den Rest des Inhalts nach Bytebereichen an und spielt ihn ab.

Vielleicht möchten Sie im Internet nach "iphone mp4 byte-range" suchen.

Wenn Ihre Videos durch ein sitzungsbasiertes Anmeldesystem geschützt sind, kann Safari sie nicht laden. Dies liegt daran, dass Safari eine erste Anfrage für das Video stellt und die Aufgabe dann an QuickTime übergibt, das eine weitere Anfrage stellt. Da Safari die Sitzungsinformationen enthält, wird die Authentifizierung bestanden, QuickTime jedoch nicht.

Sie können dies sehen, wenn Sie Ihr Serverzugriffsprotokoll anzeigen ... zuerst die Anforderung von Safari, dann die Anforderung von QuickTime. Andere Browser stellen nur eine einzige Anfrage vom Browser selbst.

Wenn dies Ihr Problem ist, müssen Sie möglicherweise den Videozugriff überarbeiten, um temporäre Token oder einen zeitlich begrenzten Zugriff von der ursprünglichen Anforderung zu verwenden. Ich werde diese Antwort aktualisieren, wenn ich eine direktere Lösung finde.

Für die Zukunft sucht auch, hatte ich eine mp4 - Datei , dass ich mit Handbremse verkleinerter Verwendung handbrake-gtkvon apt-get, zum Beispiel sudo apt-get install handbrake-gtk. In Ubuntu 14.04 bietet das handbrakeRepository keine sofort einsatzbereite Unterstützung für MP4. Ich habe die Standardeinstellungen beibehalten, die Audiospur entfernt und eine * .M4V-Datei generiert. Für diejenigen, die sich fragen, sind sie der gleiche Container, aber M4V wird hauptsächlich unter iOS verwendet, um in iTunes zu öffnen.

Dies funktionierte in allen Browsern außer Safari:

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

Ich habe den MIME-Typ zwischen video/mp4und video/m4vohne Wirkung geändert . Ich habe auch das Hinzufügen des controlAttributs getestet und wieder keinen Effekt.

Dies funktionierte in allen getesteten Browsern, einschließlich Safari 7 auf Mavericks und Safari 8 auf Yosemite. Ich habe einfach dieselbe m4v-Datei (die eigentliche Datei, nicht nur den HTML-Code) in mp4 umbenannt und erneut auf unser CDN hochgeladen:

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

Ich denke, Safari erwartet voll und ganz einen MP4 mit dem Namen. Keine andere Kombination von Datei und MIME-Typ hat bei mir funktioniert. Ich denke, die anderen Browser entscheiden sich zuerst für die WEBM-Datei, insbesondere Chrome, obwohl ich mir ziemlich sicher bin, dass die Quellenliste die erste Quelle auswählen sollte, die technisch unterstützt wird.

Dies hat jedoch das Videoproblem auf iOS-Geräten nicht behoben (iPad 3 "das neue iPad" und iPhone 6 getestet).

Fügen Sie einfach ein mutedAttribut hinzu und alles wird gut funktionieren.

Die Quelle dieser Antwort ist hier: https://webkit.org/blog/6784/new-video-policies-for-ios/

Standardmäßig gelten für WebKit die folgenden Richtlinien:

<video autoplay> Elemente berücksichtigen jetzt das Autoplay-Attribut für Elemente, die die folgenden Bedingungen erfüllen:

• <video> Elemente können ohne Benutzergeste automatisch wiedergegeben werden, wenn ihr Quellmedium keine Audiospuren enthält.
• <video muted> Elemente können auch ohne Benutzergeste automatisch wiedergegeben werden.
• Wenn ein <video>Element eine Audiospur erhält oder ohne Benutzergeste die Stummschaltung aufhebt, wird die Wiedergabe angehalten.
• <video autoplay> Elemente werden erst abgespielt, wenn sie auf dem Bildschirm angezeigt werden, z. B. wenn sie in das Ansichtsfenster gescrollt, über CSS sichtbar gemacht und in das DOM eingefügt werden.
• <video autoplay> Elemente werden angehalten, wenn sie nicht mehr sichtbar sind, z. B. indem sie aus dem Ansichtsfenster gescrollt werden.

<video> Elemente werden nun die play () -Methode für Elemente berücksichtigen, die die folgenden Bedingungen erfüllen:

• <video> Elemente können ohne Benutzergeste () abgespielt werden, wenn ihr Quellmedium keine Audiospuren enthält oder wenn ihre stummgeschaltete Eigenschaft auf true gesetzt ist.
• Wenn ein <video>Element eine Audiospur erhält oder ohne Benutzergeste die Stummschaltung aufhebt, wird die Wiedergabe angehalten.
• <video> Elemente können abgespielt werden (), wenn sie auf dem Bildschirm nicht sichtbar sind oder sich außerhalb des Ansichtsfensters befinden.
• video.play () gibt ein Versprechen zurück, das abgelehnt wird, wenn eine dieser Bedingungen nicht erfüllt ist.

Auf dem iPhone können <video playsinline>Elemente jetzt inline abgespielt werden und wechseln nicht automatisch in den Vollbildmodus, wenn die Wiedergabe beginnt. <video>Elemente ohne Wiedergabe-Inline-Attribute benötigen weiterhin den Vollbildmodus für die Wiedergabe auf dem iPhone. Wenn Sie den Vollbildmodus mit einer Pinch-Geste verlassen, werden <video>Elemente ohne Inline-Wiedergabe weiterhin inline abgespielt.

Ich habe festgestellt, dass Safari zwar HTML5-Video unterstützt, der Quicktime Player jedoch installiert sein muss, damit dies funktioniert. Auf einer von mir erstellten Site, die HTML5-Video verwendet, wird der Benutzer bei der Verwendung von Safari benachrichtigt und teilt ihm mit, dass Quicktime installiert sein muss, da er sonst nur Video-Transkripte sehen kann. Hoffe das hilft.

Ich habe seltsame Probleme mit nicht vertrauenswürdigen SSL-Entwicklungszertifikaten gesehen, bei denen Mobile Safari Ihre Seite recht gerne bereitstellt, sich jedoch weigert, ein Video für ein gefälschtes SSL-Zertifikat bereitzustellen, selbst wenn Sie das Zertifikat akzeptiert haben.

Zum Testen können Sie das Video an einer anderen Stelle bereitstellen - oder zu http (für die gesamte Seite) wechseln und es sollte abgespielt werden.

Das Hinzufügen von "PlaySinline" funktioniert für mich auf Iphone und Ipa, wenn Sie nichts dagegen haben, dass Ihr Video stummgeschaltet wird.

<video muted playsinline>
  <source src="..." type="video/mp4">
</video>

Wenn Sie nicht möchten, dass Ihr Video stummgeschaltet wird, aber dennoch automatisch wiedergegeben werden soll, versuchen Sie möglicherweise, das stummgeschaltete Attribut mit js zu entfernen: So heben Sie die Stummschaltung von HTML5-Videos mit einer stummgeschalteten Requisite auf

Ab iOS 6.1 ist es nicht mehr möglich, Videos automatisch auf dem iPad abzuspielen. Laut Apple-Dokumentation funktioniert die Autoplay-Funktion nicht auf Safari auf allen iOS-Geräten, einschließlich iPad:

"Apple hat die Entscheidung getroffen, die automatische Wiedergabe von Videos auf iOS-Geräten sowohl durch Skript- als auch durch Attributimplementierungen zu deaktivieren.

In Safari sind unter iOS (für alle Geräte, einschließlich iPad), bei denen sich der Benutzer möglicherweise in einem Mobilfunknetz befindet und pro Dateneinheit berechnet wird, das Vorladen und das automatische Abspielen deaktiviert. Es werden keine Daten geladen, bis der Benutzer sie initiiert.""

Weitere Informationen hierzu finden Sie in dieser Apple-Dokumentation

Für eine .mp4 funktioniert dies (Safari Mobile & Desktop):

<video height="250" width="250" controls>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

Die controls=”true”in einem obigen Beitrag erwähnten machen für mich keinen Sinn, da Apple sagt, dass Sie nur Steuerelemente alleine verwenden.

Referenz: „Um HTML5-Audio oder -Video zu verwenden, erstellen Sie zunächst ein oder -Element, geben Sie eine Quell-URL für das Medium an und geben Sie das Steuerelementattribut an. <video src="http://example.com/path/mymovie.mp4" controls></video>”

Quelle: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

In meinen Geschäften (ein kleiner Exkurs) : Ich habe festgestellt, dass das Hochladen von Videos vom iPhone diese als .quicktime an den Server sendet. Ironischerweise ist dies das Problem, wenn versucht wird, das Video auf einer Safari vom Server abzuspielen. (Mobile & Desktop).

Also , wenn (wie ich) Sie erleben eine .quicktime (oder etwas anderes als .mp4) Problem in Safari , hier eine Arbeit um von Apple zur Verfügung gestellt. Beachten Sie, dass ich es noch nicht selbst getestet habe und auf einen Blick nicht so glücklich damit bin, nur um weitere Informationen bereitzustellen.

Referenz: „Auf das QuickTime-Plug-In zurückgreifen Es gibt eine einfache Möglichkeit, auf das QuickTime-Plug-In zurückzugreifen, das für fast alle Browser funktioniert. Laden Sie die von Apple bereitgestellte vorgefertigte JavaScript-Datei ac_quicktime.js aus HTML Video Example und herunter Fügen Sie es in Ihre Webseite ein, indem Sie die folgende Codezeile in Ihren HTML-Kopf einfügen: <script src="ac_quicktime.js" type="text/javascript"></script>“

Quelle: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP400095-

Update: Wenn .quicktime zum .movvorherigen Hochladen auf den Server umbenannt werden soll (im Dateityp "data: video / mov;" von base64), überspringen Sie ac_quicktime.js. . . funktioniert dann im HTML-Video-Tag; Hackerdy ​​Hack.

Durch die Verwendung dieses Codes wird das Video in allen Browsern auf Safari auch mit iOS-Geräten abgespielt ... Machen Sie es für alle (ich habe es verwendet und es funktioniert einwandfrei)

`

<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
    	<source src="video/video.mp4" type="video/mp4"></source>
		<source src="video/video.webm" type="video/webm"></source>
		<source src="video/video.mov" type="video/mov"></source>
</video>

`

Ich hatte ein ähnliches Problem, bei dem Videos in einem <video>Tag nur auf Chrome und Firefox abgespielt wurden, nicht jedoch auf Safari. Hier ist, was ich getan habe, um es zu beheben ...

Ein seltsamer Trick, den ich gefunden habe, war, zwei verschiedene Verweise auf Ihr Video zu haben, einen in einem <video>Tag für Chrome und Firefox und einen in einem <img>Tag für Safari. Unterhaltsame Tatsache, Videos werden tatsächlich in einem <img>Tag auf Safari abgespielt. Schreiben Sie danach ein einfaches Skript, um das eine oder andere auszublenden, wenn ein bestimmter Browser verwendet wird. Also zum Beispiel:

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

Dies hilft auch bei der Lösung des Problems eines dünnen schwarzen Rahmens / Rahmens bei einigen Videos in bestimmten Browsern, bei denen sie falsch gerendert werden.

Ich hatte dieses Problem, bei dem die MP4-Wiedergabe in Safari nicht funktionierte, aber in anderen Browsern war es in Ordnung. Der Fehler, den ich in der Konsole sah, war: error media src wird nicht unterstützt. In meinem Fall stellte sich heraus, dass dies ein Problem mit dem MIME-Typ war, aber nicht, weil es in IIS nicht als MIME-Typ deklariert wurde, sondern zweimal deklariert wurde (einmal in IIS und auch in einer web.config-Datei). Ich habe dies herausgefunden, indem ich versucht habe, die MP4-Datei lokal auf den Server herunterzuladen. Ich habe die Konfigurationsdatei vom Speicherort des Inhalts entfernt, den ich abspielen wollte, und das Problem wurde behoben. Ich hätte den MIME-Typ einfach aus der Datei web.config löschen können, aber in diesem Fall wurde die Datei web.config nicht benötigt.

Verwenden Sie für IOS nur die MP4-Quelldatei. Ich habe im neuesten Safari-Browser ein Problem festgestellt, bei dem der Safari-Browser die Quelldatei nicht korrekt erkennen kann. Aus diesem Grund funktioniert die automatische Wiedergabe von Videos nicht.

Schauen wir uns das folgende Beispiel an -

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
        <source src="video/video.webm" type="video/webm"></source>
     </video>

Da ich mp4 verwendet habe, webm in Quelldateien. Safari unterstützt webm nicht, aber in der neuesten Safari-Version wird webm ausgewählt und die automatische Wiedergabe von Videos schlägt fehl.

Um die automatische Wiedergabe über den unterstützten Browser hinweg zu ermöglichen, würde ich empfehlen, zuerst den Browser zu überprüfen und darauf basierend Ihr HTML zu generieren.

Verwenden Sie für Safari unten HTML.

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

Für andere als Safari,

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.webm" type="video/webm"></source>
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

Ich hatte das gleiche Problem - stellen Sie sicher, dass die URL für das Video-Asset von einer sicheren Domain stammt. Unsere Entwicklungsumgebung ist http, während die Produktion sicher ist. Da das Video über einen relativen Pfad referenziert wurde, funktionierte es nicht in der Entwicklung. Scheint ein Problem zu sein, dass Apple Videos benötigt, um sicher zu sein ...

funktioniert, aber MacOs hat kürzlich eine Autoplay-Richtlinie für Benutzer: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ . Ich habe das gleiche Problem mithilfe einer Schaltfläche behoben, um den Sound zu aktivieren:

ejm:

<video autoplay loop muted id="myVideo">
  <source src="amazon.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos...
</video>

<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>

<script>
var vid = document.getElementById("myVideo");
function disableMute() { 
  vid.muted = false;
}
</script>

Ich habe das gleiche Problem konfrontiert. Weil meine Videobildergröße zu groß war. dh.2248 px Apple-Unterstützung H.264 Baseline Profile Level 3.0-Video, bis zu 640 x 480 bei 30 fps. Beachten Sie, dass B-Frames im Baseline-Profil nicht unterstützt werden. Überprüfen Sie dies für weitere Informationen

Was in meinem Fall geholfen hat, war das Löschen der Audiospur. Früher war es still, aber es musste komplett verschwunden sein.

Auf Ubuntu:

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

Und Safari / Desktop beginnen mit der Wiedergabe des Videos

Für meinen Anwendungsfall gab es zwei Dinge :

1. Ich habe die Richtlinie des neuen Attributs / Webkits nicht verwendetplaysinline .
2. Mein Video- / MIME -Typ oder Whathathell war nicht richtig codiert, daher habe ich diese Site verwendet, um ihn in alle benötigten Formate zu konvertieren : https://pt.converterpoint.com/

Ö/

Ich hatte genau das gleiche Problem, mein HTML-Video-Tag lief gut auf Chrome & Mozilla, auf Safari - Steuerelemente wurden angezeigt, aber das Video war leer. Ich habe versucht, mit allen oben genannten Attributen zu spielen, stumm zu entfernen / hinzuzufügen, playInline usw. und nichts hat funktioniert. Das Problem war auch mit den hier beschriebenen Servern. Ich hatte das - habe nicht funktioniert:

<video 
  muted
  playsInline
  controls
  style={{ width: `100%` }}>
  <source src={MfMfVideo} type="video/mp4" />
  <source src={MfMfVideoWebM} type="video/webm" />
</video>

und ich habe gerade mein Video in eine externe Bibliothek verschoben und mir geht es jetzt auf Safari gut, es funktioniert gut:

<video 
  muted
  playsInline
  controls 
  style={{ width: `100%` }}>
  <source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
  <source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

Bei mir hat nichts funktioniert, außer dass das Video auf unter 30 MB komprimiert wurde. Das hat den Trick gemacht, aber mit sehr schlechter Komprimierung.

Wenn jemand das gleiche Problem hat, habe ich es gelöst, indem ich die Byte-Range-Unterstützung auf meinem Server aktiviert habe. Es scheint, dass Safari Bytebereichsanforderungen erfordert. In meinem Fall benutze ich NGINX und musste proxy_force_ranges on;meiner Konfigurationsdatei hinzufügen . Dank dieser Antwort !