Estoy trabajando en una página web donde el video se reproduce al pasar el mouse y se detiene al alejar el mouse, usando eventos jQuery:

 $video.on("mouseover", function(e) { e.preventDefault(); this.muted = true; this.play(); }).on("mouseout", function(e) { e.preventDefault(); this.pause(); });

El elemento de video tiene un atributo de póster.

Esto funciona bien en los navegadores Firefox y Chrome. También funciona bien en Safari/13 y Safari/15. Pero en Safari/14 y Safari/12, el video desaparece. (Reaparece durante la reproducción, pero al hacer una pausa, vuelve a desaparecer).

Si agrego el atributo "controles", seguirá mostrando los controles al alejar el mouse, pero el video está en blanco. Así que estoy seguro de que no es un problema de estilo lo que hace que el video desaparezca.

No estoy seguro de cómo arreglar esto. Intenté usar eventos mousenter/mouseleave en su lugar y ajustar el atributo de precarga sin éxito.