İPad'de HTML5 videoları otomatik oynatabiliyor musunuz?


123

<video>Etiketler autoplay="autoplay"nitelik Safari'de cezası çalışır.

Bir iPad'de test ederken, videonun manuel olarak etkinleştirilmesi gerekir.

Bunun bir yükleme sorunu olduğunu düşündüm, bu yüzden medyanın durumunu kontrol eden bir döngü yaptım:

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();
    }
}

Durum 0iPad'de kalır . Benim masaüstü safari günü, o geçer 0, 1ve son olarak 4. İPad'de, yalnızca 4"oynat" okuna elle dokunursam ulaşır .

Dahası, $("#periscopevideo").get(0).play()bir tıklamadan arama yoluyla da onClickçalışır.

Otomatik oynatma ile ilgili olarak Apple tarafından herhangi bir kısıtlama var mı? (Bu arada iOS 5+ çalıştırıyorum).



Belki tarayıcı algılamaya ve playVideo () 'yu çağırmanız gerekip gerekmediğine bakmalıyız: stackoverflow.com/questions/26895492/…
Redtopia

Bu benim için çalışıyor github.com/Stanko/html-canvas-video-player
dimitar

Bu konuyla ilgili faydalı blog yayını: webkit.org/blog/6784/new-video-policies-for-ios
Matthias M

ios'taki opera mini varsayılan olarak otomatik oynatmayı desteklerken, chrome, firefox ve safari açma seçenekleri sunmaz ve sunmaz.
anonim

Yanıtlar:


156

iOS 10 güncellemesi

Otomatik oynatma yasağı iOS 10'dan itibaren kaldırıldı - ancak bazı kısıtlamalarla (örneğin, ses parçası yoksa A otomatik olarak oynatılabilir).

Bu kısıtlamaların tam listesini görmek için resmi belgelere bakın: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOS 9 ve öncesi

İOS 6.1'den itibaren iPad'de videoları otomatik oynatmak artık mümkün değildir.

Otomatik oynatma özelliğini neden devre dışı bıraktıkları konusundaki varsayım?

Pek çok cihaz sahibinin cihazlarında veri kullanımı / bant genişliği sınırları olduğu için, Apple'ın bant genişliği kullanımını ne zaman başlatacağına kullanıcının kendisinin karar vermesi gerektiğini hissettiğini düşünüyorum.


Biraz araştırma yaptıktan sonra, varsayımımı doğrulamak için Apple belgelerinde iOS cihazlarında otomatik oynatma ile ilgili aşağıdaki alıntıyı buldum:

"Apple, hem komut dosyası hem de öznitelik uygulamaları aracılığıyla iOS cihazlarda otomatik video oynatmayı devre dışı bırakma kararı aldı.

Safari'de, kullanıcının hücresel bir ağda olabileceği ve veri birimi başına ücretlendirilebileceği iOS'ta (iPad dahil tüm cihazlar için), önceden yükleme ve otomatik oynatma devre dışı bırakılır. Kullanıcı başlatana kadar hiçbir veri yüklenmez. "- Apple belgeleri.

Safari HTML5 Referans sayfasında, katıştırılmış medyanın neden iOS'taki Safari'de oynatılamayacağına ilişkin ayrı bir uyarı :

Uyarı : Masrafı kullanıcıya ait olmak üzere hücresel ağlar üzerinden istenmeyen indirmeleri önlemek için, katıştırılmış medya iOS'taki Safari'de otomatik olarak oynatılamaz; kullanıcı her zaman oynatmayı başlatır. Oynatma başlatıldığında iPhone veya iPod touch üzerinde otomatik olarak bir kontrol cihazı sağlanır, ancak iPad için ya kontroller özelliğini ayarlamanız ya da JavaScript kullanarak bir kontrol cihazı sağlamanız gerekir.


Ne (kod açısından) bu araçlar JavaScript en olmasıdır play()ve load()kullanıcı başlatır oynatma kadar yöntemleri, etkin olmayan olmadıkçaplay() veya load()yöntem kullanıcı eylemi (örn tıklama etkinlik) tarafından tetiklenir.

Temel olarak, kullanıcı tarafından başlatılan bir oynatma düğmesi çalışır, ancak bir onLoad="play()"etkinlik çalışmaz.

Örneğin, bu filmi oynatır:

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

Aşağıdakiler iOS'ta hiçbir şey yapmaz:

<body onload="document.myMovie.play()">

1
Hmmm 3 aylık iPhone Safari için çevrimiçi bir çalar saat yaratma süreci boşa gidiyor! Biz (sleep.fm), uygulama açıkken telefonu uyanık tutmanın bir yolunu bulduk, ancak şimdi iOS 6.1 ile alarm sesi çalmayacak. İOS 6.0'da iyi çalıştı. Etrafta bir çalışma var mı?
chaser7016

