Können Sie HTML5-Videos automatisch auf dem iPad abspielen?

123

Das Attribut <video>tags autoplay="autoplay"funktioniert in Safari einwandfrei.

Beim Testen auf einem iPad muss das Video manuell aktiviert werden.

Ich dachte, es sei ein Ladeproblem, und führte eine Schleife durch, in der der Status des Mediums überprüft wurde:

videoPlay: function(){
    var me = this;
    console.log('STATE: ' + $("#periscopevideo").get(0).readyState);
    if ($("#periscopevideo").get(0).readyState != 4){
      setTimeout(function(){me.videoPlay();}, 300);
    }
    else {
      $("#periscopevideo").get(0).play();
    }
}

Der Status bleibt 0auf dem iPad. Auf meinem Desktop - Safari geht es durch 0, 1und schließlich 4. Auf dem iPad erreicht es nur, 4wenn ich manuell auf den "Wiedergabe" -Pfeil tippe.

Darüber hinaus funktioniert das Aufrufen $("#periscopevideo").get(0).play()von einem Klick über onClickauch.

Gibt es irgendwelche Einschränkungen von Apple in Bezug auf die automatische Wiedergabe? (Ich verwende übrigens iOS 5+).

jquery  ios  objective-c  html  cocoa-touch 
— Jem
quelle
— apsillers
Vielleicht sollten wir uns die Browsererkennung ansehen und ob Sie playVideo () aufrufen
— Redtopia
— dimitar
Nützlicher Blogpost zu diesem Thema: webkit.org/blog/6784/new-video-policies-for-ios
— Matthias M
Opera Mini in iOS unterstützt standardmäßig die automatische Wiedergabe, während Chrome, Firefox und Safari keine Optionen zum Einschalten bieten.
— anonym

Antworten:

156

iOS 10 Update

Das Verbot der automatischen Wiedergabe wurde ab iOS 10 aufgehoben - jedoch mit einigen Einschränkungen (z. B. kann A automatisch wiedergegeben werden, wenn keine Audiospur vorhanden ist).

Eine vollständige Liste dieser Einschränkungen finden Sie in den offiziellen Dokumenten: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOS 9 und früher

Ab iOS 6.1 ist es nicht mehr möglich, Videos automatisch auf dem iPad abzuspielen.

Meine Vermutung, warum sie die Auto-Play-Funktion deaktiviert haben?

Da viele Gerätebesitzer auf ihren Geräten Datennutzungs- / Bandbreitenbeschränkungen haben, war Apple der Meinung, dass der Benutzer selbst entscheiden sollte, wann er die Bandbreitennutzung einleitet.

Nach einigen Recherchen habe ich in der Apple-Dokumentation den folgenden Auszug zum automatischen Abspielen auf iOS-Geräten gefunden, um meine Annahme zu bestätigen:

"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. "- Apple-Dokumentation.

Auf der Safari HTML5-Referenzseite finden Sie eine separate Warnung, warum eingebettete Medien in Safari unter iOS nicht abgespielt werden können:

Warnung : Um unerwünschte Downloads über Mobilfunknetze auf Kosten des Benutzers zu verhindern, können eingebettete Medien in Safari unter iOS nicht automatisch abgespielt werden. Der Benutzer initiiert immer die Wiedergabe. Ein Controller wird automatisch auf dem iPhone oder iPod touch bereitgestellt, sobald die Wiedergabe gestartet wurde. Für das iPad müssen Sie jedoch entweder das Steuerelementattribut festlegen oder einen Controller mithilfe von JavaScript bereitstellen.

Dies bedeutet (in Bezug auf Code), dass Javascript play()und load()Methoden inaktiv sind, bis der Benutzer die Wiedergabe startet, es sei denn, die Methode play()oder load()wird durch eine Benutzeraktion (z. B. ein Klickereignis) ausgelöst.

Grundsätzlich funktioniert eine vom Benutzer initiierte Wiedergabetaste, ein onLoad="play()"Ereignis jedoch nicht.

Zum Beispiel würde dies den Film abspielen: 

<input type="button" value="Play" onclick="document.myMovie.play()">

Während das Folgende unter iOS nichts bewirken würde: 

