react自定义video视频播放样式(鼠标移入播放,移出停止)

video标签默认视频播放样式：

更改后的播放效果：

代码：

const [playStatus, setPlayStatus] = useState(new Array(4));   // 视频的播放状态，用于控住播放按钮的显示与隐藏

const videos = () => {
        const ref: (HTMLVideoElement | null)[] = [];
        return (
            <ul styleName="content-video">
                // videosConfig存储一组视频的url
                {videosConfig.map((e, i) => (  
                    <div styleName="video-item" key={e.fileUrl}>
                        <video
                            muted
                            src={e.fileUrl}
                            ref={el => {
                                ref[i] = el;
                            }}
                            onMouseOver={() => {
                                ref[i] && ref[i]?.play();
                                playStatus[i] = true;

                                setPlayStatus([...playStatus]);
                            }}
                            onMouseOut={() => {
                                ref[i] && ref[i]?.pause();
                                playStatus[i] = false;
                                setPlayStatus([...playStatus]);
                            }}
                            key={e.fileUrl}
                            width="250px"
                            height="430px"
                        />
                        {!playStatus[i] && <Play />}  // 为false时显示播放按钮<Play />组件为播放按钮svg图
                    </div>
                ))}
            </ul>
        );

Play组件：

const Index = () => (
    <>
        <svg
            className={styles.play}
            viewBox="0 0 63 63"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
        >
            <g id="home" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                <g id="homePage" transform="translate(-428.000000, -544.000000)">
                    <g id="编组-2" transform="translate(428.000000, 544.000000)">
                        <circle id="椭圆形" fill="#D8D8D8" opacity="0.7" cx="31.5" cy="31.5" r="31.5" />
                        <g id="播放" transform="translate(24.000000, 17.000000)" fill="#46464A" fillRule="nonzero">
                            <path
                                d="M2.64369111,0.256232087 L23.1138308,12.8699856 C24.2953897,13.5949062 24.2953897,15.4072217 23.1138308,16.1321706 L2.64369111,28.7459241 C1.46213223,29.4708446 0,28.5574498 0,27.1075804 L0,1.88007338 C0,0.430203955 1.46216108,-0.468716787 2.64369111,0.256203762"
                                id="路径"
                            />
                        </g>
                    </g>
                </g>
            </g>
        </svg>
    </>
);

export default Index;

样式代码： 使播放按钮居中

  .video-item {
        position: relative;
   }
   svg {
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
   }