Skip to content

Commit e9b8ae7

Browse files
monanemonane
authored
Update default.html
1 parent c4fb2dc commit e9b8ae7

1 file changed

Lines changed: 69 additions & 45 deletions

File tree

‎_layouts/default.html‎

Lines changed: 69 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -12,98 +12,122 @@
1212

1313
<div class="vertical-videos">
1414
<div class="video-container">
15-
<video muted playsinline loop>
16-
<source src="videos/ar-theatre.mp4" type="video/mp4">
15+
<video muted playsinline loop preload="none">
16+
<source data-src="videos/ar-theatre.mp4" type="video/mp4">
1717
</video>
1818
</div>
1919

2020
<div class="video-container">
21-
<video muted playsinline loop>
22-
<source src="videos/8thwall-webar.mp4" type="video/mp4">
21+
<video muted playsinline loop preload="none">
22+
<source data-src="videos/8thwall-webar.mp4" type="video/mp4">
2323
</video>
2424
</div>
2525

2626
<div class="video-container">
27-
<video muted playsinline loop>
28-
<source src="videos/zemlekop-ar.mp4" type="video/mp4">
27+
<video muted playsinline loop preload="none">
28+
<source data-src="videos/zemlekop-ar.mp4" type="video/mp4">
2929
</video>
3030
</div>
3131

3232
<div class="video-container">
33-
<video id="ar-experiments" muted playsinline loop>
34-
<source src="videos/ar-experiments.webm" type="video/webm">
33+
<video id="ar-experiments" muted playsinline loop preload="none">
34+
<source data-src="videos/ar-experiments.webm" type="video/webm">
3535
</video>
3636
</div>
3737
</div>
3838

3939
<div class="horizontal-videos">
40-
<video muted playsinline loop>
41-
<source src="https://user74522.clients-cdnnow.ru/static/manual-uploads/review-videos/xreal-demo.mp4" type="video/mp4">
40+
<video muted playsinline loop preload="none">
41+
<source data-src="https://user74522.clients-cdnnow.ru/static/manual-uploads/review-videos/xreal-demo.mp4" type="video/mp4">
4242
</video>
43-
<video muted playsinline loop>
44-
<source src="videos/editor-demo.mp4" type="video/mp4">
43+
<video muted playsinline loop preload="none">
44+
<source data-src="videos/editor-demo.mp4" type="video/mp4">
4545
</video>
46-
<video muted playsinline loop>
47-
<source src="https://user74522.clients-cdnnow.ru/static/manual-uploads/review-videos/object-tracking.mp4" type="video/mp4">
46+
<video muted playsinline loop preload="none">
47+
<source data-src="https://user74522.clients-cdnnow.ru/static/manual-uploads/review-videos/object-tracking.mp4" type="video/mp4">
4848
</video>
49-
<video muted playsinline loop>
50-
<source src="https://user74522.clients-cdnnow.ru/static/manual-uploads/review-videos/orbslam2-demo.mp4" type="video/mp4">
49+
<video muted playsinline loop preload="none">
50+
<source data-src="https://user74522.clients-cdnnow.ru/static/manual-uploads/review-videos/orbslam2-demo.mp4" type="video/mp4">
5151
</video>
5252

53-
<video muted playsinline loop>
54-
<source src="videos/bibalina-ar-learning.webm" type="video/webm">
53+
<video muted playsinline loop preload="none">
54+
<source data-src="videos/bibalina-ar-learning.webm" type="video/webm">
5555
</video>
56-
<video muted playsinline loop>
57-
<source src="videos/gravican.mp4" type="video/mp4">
56+
<video muted playsinline loop preload="none">
57+
<source data-src="videos/gravican.mp4" type="video/mp4">
5858
</video>
59-
<video muted playsinline loop>
60-
<source src="videos/sniper.webm" type="video/webm">
59+
<video muted playsinline loop preload="none">
60+
<source data-src="videos/sniper.webm" type="video/webm">
6161
</video>
6262
</div>
6363

6464
<div class="vertical-videos">
6565
<div class="video-container">
66-
<video muted playsinline loop>
67-
<source src="videos/arcade-idle.webm" type="video/webm">
66+
<video muted playsinline loop preload="none">
67+
<source data-src="videos/arcade-idle.webm" type="video/webm">
6868
</video>
6969
</div>
7070

7171
<div class="video-container">
72-
<video muted playsinline loop>
73-
<source src="videos/paint-ball.webm" type="video/webm">
72+
<video muted playsinline loop preload="none">
73+
<source data-src="videos/paint-ball.webm" type="video/webm">
7474
</video>
7575
</div>
7676

7777
<div class="video-container">
78-
<video muted playsinline loop>
79-
<source src="videos/runner.webm" type="video/webm">
78+
<video muted playsinline loop preload="none">
79+
<source data-src="videos/runner.webm" type="video/webm">
8080
</video>
8181
</div>
8282

8383
<div class="video-container">
84-
<video id="pursuit-concept" muted playsinline loop>
85-
<source src="videos/pursuit-concept.webm" type="video/webm">
84+
<video id="pursuit-concept" muted playsinline loop preload="none">
85+
<source data-src="videos/pursuit-concept.webm" type="video/webm">
8686
</video>
8787
</div>
8888
</div>
8989

9090
<script>
91-
document.querySelectorAll("video").forEach((video) => {
92-
const observer = new IntersectionObserver(
93-
(entries) => {
94-
entries.forEach((entry) => {
95-
if (entry.isIntersecting) {
96-
video.play();
97-
} else {
98-
video.pause();
99-
}
91+
document.querySelectorAll("video").forEach((video) => {
92+
const source = video.querySelector("source");
93+
94+
const loadAndPlay = () => {
95+
if (!source.src) {
96+
// Set real src to start loading
97+
source.src = source.dataset.src;
98+
video.load();
99+
}
100+
101+
// Play when ready
102+
const tryPlay = () => {
103+
if (video.readyState >= 2) {
104+
video.play().catch((err) => {
105+
console.warn("Play failed:", err);
100106
});
101-
},
102-
{ threshold: 0.25 }
103-
);
104-
observer.observe(video);
105-
});
106-
</script>
107+
} else {
108+
setTimeout(tryPlay, 100);
109+
}
110+
};
111+
112+
tryPlay();
113+
};
114+
115+
const observer = new IntersectionObserver(
116+
(entries) => {
117+
entries.forEach((entry) => {
118+
if (entry.isIntersecting) {
119+
loadAndPlay();
120+
} else {
121+
video.pause();
122+
}
123+
});
124+
},
125+
{ threshold: 0.25 }
126+
);
127+
128+
observer.observe(video);
129+
});
130+
</script>
107131
</body>
108132

109133
</html>

0 commit comments

Comments
 (0)