Video 切换地址逻辑优化

src/renderers/Video.tsx

@@ -50,6 +50,10 @@ export interface FlvSourceProps {
 
 export class FlvSource extends React.Component<FlvSourceProps, any> {
   flvPlayer: any;
+  loaded = false;
+  timer: any;
+  unsubscribe: any;
+
   componentDidMount() {
     let {
       src,
@@ -62,8 +66,68 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
       setError
     } = this.props;
 
+    this.initFlv({
+      video,
+      manager,
+      src,
+      isLive,
+      config,
+      actions,
+      setError,
+      autoPlay
+    });
+  }
+
+  componentDidUpdate(prevProps: FlvSourceProps) {
+    const props = this.props;
+    let {
+      autoPlay,
+      actions,
+      src,
+      setError,
+      isLive,
+      config,
+      video,
+      manager
+    } = props;
+
+    if (src !== prevProps.src) {
+      setError('');
+      this.flvPlayer?.destroy();
+      this.unsubscribe?.();
+      this.loaded = false;
+      this.initFlv({
+        video,
+        manager,
+        src,
+        isLive,
+        config,
+        actions,
+        setError,
+        autoPlay
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.flvPlayer) {
+      this.flvPlayer.unload();
+      this.flvPlayer.detachMediaElement();
+      this.props.setError?.('');
+    }
+  }
+
+  initFlv({
+    video,
+    manager,
+    src,
+    isLive,
+    config,
+    actions,
+    setError,
+    autoPlay
+  }: any) {
     (require as any)(['flv.js'], (flvjs: any) => {
-      if (flvjs.isSupported()) {
       video = video || (manager.video && manager.video.video);
 
       let flvPlayer = flvjs.createPlayer(
@@ -76,16 +140,15 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
       );
       flvPlayer.attachMediaElement(video);
       this.flvPlayer = flvPlayer;
-        let loaded = false;
-        let timer: any;
 
-        manager.subscribeToOperationStateChange((operation: any) => {
+      this.unsubscribe = manager.subscribeToOperationStateChange(
+        (operation: any) => {
           const type = operation.operation.action;
 
           if (type === 'play') {
-            clearTimeout(timer);
+            clearTimeout(this.timer);
-            if (!loaded) {
+            if (!this.loaded) {
-              loaded = true;
+              this.loaded = true;
               flvPlayer.load();
             }
 
@@ -94,37 +157,30 @@ export class FlvSource extends React.Component<FlvSourceProps, any> {
             flvPlayer.pause();
 
             if (isLive) {
-              timer = setTimeout(() => {
+              this.timer = setTimeout(() => {
                 actions.seek(0);
                 flvPlayer.unload();
-                loaded = false;
+                this.loaded = false;
               }, 30000);
             }
           }
-        });
+        }
+      );
 
       flvPlayer.on(flvjs.Events.RECOVERED_EARLY_EOF, () => {
         setError('直播已经结束');
       });
       flvPlayer.on(flvjs.Events.ERROR, () => {
         setError('视频加载失败');
+        flvPlayer.unload();
       });
 
       if (autoPlay) {
         setTimeout(() => actions.play(), 200);
       }
-      }
     });
   }
 
-  componentWillUnmount() {
-    if (this.flvPlayer) {
-      this.flvPlayer.unload();
-      this.flvPlayer.detachMediaElement();
-      this.props.setError?.('');
-    }
-  }
-
   render() {
     return (
       <source src={this.props.src} type={this.props.type || 'video/x-flv'} />