Tengo problemas con un video HTML5. Mire, es un video que cuando pasa el mouse tiene que mostrar una superposición semitransparente que incluye texto. Cuando el ratón se apaga, tiene que volver a mostrar el cartel. El póster es un atributo que muestra una miniatura del video cuando aún no se ha reproducido.

Para mostrar el póster, he buscado otras preguntas de desbordamiento de pila y la solución es hacer: video.load(); .

Así que tengo la siguiente pieza de código:

HTML:

 <div class="video-container" onMouseOver="video.play();showOverlay('#video-overlay');" onMouseOut="video.load();hideOverlay('#video-overlay');"> <video poster="https://example.com/poster.jpg" src="https://example.com/video.mp4" id="video" width="300" muted="muted" loop title="Example video" /> <a href="#"> <div class="overlay" id="video-overlay"> <h5>Overlay Title</h5> <p>Overlay Description</p> </div> </a> </div>

CSS:

 .video-container { position: relative; } .overlay { background: rgba(0,0,0,0.6); position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: 0.5s ease-in; z-index: 999; /* does not work */ } .overlay > h5 { font-size: 30px; font-weight: 900; text-transform: uppercase; }

JS:

 function showOverlay(selector){ const overlay = document.querySelector(selector); overlay.style.opacity = "1"; } function hideOverlay(selector){ const overlay = document.querySelector(selector); overlay.style.opacity = "0"; }

VER LA DEMOSTRACIÓN

El problema:

Bueno, cuando pasas el cursor sobre el video y estás cerca del texto (etiquetas h5 o p), el video se carga nuevamente. No debería reiniciarse, sino continuar normalmente.

Consejo: he reemplazado video.load(); para video.pause(); y todo funciona bien. Pero esa no es la funcionalidad que quiero.