视频展现组件
安装
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不需要用 |