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 dan saya pikir saya memenuhi persyaratan (jika iPad tidak't autoplay). Saya melakukan beberapa pengujian lain:
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
Apakah playsinline
atribut membantu?
Berikut ini's apa yang saya miliki:
<video autoplay loop muted playsinline class="video-background ">
<source src="videos/intro-video3.mp4" type="video/mp4">
</video>
Lihat komentar pada playsinline
di sini: https://webkit.org/blog/6784/new-video-policies-for-ios/
iOs 10+ memungkinkan video autoplay inline. tetapi anda harus mematikan "mode daya Rendah" pada iPhone anda.
Berikut ini adalah sedikit hack untuk mengatasi semua pergumulan yang anda miliki untuk video autoplay di website:
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: