HTML5 Video autoplay pada iPhone

Question

Lebih

Sumber Tidak AMP-versi Sunting

HTML5 Video autoplay pada iPhone

Saya memiliki beberapa jenis masalah aneh. Saya mencoba untuk membuat website dengan dilingkarkan latar belakang video. Kode terlihat seperti ini:

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

Ini bekerja sempurna baik pada kebanyakan browser (IE perjuangan dengan objek-fit hal tapi aku don't pikiran), tetapi pada iPhone video won't autoplay tapi pada iPad itu. Saya sudah membaca New Kebijakan untuk iOS dan saya pikir saya memenuhi persyaratan (jika iPad tidak't autoplay). Saya melakukan beberapa pengujian lain:

Menghapus overlay div won't memperbaikinya
Menghapus z-index won't memperbaikinya
Wi-fi atau Seluler doesn't membuat perbedaan
Video filesize doesn't membuat perbedaan, terlalu

Saya lakukan itu salah atau tidak iPhone tidak't autoplay video dan selalu membutuhkan interaksi? Saya hanya peduli untuk iOS 10, saya tahu bahwa persyaratan yang berbeda pada iOS 9

TylerH

Pertanyaan edit 12 Juni 2018 в 4:20

Pemrograman

html5 ios video webkit autoplay

23 April 2017 в 11:18

18 tayangan

Mengomentari pertanyaan (1)

Pete Florence · Answer 1 · 2017-07-30T17:26:15+00:00

Pete Florence

Sumber Tidak AMP-versi Sunting

Apakah playsinline atribut membantu?

Berikut ini's apa yang saya miliki:

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

        </amp-video>

Lihat komentar pada playsinline di sini: https://webkit.org/blog/6784/new-video-policies-for-ios/

126

0

Komentar (9)

Dilip Godhani · Answer 2 · 2018-03-06T17:55:23+00:00

Dilip Godhani

Sumber Tidak AMP-versi Sunting

iOs 10+ memungkinkan video autoplay inline. tetapi anda harus mematikan "mode daya Rendah" pada iPhone anda.

halfer

Jawaban edit 12 Juni 2018 в 4:18

35

0

Komentar (5)

Shakti · Answer 3 · 2019-10-06T05:51:07+00:00

Berikut ini adalah sedikit hack untuk mengatasi semua pergumulan yang anda miliki untuk video autoplay di website:

Cek video ini bermain atau tidak.
Pemicu video bermain di acara seperti tubuh klik atau sentuh.

Catatan: Beberapa browser don't membiarkan video autoplay kecuali pengguna berinteraksi dengan perangkat.

Jadi script untuk memeriksa apakah bermain video adalah:

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

Dan kemudian anda hanya dapat autoplay video dengan melampirkan acara pendengar untuk tubuh:

$('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: atribut autoplay adalah sangat dasar yang perlu ditambahkan ke tag video lain dari script ini.

Anda dapat melihat contoh kerja dengan kode berikut ini di link ini:

Cara autoplay video ketika perangkat dalam mode daya rendah / data saving mode / safari browser masalah ini