Estoy reproduciendo algunos videos en mouseenter, y todo funciona bien en Chrome pero no en Safari, aquí hay un ejemplo de lo que sucede: (Gif: https://gyazo.com/cc4693840cd30fee3f61cda6082e6f7f )
También intenté reproducir el video con el evento 'canplay'... Canplay
Se oculta justo antes de reproducir el video... No debería saltar, justo después de quitar el póster, el video debería reproducirse... También lo intenté con preload="auto" y cargué el video primero en js y después de unos pocos segundos jugando con un tiempo de espera establecido
Solo sucede la primera vez que pasas el cursor sobre el video (porque tiene que cargar)
Primera vez que me pasa
Aquí está el código:
document.querySelectorAll('.work').forEach((work) => { work.addEventListener('mouseenter', function() { // this.querySelector('video').load(); // setTimeout(() => { this.querySelector('video').play(); // }, 3000); }) work.addEventListener('mouseleave', function() { this.querySelector('video').currentTime = 0; this.querySelector('video').pause(); }); }); .work { float: left; width: calc(50% - 5px); } .work:before { display: block; content: ""; width: 100%; padding-top: 56.25%; pointer-events: none; } video { position: absolute; top: 0; left:0; width: 100%; height: 100%; object-fit: cover; right: 0; left: 0; } <div class="work"><video muted="" playsinline="" preload="metadata" loop="" src="https://player.vimeo.com/progressive_redirect/playback/670660302/rendition/1080p/1080p.mp4?loc=external&signature=23ceaaa3a5475f94cfbe326a81c9c01ce8b02a217e54c7262bb6cf23dd3390d3" poster="http://ticklefilm.com/new/wp-content/uploads/2021/12/IMG_9660-720x1080.jpg"></video></div>