calvin.erfmann/WhatsApp-Chat-Exporter
1
0
Fork 0
mirror of https://github.com/KnugiHK/WhatsApp-Chat-Exporter.git synced 2026-04-24 06:51:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement lazy loading for video (#103)

Browse Source
This commit is contained in:
KnugiHK
2025-02-09 13:23:23 +08:00
parent bf993c5302
commit f300e017ed
1 changed files with 34 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
Whatsapp_Chat_Exporter/whatsapp.html
View File

@@ -20,7 +20,6 @@
} }
footer { footer {
border-top: 2px solid #e3e6e7; border-top: 2px solid #e3e6e7;
font-size: 2em;
padding: 20px 0 20px 0; padding: 20px 0 20px 0;
} }
article { article {
@@ -156,8 +155,8 @@
<source src="{{ msg.data }}" /> <source src="{{ msg.data }}" />
</audio> </audio>
{% elif "video/" in msg.mime %} {% elif "video/" in msg.mime %}
<video controls="controls" autobuffer="autobuffer"> <video class="lazy" controls autobuffer>
<source src="{{ msg.data }}" /> <source type="{{ msg.mime }}" data-src="{{ msg.data }}" />
</video> </video>
{% elif "/" in msg.mime %} {% elif "/" in msg.mime %}
<div class="w3-panel w3-border-blue w3-pale-blue w3-rightbar w3-leftbar w3-threequarter w3-center"> <div class="w3-panel w3-border-blue w3-pale-blue w3-rightbar w3-leftbar w3-threequarter w3-center">
@@ -246,8 +245,8 @@
<source src="{{ msg.data }}" /> <source src="{{ msg.data }}" />
</audio> </audio>
{% elif "video/" in msg.mime %} {% elif "video/" in msg.mime %}
<video controls="controls" autobuffer="autobuffer"> <video class="lazy" controls autobuffer>
<source src="{{ msg.data }}" /> <source type="{{ msg.mime }}" data-src="{{ msg.data }}" />
</video> </video>
{% elif "/" in msg.mime %} {% elif "/" in msg.mime %}
<div class="w3-panel w3-border-blue w3-pale-blue w3-rightbar w3-leftbar w3-threequarter w3-center"> <div class="w3-panel w3-border-blue w3-pale-blue w3-rightbar w3-leftbar w3-threequarter w3-center">
@@ -277,6 +276,36 @@
{% else %} {% else %}
End of history End of history
{% endif %} {% endif %}
<br>
Portions of this page are reproduced from <a href="https://web.dev/articles/lazy-loading-video">work</a> created and <a href="https://developers.google.com/readme/policies">shared by Google</a> and used according to terms described in the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>.
</footer> </footer>
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
if ("IntersectionObserver" in window) {
var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(video) {
if (video.isIntersecting) {
for (var source in video.target.children) {
var videoSource = video.target.children[source];
if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
videoSource.src = videoSource.dataset.src;
}
}
video.target.load();
video.target.classList.remove("lazy");
lazyVideoObserver.unobserve(video.target);
}
});
});
lazyVideos.forEach(function(lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
}
});
</script>
</body> </body>
</html> </html>