64 lines
2.2 KiB
JavaScript
64 lines
2.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const cardCovers = document.querySelectorAll('.small-card-cover, .card-cover');
|
|
|
|
cardCovers.forEach(cardCover => {
|
|
const thumbnail = cardCover.querySelector('.thumbnail');
|
|
const video = cardCover.querySelector('.preview-video');
|
|
const videoSource = video.querySelector('source');
|
|
|
|
const showPreview = () => {
|
|
thumbnail.style.display = 'none';
|
|
video.style.display = 'block';
|
|
|
|
if (video.duration > 15) {
|
|
video.currentTime = 10;
|
|
const loopSegment = () => {
|
|
if (video.currentTime >= 15) {
|
|
video.currentTime = 10;
|
|
video.play();
|
|
}
|
|
};
|
|
video.addEventListener('timeupdate', loopSegment);
|
|
cardCover.loopSegment = loopSegment;
|
|
} else {
|
|
video.currentTime = 0;
|
|
const loopEntireVideo = () => {
|
|
if (video.currentTime >= video.duration) {
|
|
video.currentTime = 0;
|
|
video.play();
|
|
}
|
|
};
|
|
video.addEventListener('timeupdate', loopEntireVideo);
|
|
cardCover.loopSegment = loopEntireVideo;
|
|
}
|
|
|
|
video.play();
|
|
};
|
|
|
|
cardCover.addEventListener('mouseenter', () => {
|
|
video.pause();
|
|
videoSource.src = video.dataset.src;
|
|
video.load();
|
|
video.addEventListener('canplay', showPreview, { once: true });
|
|
});
|
|
|
|
cardCover.addEventListener('mouseleave', (e) => {
|
|
const toElement = e.relatedTarget;
|
|
|
|
if (!cardCover.contains(toElement)) {
|
|
video.pause();
|
|
video.currentTime = 0;
|
|
video.style.display = 'none';
|
|
thumbnail.style.display = 'block';
|
|
|
|
if (cardCover.loopSegment) {
|
|
video.removeEventListener('timeupdate', cardCover.loopSegment);
|
|
delete cardCover.loopSegment;
|
|
}
|
|
|
|
videoSource.src = '';
|
|
}
|
|
});
|
|
});
|
|
});
|