f

src/appComponent.tsx

@@ -1,36 +1,43 @@
 import React, { memo, useRef, useEffect } from 'react';
 import JoLPlayer, { useVideo } from './app';
+import useWindowClient from '@/utils/useWindowClient';
 import '@/icons/';
 
 const AppComponent = memo(function AppComponent(props) {
   const videoRef = useRef<HTMLVideoElement>(null!);
-  const xx = useRef(false);
-  const { isPlay, handleChangePlayState, currentTime } = useVideo({
-    videoElement:
-      videoRef.current &&
-      (videoRef.current as HTMLVideoElement & { video: HTMLVideoElement }).video,
-    // onPause: (val: any) => {
-    //   console.log(val, xx.current);
-    // },
-    // onPlay: (val: any) => {
-    //   console.log(val, xx.current);
-    // },
-    // onTimeChange: (val: any) => {
-    //   console.log(val);
-    // },
-    // onEndEd: (val: any) => {
-    //   console.log('结束', val);
-    // },
-    onProgressSlide(val: any) {
-      console.log(`童东风`, val);
+  const { clientX } = useWindowClient();
+  const xx = useRef<any>();
+
+  const { isPlay, handleChangePlayState, currentTime } = useVideo(
+    {
+      videoElement:
+        videoRef.current &&
+        (videoRef.current as HTMLVideoElement & { video: HTMLVideoElement }).video,
+      // onPause: (val: any) => {
+      //   console.log(val, xx.current);
+      // },
+      // onPlay: (val: any) => {
+      //   console.log(val, xx.current);
+      // },
+      // onTimeChange: (val: any) => {
+      //   console.log(val);
+      // },
+      // onEndEd: (val: any) => {
+      //   console.log('结束', val);
+      // },
+      onProgressSlide: (val: any) => {
+        console.log(`童东风`, val);
+      },
     },
-  });
+    [videoRef.current],
+  );
 
+  xx.current = clientX;
   return (
     <>
       {isPlay ? '播放' : '暂停'}
       <JoLPlayer ref={videoRef} />
-      <JoLPlayer />
+      {/* <JoLPlayer /> */}
     </>
   );
 });

src/core/controller/index.tsx

@@ -15,24 +15,28 @@ const Index = memo(function Index(props) {
 
   const { dispatch } = reviceProps;
 
-  const { isPlay, handleChangePlayState, currentTime } = useVideo({
-    videoElement: reviceProps.videoRef,
-    // onPause: (val: any) => {
-    //   console.log(val);
-    // },
-    // onPlay: (val: any) => {
-    //   console.log(val);
-    // },
-    // onTimeChange: (val: any) => {
-    //   console.log(val);
-    // },
-    // onEndEd: (val: any) => {
-    //   console.log('结束', val);
-    // },
-    // onProgressSlide: (val: any) => {
-    //   console.log(`童东风`, val);
-    // },
-  });
+  const { isPlay, handleChangePlayState, currentTime } = useVideo(
+    {
+      videoElement: reviceProps.videoRef,
+      // onPause: (val: any) => {
+      //   console.log(val);
+      // },
+      // onPlay: (val: any) => {
+      //   console.log(val);
+      // },
+      // onTimeChange: (val: any) => {
+      //   console.log(val);
+      // },
+      // onEndEd: (val: any) => {
+      //   console.log('结束', val);
+      // },
+      // onProgressSlide: (val: any) => {
+      //   console.log(`童东风`, val);
+      // },
+    },
+    [reviceProps.videoRef],
+  );
+
   const timer = useRef<NodeJS.Timeout | null>(null!);
 
   const viewClientX = useRef<number>(null!);

src/core/controls/index.tsx

@@ -30,9 +30,18 @@ const Index = memo(function Index(props) {
 
   const revicePropsData = useRef<any>();
 
-  const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo({
-    videoElement: reviceProps.videoRef,
-  });
+  const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo(
+    {
+      videoElement: reviceProps.videoRef,
+      // onPause: (val: any) => {
+      //   console.log(val);
+      // },
+      // onPlay: (val: any) => {
+      //   console.log(val);
+      // },
+    },
+    [reviceProps.videoRef],
+  );
 
   const { controlsState, dispatch } = useControls();
 

src/core/index.tsx

@@ -11,6 +11,7 @@ import { videoparameter } from '@/interface';
 import { FlowContext, useVideoFlow } from '@/core/context';
 import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
 import Broadcast from '@/components/svgIcon';
+import { useVideo } from '@/core/useVideo';
 // import videoUrl from '@/assets/haiwang.mp4';
 import '@/assets/css/reset.scss';
 import './index.scss';
@@ -64,6 +65,19 @@ const JoLPlayer = function JoLPlayer(
     video: videoRef.current,
   }));
 
+  const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo(
+    {
+      videoElement: videoRef.current,
+      // onPause: (val: any) => {
+      //   console.log(val);
+      // },
+      // onPlay: (val: any) => {
+      //   console.log(val);
+      // },
+    },
+    [videoRef.current],
+  );
+
   useEffect(() => {
     /**
      * @description 设置用户给的视频播放器长宽

src/core/progress/index.tsx

@@ -29,7 +29,9 @@ const Index = memo(function Index(props) {
 
   const reviceProps = useContext(FlowContext);
 
-  const { currentTime, duration, bufferedTime } = useVideo({ videoElement: reviceProps.videoRef });
+  const { currentTime, duration, bufferedTime } = useVideo({ videoElement: reviceProps.videoRef }, [
+    reviceProps.videoRef,
+  ]);
 
   const { progressState, dispatch } = useProgress();
 

src/core/useVideo.ts

@@ -1,11 +1,13 @@
 import { useRef, useMemo, useEffect, useState, useReducer, useContext, useCallback } from 'react';
 import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
 import { FlowContext } from '@/core/context';
+import useWindowClient from '@/utils/useWindowClient';
+
+export const useVideo = (props: any, dep: any[] = []) => {
+  const { clientX } = useWindowClient();
+
+  const { videoElement, onPause, onPlay, onTimeChange, onEndEd, onProgressSlide } = props;
 
-export const useVideo = (
-  { videoElement, onPause, onPlay, onTimeChange, onEndEd, onProgressSlide }: any,
-  dep?: any,
-) => {
   const forceUpdate = useMandatoryUpdate();
 
   const reviceProps = useContext(FlowContext);
@@ -29,7 +31,10 @@ export const useVideo = (
   videoRef.current = videoElement;
 
   useEffect(() => {
-    forceUpdate();
+    /**
+     * @description 防止在外部组件用，不更新的问题，所以要强制更新
+     */
+    // forceUpdate();
     if (videoRef.current) {
       /**
        * @description 监听总时长
@@ -62,7 +67,7 @@ export const useVideo = (
         /**
          * 强制更新
          */
-        forceUpdate();
+        // forceUpdate();
         torture({
           currentTime: videoRef.current.currentTime,
           isPlay: videoRef.current.paused ? false : true,
@@ -78,11 +83,11 @@ export const useVideo = (
     return () => {
       interval.current && clearInterval(interval.current);
     };
-  }, [videoRef.current, dep, videoElement]);
+  }, dep);
 
   const ProgressSlideChange = useCallback(
     (onProgressSlide: any) => {
-      // console.log(`onProgressSlide`, onProgressSlide);
+      console.log(`onProgressSlide`, onProgressSlide, videoFlow.progressSliderChangeVal);
       onProgressSlide && onProgressSlide(videoParameter.current);
     },
     [videoFlow.progressSliderChangeVal],
@@ -92,7 +97,7 @@ export const useVideo = (
     if (videoFlow.progressSliderChangeVal) {
       ProgressSlideChange(onProgressSlide);
     }
-  }, [ProgressSlideChange]);
+  }, [ProgressSlideChange, onProgressSlide]);
 
   const torture = (val: any) => {
     videoParameter.current = { ...videoParameter.current, ...val };