add other file

src/app.ts

@@ -1,4 +1,6 @@
 import { useVideo } from '@/core/useVideo';
+import * as JoLPlayerType from '@/interface';
 import JoLPlayer from '@/core/index';
 export { useVideo };
+export { JoLPlayerType };
 export default JoLPlayer;

src/appComponent.tsx

@@ -1,12 +1,11 @@
-import React, { memo, useRef, useEffect } from 'react';
+import React, { memo, useRef, useEffect, useMemo } from 'react';
-import JoLPlayer, { useVideo } from './app';
+import JoLPlayer, { JoLPlayerType } from './app';
-import useWindowClient from '@/utils/useWindowClient';
 import '@/icons/';
 
 const AppComponent = memo(function AppComponent(props) {
-  const videoRef = useRef<HTMLVideoElement>(null!);
+  const videoRef = useRef<JoLPlayerType.JoLPlayerRef>(null!);
 
-  const onProgressMouseDown = (val: any) => {
+  const onProgressMouseDown: JoLPlayerType.callBackType = (val) => {
     // console.log(`val`, val);
   };
   const onProgressMouseUp = (val: any) => {
@@ -19,6 +18,9 @@ const AppComponent = memo(function AppComponent(props) {
     console.log(`暂停`, val);
   };
   const onTimeChange = (val: any) => {
+    // if (val.currentTime > 50) {
+    //   videoRef.current.pause();
+    // }
     // console.log(`onTimeChange`, val);
   };
   const onEndEd = (val: any) => {
@@ -30,6 +32,35 @@ const AppComponent = memo(function AppComponent(props) {
   const onvolumechange = (val: any) => {
     console.log(`onvolumechange`, val);
   };
+  const videoMethod = (status: string) => {
+    if (status === 'play') {
+      videoRef.current.play();
+    } else if (status === 'pause') {
+      videoRef.current.pause();
+    } else if (status === 'load') {
+      videoRef.current.load();
+    } else if (status === 'volume') {
+      videoRef.current.setVolume(86);
+    } else if (status === 'seek') {
+      videoRef.current.seek(500);
+    }
+  };
+
+  const xx = () => {
+    console.log(`videoRef.current`, videoRef.current);
+  };
+  useEffect(() => {
+    if (videoRef.current) {
+      setTimeout(() => {
+        videoRef.current.video.play();
+      }, 1000);
+
+      console.log(`object`, videoRef.current.play);
+      // videoRef.current.play();
+    }
+
+    console.log(`videoRef.current`, videoRef.current);
+  }, [videoRef.current]);
   return (
     <>
       <JoLPlayer
@@ -51,6 +82,12 @@ const AppComponent = memo(function AppComponent(props) {
         onvolumechange={onvolumechange}
       />
       {/* <JoLPlayer /> */}
+      <button onClick={() => videoMethod('play')}>播放</button>
+      <button onClick={() => videoMethod('pause')}>暂停</button>
+      <button onClick={() => videoMethod('load')}>重新加载</button>
+      <button onClick={() => videoMethod('volume')}>改变声音80</button>
+      <button onClick={() => videoMethod('seek')}>快进500s</button>
+      <button onClick={xx}>3333</button>
     </>
   );
 });

src/core/config/index.ts

@@ -8,3 +8,5 @@ export const multipleList = [
 ];
 
 export const defaultTheme: string = 'blue';
+
+export const defaultVolume: number = 60;

src/core/controls/index.tsx

@@ -8,8 +8,6 @@ import { useControls } from './variable';
 import useWindowClient from '@/utils/useWindowClient';
 import screenfull, { Screenfull } from 'screenfull';
 import { multipleList } from '@/core/config';
-import Switch from '@/components/switch';
-import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
 import SetComponent from './set';
 import MultipleComponent from './multiple';
 import VolumeComponent from './volume';
@@ -30,12 +28,13 @@ const Index = memo(function Index(props) {
 
   const revicePropsData = useRef<any>();
 
-  const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture } = useVideo(
+  const { isPlay, handleChangePlayState, currentTime, duration, isPictureinpicture, volume } =
-    {
+    useVideo(
-      videoElement: reviceProps.videoRef,
+      {
-    },
+        videoElement: reviceProps.videoRef,
-    [reviceProps.videoRef],
+      },
-  );
+      [reviceProps.videoRef],
+    );
 
   const { controlsState, dispatch } = useControls();
 
@@ -45,6 +44,13 @@ const Index = memo(function Index(props) {
 
   revicePropsData.current = reviceProps;
 
+  useEffect(() => {
+    /**
+     * @description 如果调用了setVolume函数，这边的数据就要保持和video的数据一致
+     */
+    dispatch({ type: 'volume', data: Math.floor(volume * 100) });
+  }, [volume]);
+
   useEffect(() => {
     // 为了防止音量滑动元素计时器不暂停
     window.addEventListener('mouseup', whenMouseUpDo);

src/core/controls/variable.ts

@@ -1,5 +1,5 @@
 import { useReducer } from 'react';
-
+import { defaultVolume } from '@/core/config';
 export interface controlsVariableType<T = number, K = boolean> {
   /**
    * @description 音量键的值
@@ -61,7 +61,7 @@ export type mergeAction =
 
 export const useControls = () => {
   const initialState = {
-    volume: 0,
+    volume: defaultVolume,
     isMuted: false,
     isSlideVolume: false,
     isScreentFull: false,

src/core/index.tsx

@@ -7,7 +7,7 @@ import React, {
   useImperativeHandle,
 } from 'react';
 import Controller from './controller';
-import { videoparameter } from '@/interface';
+import { videoparameter, JoLPlayerRef } from '@/interface';
 import { FlowContext, useVideoFlow } from '@/core/context';
 import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
 import Broadcast from '@/components/svgIcon';
@@ -68,11 +68,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
     setIsBufferring(false);
   };
 
-  useImperativeHandle(ref, () => ({
+  const { videoAttributes, videoMethod, currentTime, isPlay } = useVideo(
-    video: videoRef.current,
-  }));
-
-  const { videoAttributes } = useVideo(
     {
       videoElement: videoRef.current,
     },
@@ -122,6 +118,14 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
     };
   }, [videoRef.current, option]);
 
+  useImperativeHandle(ref, () => {
+    return {
+      video: videoRef.current,
+      ...videoMethod,
+      ...videoAttributes,
+    };
+  });
+
   const returnVideoSource = useMemo(() => {
     return (
       <>
@@ -168,6 +172,6 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
   );
 };
 
-const JoLPlayerComponent = forwardRef<HTMLVideoElement, videoparameter>(JoLPlayer);
+const JoLPlayerComponent = forwardRef<JoLPlayerRef, videoparameter>(JoLPlayer);
 
 export default JoLPlayerComponent;

src/core/progress/index.tsx

@@ -172,7 +172,7 @@ const Index = memo(function Index(props) {
   return (
     <div
       className="progress-container"
-      // style={{ opacity: reviceProps.videoFlow!.isControl ? '1' : '0' }}
+      style={{ opacity: reviceProps.videoFlow!.isControl ? '1' : '0' }}
     >
       <div className="progress-bg" ref={progressBgRef}>
         <div className="progress-buffered" style={{ width: `${calculateBufferedPercent}%` }}></div>

src/core/useVideo.ts

@@ -1,10 +1,11 @@
 import { useRef, useMemo, useEffect, DependencyList } from 'react';
 import useMandatoryUpdate from '@/utils/useMandatoryUpdate';
-import { videoAttributes } from '@/interface';
+import { videoAttributes, videoMethod, parVoid } from '@/interface';
-
+import { defaultVolume } from '@/core/config';
 export interface useVideoType extends videoAttributes {
   handleChangePlayState: () => void;
   videoAttributes: videoAttributes;
+  videoMethod: videoMethod;
 }
 
 export const useVideo = (props: any, dep: DependencyList = []) => {
@@ -32,6 +33,7 @@ export const useVideo = (props: any, dep: DependencyList = []) => {
 
   useEffect(() => {
     if (videoRef.current) {
+      setVolume(defaultVolume);
       /**
        * @description 监听总时长
        */
@@ -108,12 +110,27 @@ export const useVideo = (props: any, dep: DependencyList = []) => {
       videoRef.current.play();
     }
   };
+  const setVolume: parVoid<number> = (val) => {
+    videoRef.current.volume = val < 1 ? val : val / 100;
+  };
+  const videoMethod = useMemo<videoMethod>(() => {
+    return {
+      load: () => videoRef.current.load(),
+      play: () => videoRef.current.play(),
+      pause: () => videoRef.current.pause(),
+      setVolume,
+      seek: (currentTime) => {
+        videoRef.current.currentTime = currentTime;
+      },
+    };
+  }, [dep]);
 
   return useMemo<useVideoType>(
     () => ({
       handleChangePlayState,
       ...videoParameter.current,
       videoAttributes: videoParameter.current,
+      videoMethod,
     }),
     [videoParameter.current],
   );

src/interface/index.ts

@@ -62,6 +62,32 @@ export interface videoAttributes<T = number, K = boolean> {
    */
   error: null | T;
 }
+export type noParVoid = () => void;
+
+export type parVoid<T> = (par: T) => void;
+
+export interface videoMethod<T = noParVoid> {
+  /**
+   * @description 重新加载
+   */
+  load: T;
+  /**
+   * @description 开始播放
+   */
+  play: T;
+  /**
+   * @description 暂停
+   */
+  pause: T;
+  /**
+   * @description 设置音量
+   */
+  setVolume: parVoid<number>;
+  /**
+   * @description 设置指定视频的播放位置/s
+   */
+  seek: parVoid<number>;
+}
 export type callBackType = (e: videoAttributes) => void;
 export interface videoCallback<T = callBackType> {
   /**
@@ -91,7 +117,7 @@ export interface videoCallback<T = callBackType> {
   /**
    * @description 视频播放失败的回调
    */
-  onError: () => void;
+  onError: noParVoid;
   /**
    * @description 音量改变时的回调
    */
@@ -105,3 +131,7 @@ export interface videoparameter extends Partial<videoCallback> {
   option: videoOption;
   className?: string;
 }
+export type JoLPlayerRef = videoMethod &
+  videoAttributes & {
+    video: HTMLVideoElement;
+  };