add volume,multiple

src/appComponent.tsx

@@ -1,11 +1,34 @@
-import React, { memo } from 'react';
+import React, { memo, useRef, useEffect } from 'react';
 import JoLPlayer from '@/core/index';
 import '@/icons/';
+import { useVideo } from '@/core/useVideo';
 
 const AppComponent = memo(function AppComponent(props) {
+  const videoRef = useRef<HTMLVideoElement>(null!);
+  const xx = useRef(false);
+  useEffect(() => {}, [videoRef.current]);
+  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);
+    // },
+  });
+
   return (
     <>
-      <JoLPlayer />
+      {isPlay ? '播放' : '暂停'}
+      <JoLPlayer ref={videoRef} />
       <JoLPlayer />
     </>
   );

src/core/controller/index.tsx

@@ -16,20 +16,20 @@ 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);
-    },
+    // onTimeChange: (val: any) => {
+    //   console.log(val);
+    // },
+    // onEndEd: (val: any) => {
+    //   console.log('结束', val);
+    // },
   });
-
   const timer = useRef<NodeJS.Timeout | null>(null!);
 
   const viewClientX = useRef<number>(null!);

src/core/controls/index.tsx

@@ -30,7 +30,9 @@ const Index = memo(function Index(props) {
 
   const revicePropsData = useRef<any>();
 
-  const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo({});
+  const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo({
+    videoElement: reviceProps.videoRef,
+  });
 
   const { controlsState, dispatch } = useControls();
 

src/core/index.tsx

@@ -1,4 +1,11 @@
-import React, { memo, useRef, useState, useEffect, useMemo } from 'react';
+import React, {
+  forwardRef,
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+  useImperativeHandle,
+} from 'react';
 import Controller from './controller';
 import { videoparameter } from '@/interface';
 import { FlowContext, useVideoFlow } from '@/core/context';
@@ -8,11 +15,14 @@ import Broadcast from '@/components/svgIcon';
 import '@/assets/css/reset.scss';
 import './index.scss';
 
-const Index = memo(function Index({
-  videoSrc = 'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4',
-}: {
-  videoSrc?: string;
-}) {
+const JoLPlayer = function JoLPlayer(
+  {
+    videoSrc = 'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4',
+  }: {
+    videoSrc?: string;
+  },
+  ref: React.Ref<unknown> | undefined,
+) {
   /**
    * @description 关灯对象
    */
@@ -50,6 +60,10 @@ const Index = memo(function Index({
     setIsBufferring(false);
   };
 
+  useImperativeHandle(ref, () => ({
+    video: videoRef.current,
+  }));
+
   useEffect(() => {
     /**
      * @description 设置用户给的视频播放器长宽
@@ -60,7 +74,6 @@ const Index = memo(function Index({
     timerToCheckVideoUseful.current = setTimeout(() => {
       // 当视频未初始化时（即不可用时）
       if (videoElem.networkState === 0) {
-        console.log('can not find');
         setIsVideoUseful(false);
       } else {
         clearTimeout(timerToCheckVideoUseful.current!);
@@ -79,7 +92,7 @@ const Index = memo(function Index({
       videoElem.removeEventListener('waiting', waitingListener);
       videoElem.removeEventListener('playing', playingListener);
     };
-  }, []);
+  }, [videoRef.current]);
 
   const returnVideoSource = useMemo(() => {
     return (
@@ -119,6 +132,7 @@ const Index = memo(function Index({
       </FlowContext.Provider>
     </figure>
   );
-});
+};
 
-export default Index;
+const JoLPlayerComponent = forwardRef<HTMLVideoElement, any>(JoLPlayer);
+export default JoLPlayerComponent;

src/core/progress/index.tsx

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

src/core/useVideo.ts

@@ -2,7 +2,10 @@ import { useRef, useMemo, useEffect, useState, useReducer, useContext, useCallba
 import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
 import { FlowContext } from '@/core/context';
 
-export const useVideo = ({ onPause, onPlay, onTimeChange, onEndEd }: any) => {
+export const useVideo = (
+  { videoElement, onPause, onPlay, onTimeChange, onEndEd }: any,
+  dep?: any,
+) => {
   const forceUpdate = useMandatoryUpdate();
 
   const reviceProps = useContext(FlowContext);
@@ -15,53 +18,44 @@ export const useVideo = ({ onPause, onPlay, onTimeChange, onEndEd }: any) => {
     duration: 0,
     bufferedTime: 0,
     isPictureinpicture: false,
+    volume: 0,
+    multiple: 1.0,
   });
 
-  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const videoRef = useRef<HTMLVideoElement>(null!);
 
   const interval = useRef<NodeJS.Timeout | null>(null!);
 
-  videoRef.current = videoEle;
+  videoRef.current = videoElement;
 
   useEffect(() => {
+    forceUpdate();
     if (videoRef.current) {
       /**
        * @description 监听总时长
        */
       videoRef.current.addEventListener('canplay', () => {
-        videoParameter.current = {
-          ...videoParameter.current,
-          duration: videoRef.current!.duration,
-        };
+        torture({ duration: videoRef.current.duration });
       });
       /**
        * @description 监听缓冲
        */
       videoRef.current.addEventListener('progress', () => {
-        if (videoRef.current!.buffered.length >= 1) {
-          videoParameter.current = {
-            ...videoParameter.current,
-            bufferedTime: videoRef.current!.buffered.end(0),
-          };
+        if (videoRef.current.buffered.length >= 1) {
+          torture({ bufferedTime: videoRef.current.buffered.end(0) });
         }
       });
       /**
        * @description 已经进入画中画
        */
       videoRef.current.addEventListener('enterpictureinpicture', () => {
-        videoParameter.current = {
-          ...videoParameter.current,
-          isPictureinpicture: true,
-        };
+        torture({ isPictureinpicture: true });
       });
       /**
        * @description 已退出画中画模式
        */
       videoRef.current.addEventListener('leavepictureinpicture', () => {
-        videoParameter.current = {
-          ...videoParameter.current,
-          isPictureinpicture: false,
-        };
+        torture({ isPictureinpicture: false });
       });
       // 定时器用于更新当前视频时间
       interval.current = setInterval(() => {
@@ -69,11 +63,13 @@ export const useVideo = ({ onPause, onPlay, onTimeChange, onEndEd }: any) => {
          * 强制更新
          */
         forceUpdate();
-        videoParameter.current = {
-          ...videoParameter.current,
-          currentTime: videoRef.current!.currentTime,
-          isPlay: videoRef.current!.paused ? false : true,
-        };
+
+        torture({
+          currentTime: videoRef.current.currentTime,
+          isPlay: videoRef.current.paused ? false : true,
+          volume: videoRef.current.volume,
+          multiple: videoRef.current.playbackRate,
+        });
       }, 1);
       videoRef.current.addEventListener('pause', pauseChange);
       videoRef.current.addEventListener('play', playChange);
@@ -83,15 +79,21 @@ export const useVideo = ({ onPause, onPlay, onTimeChange, onEndEd }: any) => {
     return () => {
       interval.current && clearInterval(interval.current);
     };
-  }, [videoEle, videoRef.current]);
+  }, [videoRef.current, dep, videoElement]);
 
+  const torture = (val: any) => {
+    videoParameter.current = { ...videoParameter.current, ...val };
+  };
   const pauseChange = () => {
+    torture({ isPlay: videoRef.current.paused ? false : true });
     onPause && onPause(videoParameter.current);
   };
   const playChange = () => {
+    torture({ isPlay: videoRef.current.paused ? false : true });
     onPlay && onPlay(videoParameter.current);
   };
   const timeupdate = () => {
+    torture({ isPlay: videoRef.current.paused ? false : true });
     onTimeChange && onTimeChange(videoParameter.current);
   };
   const endedChange = () => {
@@ -99,17 +101,16 @@ export const useVideo = ({ onPause, onPlay, onTimeChange, onEndEd }: any) => {
   };
   const handleChangePlayState = () => {
     if (videoParameter.current.isPlay) {
-      videoRef.current!.pause();
+      videoRef.current.pause();
     } else {
-      videoRef.current!.play();
+      videoRef.current.play();
     }
-    videoParameter.current = {
-      ...videoParameter.current,
-      isPlay: videoRef.current!.paused ? false : true,
-    };
-  };
-  return {
-    handleChangePlayState,
-    ...videoParameter.current,
   };
+  return useMemo(
+    () => ({
+      handleChangePlayState,
+      ...videoParameter.current,
+    }),
+    [videoParameter.current],
+  );
 };