How to preview videos in React

Hey there! I was messing with a small project that used video tags, and found something useful to share with you. I'm talking about creating a VideoPreview component that previews the video when you hover the mouse over it, like YouTube does.

First of all, the final result and the code (very simplified) is here, for you to try and take a look. If you want a brief explanation, see below.

First of all, we are going to use a <video> tag with a few tweaks. Did you know that Safari supports <img> with mp4 source?.

<video
  // we don't want the video to play sound on preview (optional)
  muted={true}
  // it looks better if we hide the controls for the preview only
  controls={false}
  // the magic happens on these two functions:
  onMouseEnter={handleMouseEnter}
  onMouseLeave={handleMouseLeave}
>
  <source type="video/mp4" src="/video.mp4"></source>
  <p>Your browser does not support HTML video</p>
</video>

After adding the video tag, you will need to define the functions to handle the cursor entering and leaving the video (i.e. starting the preview and stopping). The functions are very simple:

Typescript:

const handleMouseEnter = (e: MouseEvent<HTMLVideoElement>) => {
  // MouseEvent is imported from 'react', HTMLVideoElement is native
  const v = e.target as HTMLVideoElement;
  // sometimes it crashes if you interact quickly,
  // so we want it to fail silently
  v.play().catch(() => {});
};

const handleMouseLeave = (e: MouseEvent<HTMLVideoElement>) => {
  const v = e.target as HTMLVideoElement;
  // let's reset the video position to 0
  v.currentTime = 0;
  // and pause it to simulate the "stop"
  v.pause();
};

Javascript:

const handleMouseEnter = (e) => {
  const v = e.target;
  v.play().catch(() => {});
};

const handleMouseLeave = (e) => {
  const v = e.target;
  v.currentTime = 0;
  v.pause();
};

Just 2-3 lines each! And it's the only think that you will need.

As a little extra, I added some text as a sibling of the video node, made it position: absolute inside the (relative) parent container, and you can have some cool title/metadata of the video together with the preview itself.

Try for yourself, and I hope this solution might be useful for you!

Hope you enjoyed the article, let me know your thoughts on Twitter, and see you on the next one ✌🏻