add video modification url method

src/appComponent.tsx

@@ -1,8 +1,11 @@
-import React, { memo, useRef, useEffect, useMemo } from 'react';
+import React, { memo, useRef, useEffect, useMemo, useState } from 'react';
 import JoLPlayer, { JoLPlayerType } from './app';
 import '@/icons/';
 
 const AppComponent = memo(function AppComponent(props) {
+  const url = useRef<string>(
+    'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4',
+  );
   const videoRef = useRef<JoLPlayerType.JoLPlayerRef>(null!);
 
   const onProgressMouseDown: JoLPlayerType.callBackType = (val) => {
@@ -24,6 +27,13 @@ const AppComponent = memo(function AppComponent(props) {
     // console.log(`onTimeChange`, val);
   };
   const onEndEd = (val: any) => {
+    setTimeout(() => {
+      videoRef.current.setVideoSrc(
+        'https://gs-files.oss-accelerate.aliyuncs.com/okr/prod/file/2021/08/10/1628605591454mda-met51bhiqb2sgjzd.mp4',
+      );
+      videoRef.current.play();
+    }, 1000);
+
     console.log(`onEndEd`, val);
   };
   const onError = () => {
@@ -51,12 +61,6 @@ const AppComponent = memo(function AppComponent(props) {
   };
   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);
@@ -66,11 +70,11 @@ const AppComponent = memo(function AppComponent(props) {
       <JoLPlayer
         ref={videoRef}
         option={{
-          videoSrc:
+          videoSrc: url.current,
-            'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4',
           width: 750,
           height: 420,
           theme: '#00D3FF',
+          poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG',
         }}
         onProgressMouseDown={onProgressMouseDown}
         onPlay={onPlay}

src/core/index.tsx

@@ -30,7 +30,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
     onError,
     onvolumechange,
   } = props;
-  const { videoSrc, width, height, theme } = option;
+  const { videoSrc, width, height, theme, poster } = option;
   /**
    * @description 关灯对象
    */
@@ -153,7 +153,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
   return (
     <figure className="JoL-player-container" ref={videoContainerRef}>
       <div className="light-off-mask" ref={lightOffMaskRef}></div>
-      <video className="JoL-player" ref={videoRef}>
+      <video className="JoL-player" ref={videoRef} poster={poster ? poster : undefined}>
         {returnVideoSource}
       </video>
       {!isVideoUseful && <p className="video-no-useful-tip">抱歉！视频找不到了 (｡ ́︿ ̀｡)</p>}

src/core/useVideo.ts

@@ -122,6 +122,9 @@ export const useVideo = (props: any, dep: DependencyList = []) => {
       seek: (currentTime) => {
         videoRef.current.currentTime = currentTime;
       },
+      setVideoSrc: (url) => {
+        videoRef.current.src = url;
+      },
     };
   }, [dep]);
 

src/interface/index.ts

@@ -23,6 +23,10 @@ export interface videoOption {
    * @description 视频地址
    */
   videoSrc: string;
+  /**
+   * @description 视频封面图
+   */
+  poster?: string;
 }
 export interface videoAttributes<T = number, K = boolean> {
   /**
@@ -87,6 +91,10 @@ export interface videoMethod<T = noParVoid> {
    * @description 设置指定视频的播放位置/s
    */
   seek: parVoid<number>;
+  /**
+   * @description 设置播放视频的地址src
+   */
+  setVideoSrc: parVoid<string>;
 }
 export type callBackType = (e: videoAttributes) => void;
 export interface videoCallback<T = callBackType> {