hz-video-player

视频展现组件

安装

 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不需要用