| 19 | const videos = document.querySelectorAll('video.demo-video'); |
| 20 | |
| 21 | function applyMotionPreference(reduce) { |
| 22 | videos.forEach((v) => { |
| 23 | if (reduce) { |
| 24 | v.autoplay = false; |
| 25 | v.loop = false; |
| 26 | v.removeAttribute('autoplay'); |
| 27 | try { v.pause(); } catch (_) {} |
| 28 | v.currentTime = 0; |
| 29 | v.controls = true; |
| 30 | } else { |
| 31 | v.autoplay = true; |
| 32 | v.loop = true; |
| 33 | v.setAttribute('autoplay', ''); |
| 34 | const playPromise = v.play(); |
| 35 | if (playPromise && typeof playPromise.catch === 'function') { |
| 36 | playPromise.catch(() => { /* autoplay blocked — controls are always on, user can press play */ }); |
| 37 | } |
| 38 | } |
| 39 | }); |
| 40 | } |
| 41 | |
| 42 | applyMotionPreference(mql.matches); |
| 43 | if (typeof mql.addEventListener === 'function') { |