自定义video标签样式

js

 const handleClick = (id,imgId) => {
     const myVideo = document.getElementById(id);
      try {
          myVideo.play();
      } catch (error) {
          console.log(error)
      }
      myVideo.controls = true;
      const imgEle = document.getElementById(imgId);
      imgEle.style.display = 'none';
  }
  const pauseVideo = (id,imgId,style,controls) => {
      const imgEle = document.getElementById(imgId);
      imgEle.style.display = style;
      const myVideo = document.getElementById(id);
      myVideo.controls = controls;
  }
 <div className='video-container' >
     <video  
          disablePictureInPicture 
          controlslist="nodownload  noremoteplayback "
          id={item.id}  
          onPlay={() => pauseVideo(item.id,imgId,'none',true)}
          onPause={() => pauseVideo(item.id,imgId,'inline-block',false)}
      >
          <source src={item.src} ></source>
      </video>
      <img id={imgId} onClick={() => handleClick(item.id,imgId)} className='video-play' alt='播放' src={PlayIcon} />
  </div>

css

.video-container{
    position: relative;
    display: inline-block;
    .video-play{
        width: 100px;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        cursor: pointer;
    }
}

/*音量按钮*/
video::-webkit-media-controls-volume-control-container {
    display: none !important;
}