webentwicklung-frage-antwort-db.com.de

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

Ich versuche, eine HTML5-Webseite zu erstellen, in der es ein kleines Video wie 13s gibt. Ich habe die Flash-Version dieses Videos in das Format 3 konvertiert: .ogv mit fireFogg, .webm mit firefogg auch und .mp4 mit der HandBrake-Anwendung das HTML-Skript Ich habe in 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 einwandfrei in Chrome und FireFox, funktioniert 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 wird geladen

Beachten Sie, dass die Safari-Version, die ich habe, HTML5-Video unterstützt

71

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

Aus irgendeinem Grund würden Videos nicht auf dem iPad abgespielt, es sei denn, ich setze die Controls = "True" -Flag.

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

Ich hatte das gleiche Problem mit Apple Geräten wie iPhone und iPad, ich habe den Energiesparmodus ausgeschaltet und es hat funktioniert und Sie sollten auch das playsinline Attribut in das Video aufnehmen tag like this:

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

Es funktionierte nur, wenn playsinline eingeschlossen wurde.

32
parag patel

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

Lesen Sie mehr hier auf mobiforge.com über Bytebereichsanforderungen 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 Bytebereichsanforderungen unterstützt. Wenn es diese unterstützt, fordert der Mediaplayer des iPhones den Rest des Inhalts nach Bytebereichen an und spielt ihn ab.

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

25
KajMagnus

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

Sie können dies sehen, wenn Sie Ihr Serverzugriffsprotokoll anzeigen ... zuerst die Anfrage von Safari, dann die Anfrage 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 aus zu verwenden. Ich werde diese Antwort aktualisieren, wenn ich eine direktere Lösung finde.

15
arlomedia

Auch für zukünftige Suchvorgänge hatte ich eine mp4-Datei, die ich mit Handbrake mit handbrake-gtk Von apt-get Verkleinert habe, z. Sudo apt-get install handbrake-gtk. In Ubuntu 14.04 unterstützt das Repository handbrake MP4 nicht ab Werk. Ich habe die Standardeinstellungen verlassen, die Audiospur entfernt und eine * .M4V-Datei erstellt. Für diejenigen, die sich fragen, sind sie der gleiche Container, aber M4V wird hauptsächlich unter iOS zum Öffnen in iTunes verwendet.

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 ohne Wirkung zwischen video/mp4 Und video/m4v Geändert. Ich habe auch das Hinzufügen des control -Attributs getestet und wieder keine Auswirkung.

Dies funktionierte in allen getesteten Browsern, einschließlich Safari 7 auf Mavericks und Safari 8 auf Yosemite. Ich habe einfach die gleiche m4v-Datei (die eigentliche Datei, nicht nur HTML) 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 bei iOS-Geräten nicht behoben (iPad 3 "das neue iPad" und iPhone 6 getestet).

12
Michael

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

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

Standardmäßig verfügt WebKit über 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 das Quellmedium keine Audiotracks enthält.
  • <video muted> -Elemente können auch ohne Benutzergeste automatisch wiedergegeben werden.
  • Wenn ein <video> -Element erhält eine Audiospur oder wird ohne Benutzergeste stummgeschaltet. Die Wiedergabe wird angehalten.
  • <video autoplay> -Elemente werden nur 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. wenn sie aus dem Ansichtsfenster herausgerollt 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 wiedergeben (), wenn das Quellmedium keine Audiotracks enthält oder wenn die Eigenschaft stummgeschaltet auf true festgelegt ist.
  • Wenn ein <video> -Element erhält eine Audiospur oder wird ohne Benutzergeste stummgeschaltet. Die Wiedergabe wird 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 <video playsinline> -Elemente können jetzt inline abgespielt werden und wechseln nicht automatisch in den Vollbildmodus, wenn die Wiedergabe beginnt. <video> Elemente ohne Wiedergabelinienattribute erfordern weiterhin den Vollbildmodus für die Wiedergabe auf dem iPhone. Wenn Sie den Vollbildmodus mit einer kleinen Geste verlassen, zeigt <video> Elemente ohne playsinline werden weiterhin inline abgespielt.

5
arnaudambro

Ich habe festgestellt, dass, obwohl Safari HTML5 Video unterstützt, der Quicktime Player 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 informiert, dass Quicktime installiert sein muss. Andernfalls werden nur Videotranskripte angezeigt. Hoffe das hilft.

5
TobyS

Ich habe seltsame Probleme mit nicht vertrauenswürdigen SSL-Entwicklungszertifikaten gesehen, bei denen Mobile Safari Ihre Seite sehr 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.

4
Simon_Weaver