<body onload="document.myMovie.play()">
— dsgriffin
quelle
1
Hmmm 3 Monate nach der Erstellung eines Online-Weckers für iPhone Safari! Wir (sleep.fm) haben einen Weg gefunden, das Telefon wach zu halten, während die App geöffnet ist, aber jetzt mit iOS 6.1 wird das Alarm-Audio nicht abgespielt. In iOS 6.0 hat es gut funktioniert. Gibt es eine Lösung?
— Chaser7016
1
Oh, warte, wir haben unseren mobilen Wecker (sleep.fm) für iPhone Safari wieder in Betrieb genommen, daher gibt es Umgehungsmöglichkeiten für den Mangel an HTML5-Autoplay-Unterstützung.
— Chaser7016
1
@ Jonah1289 Laut Ihrem Blog-Beitrag auf Sleep.fm hat Brian Cavalier einen Github-Link mit dem folgenden Titel getwittert. Autoplay-Audio auf dem iPad oder iPhone mit Webkitaudiocontext anstelle von Audio-Tag. Könnte ein guter Anfang sein.
— Francisco
1
Weitere Details, bitte - Welche spezifischen Problemumgehungen gibt es für den Mangel an Autoplay-Unterstützung?
— Umopepisdn
11
Was sie tun sollten, ist die automatische Wiedergabe über WLAN zuzulassen und entweder manuell abzuspielen oder den Benutzer aufzufordern, dass das Video in einem mobilen Netzwerk automatisch abgespielt werden soll.
— Ric
16

Ich möchte zunächst sagen, dass mir klar ist, dass diese Frage alt ist und bereits eine akzeptierte Antwort hat. Aber als unglücklicher Internetnutzer, der diese Frage als Mittel zum Zweck benutzte, um kurz danach (aber nicht bevor ich meinen Kunden ein wenig verärgerte) als falsch erwiesen zu werden, möchte ich meine Gedanken und Vorschläge hinzufügen.

Während @DSG und @Giona korrekt sind und an ihren Antworten nichts auszusetzen ist, gibt es einen kreativen Mechanismus, mit dem Sie diese Einschränkung sozusagen "umgehen" können. Das heißt nicht, dass ich die Umgehung dieser Funktion gutheiße, ganz im Gegenteil, sondern nur einige Mechanismen, damit sich ein Benutzer immer noch "fühlt", als würde eine Video- oder Audiodatei "automatisch abgespielt".

Die schnelle Lösung besteht darin, ein Video-Tag irgendwo auf der mobilen Seite auszublenden, da ich eine reaktionsfähige Site erstellt habe, mache ich dies nur für kleinere Bildschirme. Das Video-Tag (HTML- und jQuery-Beispiele):

HTML

<video id="dummyVideo" src="" preload="none" width="1" height="2"></video>

jQuery

var $dummyVideo = $("<video />", {
  id: "dummyVideo",
  src: "",
  preload: "none",
  width: "1",
  height: "2"
});

Wenn dies auf der Seite ausgeblendet ist, lade ich das ausgeblendete Video, wenn ein Benutzer "klickt", um einen Film anzusehen (immer noch Benutzerinteraktion, es gibt keine Möglichkeit, diese Anforderung zu umgehen), anstatt zu einer sekundären Beobachtungsseite zu navigieren. Dies funktioniert hauptsächlich, weil das Medien-Tag nicht wirklich verwendet wird, sondern zu einer Quicktime-Instanz hochgestuft wird, sodass ein sichtbares Videoelement überhaupt nicht erforderlich ist. Im Handler für "Klick" (oder "Touchend" auf dem Handy).

$(".movie-container").on("click", function() {
  var url = $(this).data("stream-url");
  $dummyVideo.attr("src", url);
  $dummyVideo.get(0).load(); // required if src changed after page load
  $dummyVideo.get(0).play();
});

Und Bratsche. In UX klickt ein Benutzer auf ein Video, um es abzuspielen, und Quicktime öffnet die Wiedergabe des von ihm ausgewählten Videos. Dies bleibt innerhalb der Einschränkung, dass Videos nur über Benutzeraktionen abgespielt werden können, sodass ich niemandem Daten aufzwinge, der sich nicht dazu entschließt, ein Video mit diesem Dienst anzusehen. Ich habe dies entdeckt, als ich versucht habe herauszufinden, wie genau Youtube dies mit seinem Handy geschafft hat. Dies ist im Wesentlichen eine wirklich schöne Javascript-Seitenerstellung und ein ausgefallenes Element, das sich wie im Fall des Video-Tags versteckt.

tl; dr Hier ist eine etwas "Problemumgehung", um zu versuchen, eine "Autoplay" -UX-Funktion auf iOS-Geräten zu erstellen, ohne die Einschränkungen von Apple zu überschreiten und die Benutzer dennoch entscheiden zu lassen, ob sie ein Video (oder Audio, das mir am besten gefällt) ansehen möchten Ich habe mich nicht selbst getestet, ohne dass einer ohne ihre Erlaubnis geladen wurde.

