Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/embedded-content/the-video-element/video-loading-lazy-autoplay-when-visible.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<link rel="author" title="Squarespace" href="https://www.squarespace.com/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.below-viewport {
margin-top: 1000vh;
}
</style>
<body>
<script>
const t = async_test(
"Video with loading=lazy and autoplay does not play while not visible, then plays once scrolled into view"
);
const video = document.createElement("video");
video.loading = "lazy";
video.src = "/media/A4.webm";
video.className = "below-viewport";
video.muted = true;
video.playsInline = true;
video.autoplay = true;
video.width = 100;
video.height = 100;
let scrolledIntoView = false;
video.addEventListener("play", () => {
assert_true(scrolledIntoView, "Video should fire play event after scrolling into view");
t.done();
});
document.body.appendChild(video);
t.step_timeout(() => {
assert_true(video.paused, "Video should be paused when not visible in viewport");
step_timeout(() => {
scrolledIntoView = true;
video.scrollIntoView();
}, 1000);
}, 2000);
</script>
</body>