Bisakah Anda memutar video HTML5 secara otomatis di iPad?

123

The <video>tag autoplay="autoplay"atribut bekerja dengan baik di Safari.

Saat menguji di iPad, video harus diaktifkan secara manual.

Saya pikir itu adalah masalah pemuatan, jadi saya menjalankan loop untuk memeriksa status media:

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

Status tetap di 0iPad. Di safari desktop saya, ia berhasil 0, 1dan akhirnya 4. Di iPad, ini hanya menjangkau 4jika saya menge-tap panah "putar" secara manual.

Selain itu, menelepon $("#periscopevideo").get(0).play()dari klik melalui onClickjuga berfungsi.

Apakah ada batasan oleh Apple terkait putar otomatis? (Omong-omong, saya menjalankan iOS 5+).

jquery ios objective-c html cocoa-touch Jem
sumber
Terkait / duplikat: stackoverflow.com/questions/2841966/… , stackoverflow.com/questions/4259928/…
apsillers
Mungkin kita harus melihat pada deteksi browser, dan apakah Anda harus memanggil playVideo (): stackoverflow.com/questions/26895492/…
Redtopia
Ini bekerja untuk saya github.com/Stanko/html-canvas-video-player
dimitar
Posting
Matthias M
opera mini di ios mendukung putar otomatis secara default, sedangkan chrome, firefox dan safari tidak dan belum menawarkan opsi untuk mengaktifkan.
anonim

Jawaban:

156

Pembaruan iOS 10

Larangan putar otomatis telah dicabut mulai iOS 10 - tetapi dengan beberapa batasan (mis. A dapat diputar otomatis jika tidak ada trek audio).

Untuk melihat daftar lengkap dari batasan ini, lihat dokumen resmi: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOS 9 dan sebelumnya

Mulai iOS 6.1, video tidak lagi dapat diputar otomatis di iPad.

Asumsi saya mengapa mereka menonaktifkan fitur putar otomatis?

Nah, karena banyak pemilik perangkat memiliki batas penggunaan data / bandwidth pada perangkat mereka, saya rasa Apple merasa bahwa pengguna sendiri yang harus memutuskan kapan mereka memulai penggunaan bandwidth.

Setelah sedikit riset, saya menemukan ekstrak berikut di dokumentasi Apple sehubungan dengan putar otomatis di perangkat iOS untuk mengonfirmasi asumsi saya:

"Apple telah membuat keputusan untuk menonaktifkan pemutaran otomatis video di perangkat iOS, melalui implementasi skrip dan atribut.

Di Safari, di iOS (untuk semua perangkat, termasuk iPad), di mana pengguna mungkin berada di jaringan seluler dan dikenai biaya per unit data, preload dan auto-play dinonaktifkan. Tidak ada data yang dimuat sampai pengguna memulainya. "- Dokumentasi Apple.

Berikut adalah peringatan terpisah yang ditampilkan di halaman Referensi HTML5 Safari tentang mengapa media yang disematkan tidak dapat diputar di Safari di iOS:

Peringatan : Untuk mencegah unduhan yang tidak diinginkan melalui jaringan seluler dengan biaya pengguna, media yang disematkan tidak dapat diputar secara otomatis di Safari di iOS — pengguna selalu memulai pemutaran. Pengontrol secara otomatis disediakan di iPhone atau iPod touch setelah pemutaran dimulai, tetapi untuk iPad Anda harus mengatur atribut kontrol atau menyediakan pengontrol menggunakan JavaScript.

Apa artinya ini (dalam hal code) adalah bahwa Javascript play()dan load()metode tidak aktif sampai inisiat pengguna pemutaran, kecuali yang play()atau load()metode dipicu oleh tindakan pengguna (misalnya acara klik).

Pada dasarnya, tombol putar yang dimulai oleh pengguna berfungsi, tetapi sebuah onLoad="play()"acara tidak.

Misalnya, ini akan memutar film: 

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

Sedangkan hal berikut tidak akan melakukan apa pun di iOS: 

