Putar otomatis Video HTML5 di iPhone

92

Saya punya masalah yang aneh. Saya mencoba membuat situs web dengan video latar belakang yang melingkar. Kodenya terlihat seperti ini:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>
Luaskan cuplikan

Ini berfungsi dengan baik di sebagian besar browser (IE kesulitan dengan hal yang sesuai dengan objek ini tetapi saya tidak keberatan) tetapi di iPhone, video tidak dapat diputar otomatis tetapi di iPad melakukannya. Saya sudah membaca Kebijakan Baru untuk iOS dan saya rasa saya memenuhi persyaratan (jika tidak, iPad tidak akan diputar otomatis). Saya melakukan beberapa pengujian lain:

  • Menghapus div overlay tidak akan memperbaikinya
  • Menghapus z-index tidak akan memperbaikinya
  • Wifi atau Seluler tidak membuat perbedaan
  • Ukuran file video juga tidak membuat perbedaan

Apakah saya salah melakukannya atau apakah iPhone tidak mau memutar video secara otomatis dan selalu membutuhkan interaksi? Saya hanya peduli untuk iOS 10, saya tahu bahwa persyaratannya berbeda di iOS 9

ios html video webkit autoplay SeBa
sumber
Anda mungkin dapat menemukan bantuan di sini: stackoverflow.com/questions/41360490/… Secara pribadi, saya belum mendapatkan video sama sekali untuk diputar otomatis di iphone, bahkan setelah mengikuti semua tip dan kebijakan Apple tersebut.
Tandai
Aku butuh waktu berjam-jam untuk memikirkannya. Untuk mencoba menghemat berjam-jam orang lain saya telah merangkum temuan saya di blog. Semoga membantu. medium.com/@BoltAssaults/…
BoltCoder

Jawaban:

227

Apakah playsinline atribut membantu?

Inilah yang saya miliki:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

Lihat komentarnya di playsinlinesini: https://webkit.org/blog/6784/new-video-policies-for-ios/

Pete Florence
sumber
1
Halleluja! Terima kasih untuk ini, telah mencoba sekitar selusin solusi lain tetapi tidak berhasil.
tolmark
24
playsinlinebekerja untuk saya sehubungan dengan mutedmengingat kekhasan mode daya rendah pada iPhone
Ken
1
Inilah jawabannya.
JCraine
1
playsinlineMenyelamatkan hari !!!! Terima kasih sobat. BTW, kebijakan browser baru menuntut bahwa jika Anda ingin memulai ulang video secara otomatis, mulai tanpa suara atau Anda tidak akan dapat melakukannya. Contoh +1 untuk @ken untuk chrome: [ developers.google.com/web/updates/2017/09/…
Nuno Prata
22
Jika Anda menggunakan Bereaksi, perhatikan bahwa atribut playsinlineharus ditulis dalam CamelCase: playsInline. Jika tidak, itu tidak akan berhasil.
Quentin D
64

iOs 10+ memungkinkan video autoplay inline. tetapi Anda harus mematikan "Mode daya rendah" di iPhone.

Dilip Godhani
sumber
2
tip bagus tapi saya punya pertanyaan tentang ini yang saya kirimkan: stackoverflow.com/questions/50400902/…
Mathieu
8
Saya menghabiskan sekitar satu jam terakhir mencoba memahami mengapa video saya tidak diputar secara otomatis. Terima kasih untuk ini!
lior
2
Terima kasih untuk ini!
Nikita Rogatnev
4
Perlu disebutkan bahwa kami tidak dapat mengontrol perangkat pengguna dan mematikan Mode Daya Rendah. Satu-satunya hal yang dapat kami lakukan adalah meminta pengguna untuk "Matikan mode daya rendah" untuk mendapatkan pengalaman yang lebih baik
Muhammad Osama
1
Terjadi pada saya juga dan membuat saya gila sampai saya menemukan posting Anda. Saya sudah melihat spesifikasi Safari 11 dan 11.1 jika mereka mungkin benar-benar menonaktifkan autoplay tetapi itu hanya mode daya rendah ... kehidupan pengembang bisa jadi sulit. :-)
haeki
8

Berikut ini sedikit retasan untuk mengatasi semua kesulitan yang Anda miliki untuk putar otomatis video di situs web:

  1. Periksa video sedang diputar atau tidak.
  2. Memicu pemutaran video pada acara seperti klik tubuh atau sentuhan.

Catatan: Beberapa browser tidak mengizinkan video diputar otomatis kecuali pengguna berinteraksi dengan perangkat.

Jadi skrip untuk memeriksa apakah video diputar adalah: 

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

Dan kemudian Anda dapat memutar video secara otomatis dengan melampirkan event listener ke body:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

Catatan: autoplayatribut sangat dasar yang perlu ditambahkan ke tag video selain dari skrip ini.

Anda dapat melihat contoh kerja dengan kode di sini di tautan ini:

Cara memutar video secara otomatis saat perangkat dalam mode daya rendah / mode hemat data / masalah browser safari

Shakti
sumber
0

Saya memiliki masalah serupa dan saya mencoba beberapa solusi. Saya menyelesaikannya dengan menerapkan 2 pertimbangan.

  1. Menggunakan dangerouslySetInnerHtmluntuk menyematkan <video>kode. Sebagai contoh:
<div dangerouslySetInnerHTML={{ __html: `
    <video class="video-js" playsinline autoplay loop muted>
        <source src="../video_path.mp4" type="video/mp4"/>
    </video>`}}
/>
  1. Mengubah ukuran berat video. Saya perhatikan iPhone saya tidak memutar otomatis video lebih dari 3 megabyte . Jadi saya menggunakan alat kompresor online ( https://www.mp4compress.com/ ) untuk beralih dari 4mb menjadi kurang dari 500kb

Juga, terima kasih kepada @boltcoder untuk panduannya: Putar otomatis video HTML5 tanpa suara menggunakan React di seluler (Safari / iOS 10+)

maxrojas.dll
sumber