视频展现组件

安装

 yarn add hz-video-player 
 或
 npm i hz-video-player

使用

函数写法

  import { FCVideoPlayer } from 'hz-video-player';

  // video states
  const [videoDisplay, setVideoDisplay] = useState<boolean>(false);

  // ref
  const fcVideoPlayerRef = useRef(
    FCVideoPlayer({
      autoplay: true,
      handlePlayerClose: () => {
        setVideoDisplay(false);
      },
    })
  );

  // effect
  useEffect(() => {
    fcVideoPlayerRef.current({ src: videoUrl, poster: posterUrl, display: videoDisplay });
  }, [videoDisplay, videoUrl, posterUrl]);

  // functions
  const preview: () => void = () => {
    setVideoDisplay(true)
  }

组件写法

  import VideoPlayer from 'hz-video-player';

  <VideoPlayer display={display} src="..." poster="..." handlePlayerClose={()=> {}}/>

参数

参数名|类型|必填|默认值|说明 --|:--:|--:|--:|--: autoplay|boolean|false|true|自动播放 src|string|true||视频资源 poster|string|false||首屏静态图 display|boolean|false|false|视频展现 handlePlayerClose|() => void|true||点击关闭按钮触发事件 container|HTMLDivElement|false|'#hz-video-player-portal'|视频组件所在dom callByMethods|boolean|false|false|FCVideoPlayer不需要用