<body onload="document.myMovie.play()">
dsgriffin.dll
sumber
1
Hmmm 3 bulan membuat jam alarm online untuk Safari iPhone sia-sia! Kami (sleep.fm) menemukan cara untuk menjaga ponsel tetap aktif saat aplikasi terbuka tetapi sekarang dengan iOS 6.1 audio alarm tidak dapat diputar. Ini bekerja dengan baik di iOS 6.0. Apakah ada solusi untuk itu?
chaser7016
1
oh tunggu kami mengaktifkan jam alarm web seluler (sleep.fm) untuk iPhone Safari dan berjalan kembali, jadi ada solusi untuk kekurangan dukungan autoplay html5.
chaser7016
1
@ Jonah1289 Menurut posting blog Anda di Sleep.fm Brian Cavalier menge-tweet link github dengan judul berikut Autoplay audio di ipad atau iphone menggunakan webkitaudiocontext sebagai pengganti tag audio Mungkin tempat yang baik untuk memulai.
Francisco
1
Lebih jelasnya, silakan - solusi khusus apa yang tersedia untuk kurangnya dukungan Putar Otomatis?
Umopepisdn
11
Yang harus mereka lakukan adalah mengizinkan putar otomatis saat menggunakan Wi-Fi, dan memutar secara manual atau memberi tahu pengguna bahwa video ingin diputar otomatis saat berada di jaringan seluler.
Ric
16

Saya ingin memulai dengan mengatakan dengan mengatakan bahwa saya menyadari pertanyaan ini sudah tua dan sudah memiliki jawaban yang dapat diterima; tetapi, sebagai pengguna internet yang malang yang menggunakan pertanyaan ini sebagai sarana untuk mengakhiri hanya untuk dibuktikan salah segera setelahnya (tetapi tidak sebelum saya mengecewakan klien saya sedikit) saya ingin menambahkan pemikiran dan saran saya.

Meskipun @DSG dan @Giona benar, dan tidak ada yang salah dengan jawaban mereka, ada mekanisme kreatif yang dapat Anda terapkan untuk "menyiasati", boleh dikatakan, batasan ini. Bukan berarti saya memaafkan pengelakan fitur ini, justru sebaliknya, tetapi hanya beberapa mekanisme sehingga pengguna masih "merasa" seolah-olah file video atau audio "diputar otomatis".

Solusi cepatnya adalah menyembunyikan tag video di suatu tempat di halaman seluler, karena saya membuat situs responsif, saya hanya melakukan ini untuk layar yang lebih kecil. Tag video (contoh HTML dan jQuery):

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

Dengan menyembunyikan hal tersebut di halaman, saat pengguna "mengklik" untuk menonton film (masih interaksi pengguna, tidak ada cara untuk mengakali persyaratan tersebut) daripada membuka halaman tonton sekunder, saya memuat video tersembunyi. Ini terutama berfungsi karena tag media tidak benar-benar digunakan tetapi dipromosikan ke instance Quicktime sehingga memiliki elemen video yang terlihat tidak diperlukan sama sekali. Di penangan untuk "klik" (atau "sentuh" ​​di seluler).

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

Dan biola. Sejauh UX berjalan, pengguna mengklik video untuk memutar dan Quicktime membuka pemutaran video yang mereka pilih. Ini tetap dalam batasan bahwa video hanya dapat diputar melalui tindakan pengguna jadi saya tidak memaksakan data pada siapa pun yang tidak memutuskan untuk menonton video dengan layanan ini. Saya menemukan ini ketika mencoba mencari tahu bagaimana tepatnya Youtube melakukan ini dengan ponsel mereka yang pada dasarnya adalah beberapa pembuatan halaman Javascript yang sangat bagus dan elemen mewah yang bersembunyi seperti dalam kasus tag video.

tl; dr Berikut ini adalah "solusi" untuk mencoba dan membuat fitur UX "putar otomatis" di perangkat iOS tanpa melampaui batasan Apple dan masih meminta pengguna memutuskan apakah mereka ingin menonton video (atau audio yang paling disukai, meskipun saya belum menguji) diri mereka sendiri tanpa memuatnya tanpa izin.

Juga, untuk orang yang berkomentar yaitu dari sleep.fm, sayangnya ini masih belum menjadi solusi untuk masalah Anda yaitu pemutaran audio berbasis waktu.

Saya berharap seseorang menemukan informasi ini berguna, ini akan menyelamatkan saya dari satu minggu pengiriman berita buruk ke klien yang bersikeras bahwa mereka memiliki fitur ini dan saya senang menemukan cara untuk menyampaikannya pada akhirnya.

EDIT

Temuan lebih lanjut menunjukkan bahwa solusi di atas hanya untuk perangkat iPhone / iPod. IPad memutar video di Safari sebelum layar penuh sehingga Anda memerlukan beberapa mekanisme untuk mengubah ukuran video saat diklik sebelum diputar atau Anda akan berakhir dengan audio dan tidak ada video.

