'How to implement mouseEnter and mouseout play effect video in react?

I am hoping someone can help me. I am trying to apply the mouseenter and mouseout effect to these videos. I am having difficulty accomplishing that, I have tried using javascript in the HTML section of my react code by calling document.querySelectorAll('.clip'), but nothing works. I am truly lost and I thank you in advance for your time.

import React from 'react';
import './Project.css'

import video from '../videos/Screen Recording 2022-04-01 at 8.22.57 PM.mov';
import video1 from '../videos/Screen Recording 2022-04-01 at 8.23.25 PM.mov';
import video2 from '../videos/Screen Recording 2022-04-01 at 8.25.20 PM.mov';
import video3 from '../videos/Screen Recording 2022-04-01 at 8.27.28 PM.mov';
import video4 from '../videos/Screen Recording 2022-04-01 at 8.28.35 PM.mov';
import video5 from '../videos/Screen Recording 2022-04-01 at 8.30.37 PM.mov';
import video6 from '../videos/Screen Recording 2022-04-01 at 8.34.30 PM.mov';
import video7 from '../videos/Screen Recording 2022-04-03 at 3.51.52 AM.mov';
import video8 from '../videos/Screen Recording 2022-04-03 at 3.48.52 AM.mov';


const Project = ()=> {

  return (
    <div className='project'>
      <div className='container'>
        <div className='project-wrapper'>
          <div className='project-content'>
              <h1><span className='span'>3.</span> Past Projects</h1>
              <div className='project-content'>
             
                <div className='box'>
                   <video 
                   className='clip' src={video2} muted type='video/mp4' loop>

                   </video>
                </div>
                <div className='box'>
                 <video className='clip' src={video8} muted type='video/mp4' loop>

                 </video>
                </div>
                <div className='box'>
                 <video className='clip' src={video6} muted  type='video/mp4' loop >

                 </video>
                </div>
                <div className='box' >
                 <video className='clip' src={video} muted type='video/mp4' loop >

                 </video>
                </div>
                <div className='box'>
                 <video className='clip' src={video4} muted type='video/mp4' loop >

                 </video>
                </div>
                <div className='box'>
                 <video className='clip' src={video5} muted type='video/mp4' loop >

                 </video>
                </div>
                <div className='box'>
                 <video className='clip' src={video3} type='video/mp4' loop >

                 </video>
                </div>
                <div className='box'>
                 <video className='clip' src={video7} muted type='video/mp4' loop >

                 </video>
                </div>
                <div className='box'>
                 <video className='clip' src={video1} muted type='video/mp4' loop >

                 </video>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Project

reactjs

Solution 1:^[1]

All you have to do is create a ref and assign the ref to a video element and onMouseEnter event play video and onMouseLeave pause video make this a component and sent video src as a prop which returns that, hope you understand what I mean.

const ref = useRef(null);
  const handlePlayVideo = () => {
    ref.current.play();
  }
  const handlePauseVideo = () => {
    ref.current.pause();
  }

return (<video ref={ref}>
        <source src={video} type='video/mp4' onMouseEnter={handlePlayVideo} onMouseLeave={handlePauseVideo}/>)
</video>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Abbas Hussain

'How to implement mouseEnter and mouseout play effect video in react?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]