1
oh bekle, iPhone Safari için mobil web alarm saatimizi (sleep.fm) tekrar hazır hale getirdik ve tekrar çalışıyor, bu yüzden html5 otomatik oynatma desteğinin olmaması için geçici çözümler var.
chaser7016

1
@ Jonah1289 Sleep.fm'deki blog gönderinize göre Brian Cavalier , ses etiketi yerine webkitaudiocontext kullanarak ipad veya iphone'da aşağıdaki başlığı içeren bir github bağlantısını tweetledi .
Francisco

1
Daha fazla ayrıntı, lütfen - Otomatik oynatma desteğinin olmaması için hangi özel çözümler var?
Umopepisdn

11
Yapmaları gereken şey, kablosuz bağlantıdayken otomatik oynatmaya izin vermek ve manuel olarak oynatmak veya kullanıcıya videonun mobil ağdayken otomatik olarak oynatmak istediğini belirtmektir.
Ric

16

Bu sorunun eski olduğunu ve zaten kabul edilmiş bir cevabı olduğunu anladığımı söyleyerek başlamak istiyorum; ancak, bu soruyu sadece kısa bir süre sonra yanlış olduğunu kanıtlamak için bir araç olarak kullanan talihsiz bir internet kullanıcısı olarak (müvekkilimi biraz üzmeden önce değil) düşüncelerimi ve önerilerimi eklemek istiyorum.

@DSG ve @Giona haklıyken ve cevaplarında yanlış bir şey olmasa da, tabiri caizse bu sınırlamayı "dolaşmak" için kullanabileceğiniz yaratıcı bir mekanizma var. Bu, tam tersine, bu özelliğin atlatılmasına göz yumduğum anlamına gelmiyor, ama sadece bazı mekanizmalar, böylece bir kullanıcı hala bir video veya ses dosyası "otomatik oynatılıyor" gibi "hissediyor".

Hızlı çalışma, mobil sayfanın herhangi bir yerinde bir video etiketini gizlemektir, çünkü duyarlı bir site oluşturduğum için bunu yalnızca daha küçük ekranlar için yapıyorum. Video etiketi (HTML ve jQuery örnekleri):

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"
});

Bu sayfada gizlendiğinde, bir kullanıcı bir filmi izlemek için "tıkladığında" (hala kullanıcı etkileşimi, bu gereksinimi aşmanın yolu yoktur) ikincil bir izleme sayfasına gitmek yerine gizli videoyu yüklerim. Bu esas olarak işe yarar çünkü medya etiketi gerçekten kullanılmaz, bunun yerine bir Quicktime örneğine yükseltilir, bu nedenle görünür bir video öğesine sahip olmak hiç gerekli değildir. İşleyicide "tıklama" (veya mobil cihazda "dokunma").

$(".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();
});

Ve viyola. UX söz konusu olduğunda, bir kullanıcı oynatmak için bir videoyu tıklar ve Quicktime, seçtiği videoyu oynatarak açar. Bu, videoların yalnızca kullanıcı eylemi yoluyla oynatılabileceği sınırlaması dahilinde kalır, bu nedenle bu hizmetle video izlemeye karar vermeyen kimseyle ilgili verileri zorlamıyorum. Bunu, Youtube'un mobil cihazlarıyla tam olarak nasıl başardığını anlamaya çalışırken keşfettim, bu aslında gerçekten güzel bir Javascript sayfası oluşturma ve video etiketinde olduğu gibi saklanan süslü öğeler.

tl; dr Burada, Apple'ın sınırlamalarının ötesine geçmeden iOS cihazlarında bir "otomatik oynatma" UX özelliğini denemek ve oluşturmak ve yine de kullanıcıların bir videoyu (veya en çok benzer şekilde sesi) izlemek isteyip istemediklerine karar vermelerini sağlamak için bir "geçici çözüm" var. izin almadan bir tane yüklemeden kendilerini test etmediler.

Ayrıca, bunu sleep.fm'den yorumlayan kişi için, bu maalesef sorunlarınıza, zamana dayalı ses çalma olana bir çözüm olamazdı.

Umarım birisi bu bilgiyi yararlı bulur, bu beni bir müşteriye bu özelliğe sahip olduğu konusunda kararlı bir kötü haber tesliminden bir hafta kurtarırdı ve sonunda bunu teslim etmenin bir yolunu bulduğuma sevindim.

DÜZENLE

Diğer bulgular, yukarıdaki geçici çözümün yalnızca iPhone / iPod cihazları için olduğunu göstermektedir. İPad, videoyu tam ekran olmadan önce Safari'de oynatır, bu nedenle videoyu oynatmadan önce tıklamayla yeniden boyutlandırmak için bazı mekanizmalara ihtiyacınız olacaktır, aksi takdirde ses ile sonuçlanır ve video olmaz.