Für die Person, die kommentiert hat, dass dies von sleep.fm stammt, wäre dies leider immer noch keine Lösung für Ihre Probleme gewesen, nämlich die zeitbasierte Audiowiedergabe.

Ich hoffe, jemand findet diese Informationen nützlich. Es hätte mir eine Woche schlechte Nachrichtenübermittlung an einen Kunden erspart, der fest davon überzeugt war, dass er über diese Funktion verfügt, und ich war froh, am Ende einen Weg zu finden, sie zu übermitteln.

BEARBEITEN

Weitere Ergebnisse zeigen, dass die oben beschriebene Problemumgehung nur für iPhone / iPod-Geräte gilt. Das iPad spielt Videos in Safari ab, bevor es im Vollbildmodus angezeigt wird. Daher benötigen Sie einen Mechanismus, um die Größe des Videos beim Klicken vor dem Abspielen zu ändern. Andernfalls erhalten Sie Audio und kein Video.

— Brandon Buck
quelle
2
Es ist besser, $dummyVideo.get(0)anstelle von Klammern zu verwenden, damit jQuery ordnungsgemäß fehlschlagen kann, wenn Ihre Auswahl leer ist.
— Micros
12

Einfach einstellen

webView.mediaPlaybackRequiresUserAction = NO;

Das Autoplay funktioniert bei mir unter iOS.

— Er Li
quelle
29
Dies funktioniert nicht für eine Website, sondern nur für Websites, auf denen Sie sie mit einer nativen Anwendung verpackt haben.
— Brandon Buck
5
Ich meine, von einer Webseite (wie die Frage stellt) ist dies etwas völlig Unzugängliches - ja, Javascript in einem Browser kann dies nicht. Dies funktioniert nur, wenn Sie Ihre Site in einer WebView von einer Anwendung aus ausführen, über die Sie die Kontrolle haben, sodass die Frage nicht wirklich gelöst werden kann.
— Brandon Buck
6
@izuriel um fair zu sein, hat er die Frage mit "Objective-C" und "Cocoa-Touch" markiert, so dass es nicht so weit hergeholt ist anzunehmen, dass er eine Webansicht verwendet
— Kloar
3
@Kloar-Tags werden normalerweise hinzugefügt, um mehr Aufmerksamkeit oder ein allgemeines Missverständnis des Problems zu erhalten, das sie zu lösen versuchen. Die Person, die die Frage gestellt hat, hat möglicherweise gedacht, dass das Erwähnen von Objective-C dasselbe ist wie das Aussprechen von "iOS" (und ähnlich für Cocoa-Touch). Das "uiwebview" -Tag ist jedoch nicht aufgeführt, daher würde ich dies als praktikable Option ausschließen. Die Frage erwähnt die Verwendung von Safari auf Desktop und iPad (nichts über eine App) und verwendet Javascript-Demo-Codes, um die Situation zu debuggen. Alles in allem würde ich sagen, dass es sicherer ist, dass diese Frage wirklich nach webbasierten und nicht nativen Lösungen suchte.
— Brandon Buck
— CottonBallPaws
11

Ab iOS 10, Videos jetzt können automatisch wiedergegeben , sondern nur sie entweder stumm geschaltet werden, oder keine Audiospur haben. Yay!

Zusamenfassend:

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

Weitere Informationen hier: https://webkit.org/blog/6784/new-video-policies-for-ios/

— JackKalish
quelle
4
Das Autoplay-Attribut funktioniert nur auf dem PC und nicht auf dem Handy. Ich habe es oft versucht.
— Huykon225
7

In dieser Safari HTML5-Referenz können Sie lesen

Um unerwünschte Downloads über Mobilfunknetze auf Kosten des Benutzers zu verhindern, können eingebettete Medien in Safari unter iOS nicht automatisch abgespielt werden. Der Benutzer initiiert immer die Wiedergabe. Ein Controller wird automatisch auf dem iPhone oder iPod touch bereitgestellt, sobald die Wiedergabe gestartet wurde. Für das iPad müssen Sie jedoch entweder das Steuerelementattribut festlegen oder einen Controller mithilfe von JavaScript bereitstellen.

— Giona
quelle
38
"Abgesehen von GIF-Dateien, die mehrere MB
— groß sein
@Simon_Weaver x12 mal für die meisten Zeiten, um genau zu sein.
— Burak Tokak
2

Lassen Sie das Video zuerst stummschalten, um die automatische Wiedergabe in ios sicherzustellen, und heben Sie dann die Stummschaltung auf, wenn Sie möchten.

<video autoplay loop muted playsinline>
  <source src="video.mp4?123" type="video/mp4">
</video>

<script type="text/javascript">
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>
— Mohammad Ali Akbari
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.