Video changes back to cover image when not in hover-CodePudding

I wrote the following HTML to show a thumbnail that plays a video in hover.

<video onm ouseover="this.play()" onm ouseout="this.pause();this.currentTime=0;"  poster="img.jpg">
<source src="video.mp4" type="video/mp4"></source>
</video>

I want the thumbnail to show the original cover image when not in hover, and not remain on the paused video. How is that possible with HTML?

CodePudding user response：

It doesn't seem to be possible within the HTML <video> element, so you could try to emulate it with CSS. You can add an absolute positioned element with the image on top of the video container. The image should probably contain a play icon or something that signals that the user can click/hover to see the video. On :hover you can hide the image with display:none and this means if the cursor is removed from the video container area the image will pop back into place.

Something like this (you can remove poster.jpg in the video element):

<style>
.video-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.video-poster-overlay {
  position: absolute;
  background: url("https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg") no-repeat;
  background-size: cover;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.video-poster-overlay:hover {
  display: none;
}

video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
}
</style>

<div >
  <div ></div>

  <video onm ouseover="this.play()" onm ouseout="this.pause();this.currentTime=0;">
    <source src="video.mp4" type="video/mp4"></source>
  </video>
</div>

CodePudding user response：

first I think you did a mistake in the syntax of your code : you don't write a closing tag to the<source> tag.

secondly If I did understood your question right here is a possible solution:

Html

<section>
  <video src="https://video-hover-1.superhi.com/1-island.mp4" loop></video>
</section>

css

* {box-sizing: border-box;}
body {background:#eee;}
section {padding:30px;}
video {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 33.3%;
  padding:20px;
  float: left;
}

javascript:

const videos = document.querySelectorAll("video")

videos.forEach(video => {
  video.addEventListener("mouseover", function () {
    this.play()
  })
  
  video.addEventListener("mouseout", function () {
    this.pause()
  })
  
  video.addEventListener("touchstart", function () {
    this.play()
  })
  
  video.addEventListener("touchend", function () {
    this.pause()
  })
})