Воспроизведение видео и показ текста при наведении на изображение - PullRequest
Новая
       32

Воспроизведение видео и показ текста при наведении на изображение

0 голосов
/ 02 апреля 2019

Я ищу способ реализации наведения на изображение, которое запускает воспроизведение видео.Когда мышь больше не находится над изображением, изображение (плакат?) Должно отображаться снова.Там также должен быть текст, отображаемый над видео.Пожалуйста, смотрите пример ниже от Loop.У них есть этот эффект парения на их примерах.Я пробовал несколько решений с наложением изображений или постеров, но ни одно из них не дало мне плавного перехода от изображения к видео.См. Код ниже.

Я не знаю, как добавить текст поверх изображения / видео, которое получает этот текст "Исследовать" при наведении, как в примере из цикла: https://www.agentur-loop.com/ (наведите курсор на «цифровой», чтобы увидеть эффект).

Редактировать 1: Здесь: agentur-loop.com/cases, у них действительно плавный переход при наведении курсора с изображения на видеои если я наведите курсор мыши на видео, оно плавно переходит / исчезает обратно к изображению (постеру).Мое текущее состояние можно увидеть здесь, в самом низу здесь: fredericlouis.com/fredericlouis.com/admin Заранее спасибо!- 

$(document).ready(function() {
  $('.video2').each(function(i, obj) {
    $(this).on("mouseover", hoverVideo);
    $(this).on("mouseout", hideVideo);
  });
});

function hoverVideo() {
  $(this).find(".overlayImage").hide();
  $(this).find(".thevideo")[0].play();
}

function hideVideo(video) {
  $(this).find(".thevideo")[0].currentTime = 0;
  $(this).find(".thevideo")[0].pause();
  $(this).find(".overlayImage").show();
}

video2 {
  width: 1200px;
}

.overlayImage {
  position: absolute;
}

<div class="video2">
  <img src="images/apple_vr10.png" class="overlayImage" width="600" alt="apple vr" />
  <video class="thevideo" loop muted poster="images/apple_vr10.png" onmouseout="this.pause()">
        <source src="videos/apple_vr.mp4" type="video/mp4">
    </video>
 </div>

Ответы [ 2 ]

1 голос
/ 02 апреля 2019
  1. Поместите текст и видео в div и используйте относительные и абсолютные позиции, чтобы первый отображался перед видео
  2. Используйте CSS :hover, чтобы скрыть / отобразить текст при наведении
  3. Используйте JS для воспроизведения / приостановки видео, как вам нравится, в зависимости от того, наведена ли мышь на видео или нет

Решение заключается в простом ванильном JS, чтобы помочь не-jQuery пользователям, но может быть легко адаптирован для сокращения кода на несколько строк с помощью jQuery. 

let div = document.querySelector('div');
let video = document.querySelector('video');

div.onmouseover = () => video.play();
div.onmouseout = () => video.pause();
div {
  width: 100%;
  position: relative;
}
div > p {
  width: 100%;
  position: absolute;
  text-align: center;
  font-weight: bold;
  font-size: 2em;
  color: white;
  transition: all .5s;
}
div:hover > p {
  opacity: 0;
}
div > video {
  width: 100%;
  position: absolute;
}
<div>
  <video
    src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm"
    muted
  ></video>
  <p>Hover to play the video!</p>
</div>
0 голосов
/ 02 апреля 2019

Сайт agentur-loop переключение нескольких изображений (за короткое время) при наведении на текст ...

Это можно сделать, добавив слайд-шоу (карусель) с переходомвремя 0,1 с (очень маленькое) для каждого слайда;

Спасибо ...

...