Сделаем так чтобы в блоке выводилась картинка превью видео и только при наведении на блок видео запускалось.
document.querySelectorAll('.video_go').forEach(function(container) {
const video = container.querySelector('.lazy');
container.addEventListener('mouseenter', function() {
if (video && video.paused) {
video.play();
}
});
container.addEventListener('mouseleave', function() {
if (video && !video.paused) {
video.pause();
}
});
});В этом же примере настроено наведение не на само видео а на контейнер (.video_go) в который обёрнуто видео.
Если нужно чтобы видео каждый раз начиналось с начала:
document.querySelectorAll('.lazy').forEach(function(video) {
video.addEventListener('mouseenter', function() {
// Воспроизводим видео и отключаем цикл, чтобы оно не перезапускалось
video.play();
});
video.addEventListener('mouseleave', function() {
// Останавливаем видео и возвращаемся к статичному постеру
video.pause();
video.currentTime = 0;
});
});Оба способа корректно работают с отложенной загрузкой видео.
[site-socialshare]
