19 lines
654 B
JavaScript
19 lines
654 B
JavaScript
const demo = document.querySelector('#desktop-demo');
|
|
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
let started = false;
|
|
|
|
// Start muted when the demo comes into view. Native controls remain available
|
|
// without JavaScript and after a visitor pauses playback.
|
|
const visibility = new IntersectionObserver(([entry]) => {
|
|
if (!entry.isIntersecting) {
|
|
demo.pause();
|
|
} else if (!started && !reducedMotion.matches) {
|
|
started = true;
|
|
demo.play().catch(() => {});
|
|
}
|
|
}, { threshold: 0.25 });
|
|
visibility.observe(demo);
|
|
reducedMotion.addEventListener('change', () => {
|
|
if (reducedMotion.matches) demo.pause();
|
|
});
|