64 lines
2.3 KiB
JavaScript
64 lines
2.3 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');
|
|
let hoverTimeout;
|
|
|
|
cardCover.addEventListener('mouseenter', () => {
|
|
hoverTimeout = setTimeout(() => {
|
|
|
|
if (!videoSource.src) {
|
|
videoSource.src = video.dataset.src;
|
|
video.load();
|
|
}
|
|
|
|
thumbnail.style.display = 'none';
|
|
video.style.display = 'block';
|
|
|
|
video.addEventListener('loadedmetadata', () => {
|
|
|
|
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();
|
|
});
|
|
}, 2000);
|
|
});
|
|
|
|
cardCover.addEventListener('mouseleave', () => {
|
|
clearTimeout(hoverTimeout);
|
|
video.pause();
|
|
video.style.display = 'none';
|
|
thumbnail.style.display = 'block';
|
|
|
|
if (cardCover.loopSegment) {
|
|
video.removeEventListener('timeupdate', cardCover.loopSegment);
|
|
delete cardCover.loopSegment;
|
|
}
|
|
});
|
|
});
|
|
}); |