2
$dummyVideo.get(0)Köşeli parantezler yerine kullanmak daha iyi olacaktır , bu nedenle seçiminiz boşsa jQuery sorunsuzca başarısız olabilir.
Micros

12

Sadece ayarla

webView.mediaPlaybackRequiresUserAction = NO;

Otomatik oynatma benim için iOS'ta çalışıyor.


29
Bu bir web sitesi için çalışmaz, bu yalnızca onları bir Yerel uygulamayla sarmaladığınız sitelerde işe yarar.
Brandon Buck

5
Demek istediğim, bir web sayfasından (soru sorulduğu gibi) bu tamamen erişilemez bir şey - evet, bir tarayıcıdaki Javascript bunu yapamaz. Bu, yalnızca sitenizi bir Web Görünümü içinde kontrolünüzdeki bir uygulamadan çalıştırırsanız işe yarar, bu nedenle soruya gerçekten bir çözüm sağlamaz.
Brandon Buck

6
@izuriel adil olmak gerekirse, soruyu "amaç-c" ve "kakao-dokunuş" ile etiketledi, bu yüzden bir web görünümü kullandığını varsaymak çok uzak bir ihtimal değil
Kloar

3
@Kloar Etiketleri genellikle daha fazla dikkat çekmek veya çözmeye çalıştıkları sorunun genel bir yanlış anlaşılması için bir araç olarak eklenir. Soruyu soran kişi, amaç-c'den bahsetmenin "iOS" demekle aynı (ve kakao dokunuşu için benzer) olduğunu düşünmüş olabilir. "Uiwebview" etiketi listelenmemiştir, bu nedenle bunu geçerli bir seçenek olarak hariç tutuyorum. Soru, Safari'nin masaüstü ve iPad'de kullanımından bahsediyor (bir uygulama hakkında hiçbir şey yok) ve durumdaki hataları ayıklamak için Javascript demo kodlarını kullanıyor. Sonuç olarak, bu sorunun daha güvenli bir bahis olduğunu söyleyebilirim, bu soru gerçekten yerel çözümler değil web arıyordu.
Brandon Buck


11

İOS 10. itibariyle videoları artık olabilir otomatik oynatır ancak onlar birini susturulur veya hiçbir ses yok. Yaşasın!

Kısacası:

  • <video autoplay> öğeler, aşağıdaki koşulları karşılayan öğeler için artık autoplay özelliğini kabul edecek:
    • <video> kaynak medyası hiç ses parçası içermiyorsa, öğelerin kullanıcı hareketi olmadan otomatik oynatılmasına izin verilir.
    • <video muted> öğelerin kullanıcı hareketi olmadan otomatik olarak oynatılmasına da izin verilir.
    • Bir <video>öğe, bir ses parçası alırsa veya kullanıcı hareketi olmadan sesi açılırsa , oynatma duraklatılır.
    • <video autoplay> öğeler yalnızca ekranda görünür olduklarında, örneğin görüntü alanına kaydırıldıklarında, CSS aracılığıyla görünür hale getirildiklerinde ve DOM'a eklendiklerinde oynamaya başlayacaktır.
    • <video autoplay> öğeler, örneğin görüntü alanının dışına kaydırılarak görünmez hale gelirlerse dururlar.

Daha fazla bilgi burada: https://webkit.org/blog/6784/new-video-policies-for-ios/


4
autoplay özelliği yalnızca bilgisayarda çalışır, mobil cihazda çalışmaz. Birçok kez denedim.
huykon225

7

Bu Safari HTML5 referansında şunları okuyabilirsiniz:

Masrafı kullanıcıya ait olmak üzere hücresel ağlar üzerinden istenmeyen indirmeleri önlemek için, katıştırılmış medya iOS'taki Safari'de otomatik olarak oynatılamaz; kullanıcı her zaman oynatmayı başlatır. Oynatma başlatıldığında iPhone veya iPod touch'ta otomatik olarak bir kontrol cihazı sağlanır, ancak iPad için ya kontroller özelliğini ayarlamanız ya da JavaScript kullanarak bir kontrol cihazı sağlamanız gerekir.


38
"birden fazla MB olabilen ve bant genişliğini insanlar farkına bile varmadan kullanabilen GIF dosyaları dışında"
Simon_Weaver

@Simon_Weaver çoğu zaman kesin olmak için x12 kez.
Burak Tokak

2

İOS'ta otomatik oynatmayı sağlamak için önce videonun sesini kapatın, ardından isterseniz sesi açın.

<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>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.