/ Scripts & jquery / Запуск видео при наведении

Запуск видео при наведении

15.10.2025

383

Сделаем так чтобы в блоке выводилась картинка превью видео и только при наведении на блок видео запускалось.

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]
  • Похожие записи
  • Комментарии
  • Вложения
Произвольное поле — Видео

Произвольное поле — Видео

Тип поля Видео В произвольных полях изначально отсутствует тип поля Видео. Его можно добавить небольшим плагином acf-field-video. Просто копируем папку acf-field-video-master в папку plugins и в админке включаем его. Далее Читать далее »

Фон — видео

Фон — видео

Очень эффектно, для главной страницы, смотрится фон из видео. Рассмотрим основные моменты данной «фишки». Добавление видеофона в вёрстку CSS стили, адаптация под размер области, с наложением пиксельной сетки поверх видео Читать далее »

Вкладка видеообзор

Вкладка видеообзор

Для некоторых товаров в интернет-магазине требуется видеообзор — сделаем для них на странице товара вкладку. Создаем дополнительное поле Видеообзор Создаем вкладку Видеообзор Проблема X-Frame-Options Проблема X-Frame-Options решается следующим образомдля youtubeперед Читать далее »

Добавить комментарий

Notice: Функция WP_Styles::add вызвана неправильно. Стиль с дескриптором "editor-buttons" был поставлен в очередь с незарегистрированными зависимостями: dashicons. Дополнительную информацию можно найти на странице «Отладка в WordPress». (Это сообщение было добавлено в версии 6.9.1.) in /home/t/tiberi6w/opttour.ru/public_html/wp-includes/functions.php on line 6170

Пока нет комментариев. Будь первым!

Запуск видео при наведении
Поиск по сайту
Рекомендации для васПоиск по сайтуOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.