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%); }