[ad_1]
Pada artikel ini, kita akan membahas cara menggunakan IntersectionObserver untuk membuat klip video hanya diputar saat berada di viewport (lalu berhenti saat pengunjung terus menggulir).
Ini adalah solusi sempurna untuk klip video panjang yang Anda ingin memastikan pengunjung menonton (mendapatkan manfaat dari putar otomatis, tetapi pastikan bahwa video hanya diputar saat di viewport sehingga pengunjung tidak melewatkan sesuatu yang penting).
Bagaimana kita akan melakukan ini dengan Javascript murni? Mudah… IntersectionObserver.
API ini dapat digunakan dalam banyak cara, tetapi kami akan fokus pada implementasi khusus video.
Kasus penggunaan yang umum adalah iklan dengan putar otomatis diaktifkan (diputar segera setelah dimuat), dan kemudian berhenti saat berada di luar area pandang. Ini memastikan semua pengunjung melihat iklan.
const video = document.querySelector("video");
let playState = null;
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
video.pause();
playState = false;
} else {
video.play();
playState = true;
}
});
}, {});
observer.observe(video);
const onVisibilityChange = () => {
if (document.hidden || !playState) {
video.pause();
} else {
video.play();
}
};
document.addEventListener("visibilitychange", onVisibilityChange);
Code language: JavaScript (javascript)
Apa yang perlu Anda lakukan? Tidak ada apa-apa selain mengubah baris berikut, untuk lebih spesifik:
querySelector("video");
Code language: JavaScript (javascript)
[ad_2]
Source link