React - Hover Video Player

01.설치

npm install react-hover-video-player

02.hover-video-player 사용하기

src/component/MainClick/pages.Review.js

import React from "react"
import HoverVideoPlayer from "react-hover-video-player"
import LoadingOverlay from "../Loading.js"
import PausedOverlay from "../Paused.js"

import review from "../../../video/MainClick/review.mp4"
import { ReviewImg } from "../../../image/index.js"

const Review = () => {
  return (
    <HoverVideoPlayer
      videoSrc={review}
      videoStyle={{
        width: "700px",
        height: "350px",
        borderRadius: "30px",
      }}
      pausedOverlay={<PausedOverlay image={ReviewImg} />}
      loadingOverlay={<LoadingOverlay />}
    />
  )
}

export default Review

src/component/MainClick/Loading.js

import { css, keyframes } from "@emotion/css"

const loadingOverlaySpinnerAnimation = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`

const LoadingOverlay = () => (
  <div
    className={css`
      width: 700px;
      height: 350px;
      top: 0;
      left: 0;
      border-radius: 30px;
      background-color: rgba(255, 255, 255, 0.7);
      display: flex;
      justify-content: center;
      align-items: center;
    `}
>
    <div
      className={css`
        border: 6px solid white;
        border-radius: 50%;
        border-color: white white transparent transparent;
        animation: ${loadingOverlaySpinnerAnimation} 1s linear infinite;
      `}
    />
  </div>
)

export default LoadingOverlay

src/component/MainClick/Paused.js

import { css } from "@emotion/css"

const PausedOverlay = (props) => (
  <div>
    <img
      src={props.image}
      alt=""
      className={css`
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        border-radius: 30px;
      `}
    />
    <div
      className={css`
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        border-radius: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
      `}

      <div
        className={css`
          font-family: sans-serif;
          text-align: center;
          font-weight: bold;
          font-size: 30px;

          h1 {
            color: #ff28a7;
          }
          p {
            margin-top: 20px;
            color: #5050ff;
          }
        `}
    >
        <h1>The video is paused.</h1>
        <p>Hover to play!</p>
      </div>
    </div>
  </div>
)

export default PausedOverlay