自定义ui视频组件部修正

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;
-}

src/components/videoPro/index.tsx

@@ -14,6 +14,18 @@ type Props = {
 }
 
 const VideoPro:FC<Props> = ({src,onRef,showFull}) => {
+  const globalData = Taro.getApp().globalData
+
+  if(onRef){
+    //用useImperativeHandle暴露一些外部ref能访问的属性
+    useImperativeHandle(onRef, () => {
+      return {
+        func: pause,
+      }
+    })
+  }
+
+  // 视频ui控制需要的响应式数据
   const videoContext = useRef<any>()
   const [isPlay, setIsPlay] = useState(false)
   const [duration,setDuration] = useState(0) // 视频长度 单位秒
@@ -25,15 +37,6 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => {
   const [isFull,setIsFull] = useState(false)
   const time = useRef<any>()
 
-  const globalData = Taro.getApp().globalData
-  if(onRef){
-    //用useImperativeHandle暴露一些外部ref能访问的属性
-    useImperativeHandle(onRef, () => {
-      return {
-        func: pause,
-      }
-    })
-  }
 
   useEffect(() => {
     console.log('组件加载')
@@ -41,16 +44,7 @@ const VideoPro:FC<Props> = ({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<Props> = ({src,onRef,showFull}) => {
     time.current = setTimeout(() => {
       setShowMenu(false)
     },5000)
+
   }
 
   function bindTimeupdateFun(e) {
@@ -131,6 +126,17 @@ const VideoPro:FC<Props> = ({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<Props> = ({src,onRef,showFull}) => {
       <Video
         style={{width: '750rpx', height: '600rpx'}}
         id='video'
-        // src={brandInfo?.introductory_video_resource?.url}
         src={src}
         controls={false}
         showPlayBtn={false}
@@ -160,18 +165,10 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => {
         onEnded={bindEnded}
         onFullScreenChange={onFullScreenChange}
       >
-        <View className="control" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} style={{
-          width:isFull?`${globalData.screenHeight}px`:'750rpx',
-          height:isFull?'750rpx':'600rpx',
-          paddingLeft:isFull?`${globalData.statusBarHeight}px`:'0',
-          paddingRight:isFull?`${globalData.statusBarHeight}px`:'0'
-        }}>
-          <View onClick={pause} className="justify-center align-center flex pt-5" style={{
-            flex:'1',
-            boxSizing:'border-box'
-          }}>
+        <View onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} style={{width:isFull?`${globalData.screenHeight}px`:'750rpx',height:isFull?'750rpx':'600rpx',display:'flex',flexDirection:'column',boxSizing:'border-box',paddingLeft:isFull?`${globalData.statusBarHeight}px`:'0',paddingRight:isFull?`${globalData.statusBarHeight}px`:'0'}}>
+          <View onClick={pause} className="justify-center align-center flex pt-5" style={{flex:'1',boxSizing:'border-box'}}>
             { !isPlay && showMenu &&
-              <View className="flex justify-center align-center rounded-50 pl-1 centerBtnBg">
+              <View className="flex justify-center align-center rounded-50 pl-1" style={{width:'50px',height:'50px',backgroundColor:'rgba(0,0,0,0.5)',boxSizing:'border-box'}}>
                 <Icon onClick={play} name="play" color="#fff" size="35px"></Icon>
               </View>
             }
@@ -191,8 +188,8 @@ const VideoPro:FC<Props> = ({src,onRef,showFull}) => {
                 <Text className="text-white font-26 pr-2">{total_duration}</Text>
                 { showFull &&
                   <>
-                    {isFull? <Image style={{width:'25px',height:'25px'}} onClick={() => videoContext.current.exitFullScreen()} src={unfull} />
-                    : <Image style={{width:'23px',height:'23px'}} src={full} onClick={() => videoContext.current.requestFullScreen({direction:90})}  />}
+                    {isFull? <Image style={{width:'25px',height:'25px'}} onClick={() => {videoContext.current.exitFullScreen()}} src={unfull} />
+                    : <Image style={{width:'23px',height:'23px'}} src={full} onClick={() => {videoContext.current.requestFullScreen({direction:90})}}  />}
                   </>
                 }
               </>