Почему на моем видео появляется плакат, когда я двигаю мышь?

Question

Я пытаюсь сделать следующий код, используя mouseover / mouseout для воспроизведения и приостановки видео HTML.

  <div>
    <video id="video" controls width="50%" class="border" onmouseout="Stop()" onmouseover="Play()" controls="false">
        <source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay></source>
    </video>

  </div>
</div>

JS

function Play() {
     $('#video').get(0).play();
 }
 function Stop() {
      $('#video').get(0).pause();
  }

То, что я хочу каждый раз Я наведите курсор мыши, над видео появляется плакат или изображение. (Как и в следующем примере на этом сайте: https://www.lawebdecanada.com/work/featured/)

Я отмечаю, что могу это сделать, надеюсь, кто-то поможет мне разобраться, как это сделать. Это мой код на codepen: https://codepen.io/felixgonzalo/pen/abzQPjZ

Спасибо!

Answer 1

Чтобы элемент покрывал другой элемент, вы можете поместить его в тот же контейнер и использовать position: absolute и более высокий z-index на оверлее. Затем в событиях mouseenter и mouseleave (примечание: , а не mouseout и mouseover) вы можете скрыть / показать наложение и воспроизвести. / Приостановить видео. Попробуйте это:

var container = document.querySelector('.video-container');

container.addEventListener('mouseleave', function() {
  this.querySelector('.overlay').classList.remove('hide');
  this.querySelector('.video').pause();
});

container.addEventListener('mouseenter', function() {
  this.querySelector('.overlay').classList.add('hide');
  this.querySelector('.video').play();
});

.video-container {
  position: relative;
  width: 300px;
}
.video-container video {
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #C00;
  color: #FFF;
  display: block;
  z-index: 10;
  text-align: center;
}
.overlay.hide {
  display: none;
}
.overlay p {
  margin-top: 75px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-container">
  <video class="video" controls class="border" controls="false">
    <source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay />
  </video>
  <div class="overlay">
    <p>Hover me</p>
  </div>
</div>

Answer 2

Вы можете сбросить currentTime значение на 0 в Stop функции:

$('#video').prop('currentTime', 0)

function Play() {
     $('#video').get(0).play();
}
function Stop() {
    $('#video').prop('currentTime', 0).get(0).pause();
}

video::-webkit-media-controls {


    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <div>
    <video id="video" controls width="50%" class="border" onmouseout="Stop()" onmouseover="Play()" controls="false">
        <source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay></source>
    </video>
           
  </div>
</div>

Answer 3

Я сделал пример, основанный на том, что ваш CodePen изменил мелочи, и добавил наложение, используя CSS переход для эффекта наведения, надеюсь, это поможет ~

function Play() {
     $('#video').get(0).play();
}
function Stop() {
    $('#video').get(0).pause();
}

.container {
  position: relative;
  width: 50%;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  padding-top: 50px;
  color: white;
  font-size: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: 0.3s opacity;
}

.overlay:hover {
  opacity: 0;
}

video {
  width: 100%;
}

video::-webkit-media-controls {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="overlay" onmouseout="Stop()" onmouseover="Play()">
      Overlay
    </div>
    <video id="video" controls class="border" controls="false">
        <source src="https://www.errorerror.studio/wp-content/uploads/2020/01/ee.st-honesty-clip-00.mp4" preload="auto" type="video/mp4" autoplay></source>
    </video>
</div>

Answer 4

Веб-сайт, на который вы ссылаетесь, достигает этого, имея родительский элемент, который содержит элемент div с изображением и другой элемент div с видео.

CSS используется для скрытия элемента div следующим образом:

.parent:hover .preview {
    display: none;
}

В остальном вы можете использовать имеющийся у вас код JavaScript, хотя использование атрибутов HTML для управления событиями не рекомендуется.