Brandon Buck
sumber
2
Akan lebih baik jika digunakan $dummyVideo.get(0)daripada tanda kurung, jadi jQuery bisa gagal dengan baik jika pilihan Anda kosong.
Micros
12

Atur saja

webView.mediaPlaybackRequiresUserAction = NO;

Putar otomatis berfungsi untuk saya di iOS.

Er Li
sumber
29
Ini tidak berfungsi untuk situs web, ini hanya berfungsi untuk situs yang Anda gabungkan dengan aplikasi Asli.
Brandon Buck
5
Maksud saya, dari halaman web (seperti pertanyaan yang diajukan) ini adalah sesuatu yang sama sekali tidak dapat diakses - ya, Javascript di browser tidak dapat melakukan ini. Ini hanya berfungsi jika Anda menjalankan situs Anda di dalam WebView dari aplikasi yang Anda kendalikan sehingga tidak benar-benar memberikan solusi untuk pertanyaan tersebut.
Brandon Buck
6
@izuriel agar adil, dia menandai pertanyaan dengan "objektif-c" dan "sentuhan coklat", jadi tidak terlalu berlebihan untuk menganggap dia menggunakan tampilan web
Kloar
3
Tag @loar biasanya ditambahkan sebagai cara untuk mendapatkan lebih banyak perhatian atau kesalahpahaman umum tentang masalah yang mereka coba selesaikan. Orang yang mengajukan pertanyaan mungkin mengira bahwa menyebutkan tujuan-c sama dengan mengatakan "iOS" (dan serupa untuk cocoa-touch). Namun, tag "uiwebview" tidak terdaftar jadi saya akan mengecualikannya sebagai opsi yang memungkinkan. Pertanyaan tersebut menyebutkan penggunaan Safari di desktop dan iPad (tidak ada apa-apa tentang aplikasi) dan menggunakan kode demo Javascript untuk men-debug situasi. Secara keseluruhan, saya akan mengatakan ini lebih merupakan taruhan yang aman pertanyaan ini benar-benar mencari web bukan solusi asli.
Brandon Buck
Di Android: developer.android.com/reference/android/webkit/…
cottonBallPaws
11

Mulai iOS 10, video sekarang dapat diputar otomatis, tetapi hanya video yang dibisukan, atau tidak memiliki trek audio. Yay!

Pendeknya:

  • <video autoplay> elemen sekarang akan menghormati atribut putar otomatis, untuk elemen yang memenuhi ketentuan berikut:
    • <video> elemen akan diizinkan untuk memutar otomatis tanpa isyarat pengguna jika media sumber mereka tidak berisi trek audio.
    • <video muted> elemen juga akan diizinkan untuk memutar otomatis tanpa isyarat pengguna.
    • Jika <video>elemen memperoleh trek audio atau menjadi tidak bersuara tanpa isyarat pengguna, pemutaran akan dijeda.
    • <video autoplay> elemen hanya akan mulai diputar saat terlihat di layar seperti saat di-scroll ke viewport, dibuat terlihat melalui CSS, dan dimasukkan ke DOM.
    • <video autoplay> elemen akan dijeda jika tidak terlihat, seperti dengan di-scroll keluar dari viewport.

Info lebih lanjut di sini: https://webkit.org/blog/6784/new-video-policies-for-ios/

JackKalish
sumber
4
Atribut putar otomatis hanya berfungsi di PC, tidak berfungsi di seluler. Saya sudah mencoba berkali-kali.
huykon225
7

Dalam referensi HTML5 Safari ini , Anda dapat membaca

Untuk mencegah unduhan yang tidak diminta melalui jaringan seluler dengan biaya pengguna, media yang disematkan tidak dapat diputar secara otomatis di Safari di iOS — pengguna selalu memulai pemutaran. Pengontrol secara otomatis disediakan di iPhone atau iPod touch setelah pemutaran dimulai, tetapi untuk iPad Anda harus mengatur atribut kontrol atau menyediakan pengontrol menggunakan JavaScript.

Giona
sumber
38
"selain dari file GIF yang dapat berukuran beberapa MB dan menggunakan bandwidth bahkan tanpa disadari orang"
Simon_Weaver
@Simon_Weaver x12 kali untuk sebagian besar waktu tepatnya.
Burak Tokak
2

Biarkan video dibisukan terlebih dahulu untuk memastikan pemutaran otomatis di ios, lalu suarakan jika Anda mau.

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