Soy desarrollador de un sitio web en Ruby on Rails. Tengo una página donde muestro los videos que recupero de la base de datos. Los enlaces de video se guardan en la base de datos y los recupero en mi controlador. En mi opinión, estoy tratando de mostrar todos los videos y reproducir parte del video al pasar el mouse. El problema al que me enfrento es que solo se reproduce el primer video al pasar el mouse por encima. Todos los demás videos no se reproducen. Estoy usando Javascript para agregar efecto de desplazamiento. Aquí hay un fragmento de mi vista:
<% @clips.each do |clip| %> <video width="200px" height="200px"> <source src=<%= clip.custom_video_link%>> </video>Aquí está mi código Javascript:
<script> const video = document.querySelector("video"); function startPreview() { video.muted = true; video.currentTime = 1; video.playbackRate = 0.5; video.play(); } function stopPreview() { video.currentTime = 0; video.playbackRate = 1; video.pause(); } let previewTimeout = null; video.addEventListener("mouseenter", () => { startPreview(); previewTimeout = setTimeout(stopPreview, 4000); }); video.addEventListener("mouseleave", () => { clearTimeout(previewTimeout); previewTimeout = null; stopPreview(); }); </script>Código JavaScript:
var figure = $(".video").hover( hoverVideo, hideVideo ); function hoverVideo(e) { $('video', this).get(0).play(); } function hideVideo(e) { $('video', this).get(0).pause(); }Código HTML:
<div class="video"> <video class="thevideo" loop preload="none" width="200px" height="200px"> <source src="[insert source here]" type="video/[insert video type here]" /> </video> </div>Esto debería funcionar, avísame si no funciona e intentaré ayudarte un poco más.