diff --git a/src/components/videoPro/index.module.scss b/src/components/videoPro/index.module.scss index c95d579..e69de29 100644 --- a/src/components/videoPro/index.module.scss +++ b/src/components/videoPro/index.module.scss @@ -1,15 +0,0 @@ -.container{ - width:750rpx; - height:600rpx; -} -.control{ - display:flex; - flex-direction:column; - box-sizing:border-box; -} -.centerBtnBg{ - width: 50px; - height:50px; - background-color: rgba(0,0,0,0.5); - box-sizing: border-box; -} diff --git a/src/components/videoPro/index.tsx b/src/components/videoPro/index.tsx index bfb378a..505c4ca 100644 --- a/src/components/videoPro/index.tsx +++ b/src/components/videoPro/index.tsx @@ -14,6 +14,18 @@ type Props = { } const VideoPro:FC = ({src,onRef,showFull}) => { + const globalData = Taro.getApp().globalData + + if(onRef){ + //用useImperativeHandle暴露一些外部ref能访问的属性 + useImperativeHandle(onRef, () => { + return { + func: pause, + } + }) + } + + // 视频ui控制需要的响应式数据 const videoContext = useRef() const [isPlay, setIsPlay] = useState(false) const [duration,setDuration] = useState(0) // 视频长度 单位秒 @@ -25,15 +37,6 @@ const VideoPro:FC = ({src,onRef,showFull}) => { const [isFull,setIsFull] = useState(false) const time = useRef() - const globalData = Taro.getApp().globalData - if(onRef){ - //用useImperativeHandle暴露一些外部ref能访问的属性 - useImperativeHandle(onRef, () => { - return { - func: pause, - } - }) - } useEffect(() => { console.log('组件加载') @@ -41,16 +44,7 @@ const VideoPro:FC = ({src,onRef,showFull}) => { updateState.current = true }, []); - function play(e){ - e.stopPropagation(); - videoContext.current.play() - setIsPlay(true) - } - function pause(){ - setIsPlay(false) - videoContext.current.pause() - } function onTouchStart(){ if(!showMenu) { @@ -66,6 +60,7 @@ const VideoPro:FC = ({src,onRef,showFull}) => { time.current = setTimeout(() => { setShowMenu(false) },5000) + } function bindTimeupdateFun(e) { @@ -131,6 +126,17 @@ const VideoPro:FC = ({src,onRef,showFull}) => { } } + + function play(e){ + e.stopPropagation(); + videoContext.current.play() + setIsPlay(true) + } + + function pause(){ + setIsPlay(false) + videoContext.current.pause() + } function sliderOnChange(e){ if (duration) { // 视频跳转到指定位置 @@ -148,7 +154,6 @@ const VideoPro:FC = ({src,onRef,showFull}) => {