Das Hinzufügen von "playsinline" funktioniert für Iphone und Ipa, wenn Sie nichts dagegen haben, dass Ihr Video stumm geschaltet 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 Stütze auf

3
Wende Avontuur

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>

Das controls=”true” in einem obigen Beitrag erwähnt machen keinen Sinn für mich als Apple sagt nur Steuerelemente für sich.

Referenz: “Um HTML5-Audio oder -Video zu verwenden, erstellen Sie zunächst ein oder -Element, geben eine Quell-URL für das Medium an und fügen das Steuerelementattribut hinzu. <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 als .quicktime an den Server gesendet wird. Ironischerweise ist dies das Problem, wenn versucht wird, das Video auf Safari vom Server abzuspielen. (Handy & Desktop).

Also , wenn Sie (wie ich) ein Problem mit .quicktime (oder etwas anderem als .mp4) in Safari haben , ist hier eine von Apple bereitgestellte Lösung . Beachten Sie, dass ich es noch nicht selbst getestet habe und nicht auf einen Blick zufrieden damit bin. Ich gebe nur weitere Informationen.

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 herunter und fügen Sie sie 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/TP4000W

Update: Für .quicktime umbenennen in .mov vor dem Hochladen auf den Server (im Base64-Dateityp "data: video/mov;") überspringen Sie ac_quicktime.js. . . wird dann in HTML-Video-Tag arbeiten; Hackerdy ​​Hack.

2

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

"Apple hat beschlossen, die automatische Wiedergabe von Videos auf iOS-Geräten durch Skript- und Attributimplementierungen zu deaktivieren.

In Safari unter iOS (für alle Geräte, einschließlich iPad), auf denen sich der Benutzer möglicherweise in einem Mobilfunknetz befindet und für die eine Gebühr pro Dateneinheit berechnet wird, sind die Vorladefunktion und die automatische Wiedergabe deaktiviert. Es werden keine Daten geladen, bis der Benutzer sie initiiert hat. "

Weitere Informationen finden Sie in this Apple documentation

2
Iman Sedighi

Für iOS verwenden Sie bitte nur die mp4-Quelldatei. Ich habe ein Problem im neuesten Safari-Browser festgestellt, bei dem der Safari-Browser die Quelldatei nicht richtig erkennen kann. Aus diesem Grund funktioniert die automatische Wiedergabe von Videos nicht.

Lass uns folgendes Beispiel überprüfen -

     <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 benutzt habe, webm in Quelldateien. Safari deosnt unterstützt webm, aber immer noch in der neuesten Safari-Version. Es würde webm auswählen und die automatische Wiedergabe von Videos schlägt fehl.

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

Also für die Safari, benutze 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>
1

Durch die Verwendung dieses Codes wird das Video in allen Browsern auf Safari und auf iOS-Geräten wiedergegeben ... Mach mit, alle (ich habe das 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>

`

1
arvinda kumar

Ich habe das gleiche Problem konfrontiert. Weil mein Videobild zu groß war. ie.2248 px Apple unterstützt H.264 Baseline Profile Level 3.0-Video mit bis zu 640 x 480 bei 30 fps. Beachten Sie, dass B-Frames im Baseline-Profil nicht unterstützt werden. Aktivieren Sie das Kontrollkästchen dies für weitere Informationen

0
JSP.NET

funktioniert, aber MacOs hat kürzlich die Autoplay-Richtlinie für Benutzer: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ . Ich habe das gleiche Problem mit einem behoben Taste zum Aktivieren des Tons:

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

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

Auf Ubuntu:

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

Und Safari/Desktop starten, um das Video abzuspielen

0
Patrik Beck

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 den relativen Pfad referenziert wurde, funktionierte es nicht für die Entwicklung. Scheint ein Problem zu sein, das Apple erfordert, dass das Video sicher ist ...

0
Robby Horsley

Ich hatte das Problem, dass die .mp4-Wiedergabe in Safari nicht funktionierte, in anderen Browsern jedoch in Ordnung war. Der Fehler, den ich in der Konsole sah, war: Fehler Media-Quellcode nicht unterstützt. In meinem Fall stellte sich heraus, dass dies ein Problem mit dem MIME - Typ war, aber nicht, weil er in IIS nicht als MIME - Typ deklariert wurde, sondern weil er zweimal deklariert wurde (einmal in IIS und auch in a Ich habe versucht, die .mp4-Datei lokal auf den Server herunterzuladen. Ich habe die Konfigurationsdatei vom Speicherort des Inhalts entfernt, den ich wiedergeben wollte, und das Problem wurde behoben. Ich hätte sie einfach löschen können der MIME-Typ aus der Datei web.config, aber in diesem Fall wurde die Datei web.config nicht benötigt.

0
5lovak