Merge pull request #1159 from galacean/fix/video_gotoAndStop

fix: video gotoAndStop func

Author: ChengYi996

plugin-packages/multimedia/src/video/video-component.ts

@@ -1,4 +1,4 @@
-import type { Asset, Engine, GeometryFromShape, Texture2DSourceOptionsVideo } from '@galacean/effects';
+import type { Asset, Engine, GeometryFromShape, Renderer, Texture2DSourceOptionsVideo } from '@galacean/effects';
 import { BaseRenderComponent, Texture, assertExist, effectsClass, math, spec } from '@galacean/effects';
 
 /**
@@ -27,7 +27,7 @@ export class VideoComponent extends BaseRenderComponent {
    * 播放标志位
    */
   private played = false;
-
+  private pendingPause = false;
   /**
    * 解决 video 暂停报错问题
    *
@@ -43,7 +43,6 @@ export class VideoComponent extends BaseRenderComponent {
    * 视频元素是否激活
    */
   isVideoActive = false;
-
   /**
    * 是否为透明视频
    */
@@ -99,6 +98,9 @@ export class VideoComponent extends BaseRenderComponent {
         }
       }
     });
+    this.item.composition?.on('pause', () => {
+      this.pauseVideo();
+    });
   }
 
   override fromData (data: VideoItemProps): void {
@@ -145,6 +147,11 @@ export class VideoComponent extends BaseRenderComponent {
     this.material.setColor('_Color', new math.Color().setFromArray(startColor));
   }
 
+  override render (renderer: Renderer): void {
+    super.render(renderer);
+    this.renderer.texture.uploadCurrentVideoFrame();
+  }
+
   override onUpdate (dt: number): void {
     super.onUpdate(dt);
     const { time, duration, endBehavior, composition, start } = this.item;
@@ -153,15 +160,13 @@ export class VideoComponent extends BaseRenderComponent {
     const { endBehavior: rootEndBehavior, duration: rootDuration } = composition.rootItem;
 
     const isEnd = (time === 0 || time === (rootDuration - start) || Math.abs(rootDuration - duration - time) < 1e-10)
-    || Math.abs(time - duration) < this.threshold;
+      || Math.abs(time - duration) < this.threshold;
 
     if (time > 0 && !isEnd) {
       this.setVisible(true);
       this.playVideo();
     }
 
-    this.renderer.texture.uploadCurrentVideoFrame();
-
     if ((time === 0 || time === (rootDuration - start) || Math.abs(rootDuration - duration - time) < 1e-10)) {
       if (rootEndBehavior === spec.EndBehavior.freeze) {
         if (!this.video?.paused) {
@@ -269,15 +274,23 @@ export class VideoComponent extends BaseRenderComponent {
     if (this.video) {
       this.played = true;
       this.isPlayLoading = true;
+      this.pendingPause = false;
       this.video.play().
-        then(()=>{
+        then(() => {
           this.isPlayLoading = false;
-          if (this.played === false && this.video) {
-            this.video.pause();
+          // 如果在 play pending 期间被请求了 pause，则立即暂停并复位 played
+          if (!this.played || this.pendingPause) {
+            this.pendingPause = false;
+            this.played = false;
+            this.video?.pause();
           }
-        }).
-        catch(error => {
-          this.engine.renderErrors.add(error);
+        })
+        .catch(error => {
+          // 复位状态
+          this.isPlayLoading = false;
+          this.played = false;
+          this.pendingPause = false;
+          if (error.name !== 'AbortError') { this.engine.renderErrors.add(error); }
         });
     }
   }
@@ -290,14 +303,21 @@ export class VideoComponent extends BaseRenderComponent {
     if (this.played) {
       this.played = false;
     }
-    if (this.video && !this.isPlayLoading) {
-      this.video.pause();
+    if (!this.video) { return; }
+
+    if (this.isPlayLoading) {
+      this.pendingPause = true;
+
+      return;
     }
+    this.video.pause();
   }
 
   override onDestroy (): void {
     super.onDestroy();
-
+    this.played = false;
+    this.isPlayLoading = false;
+    this.pendingPause = false;
     if (this.video) {
       this.video.pause();
       this.video.src = '';
@@ -307,9 +327,15 @@ export class VideoComponent extends BaseRenderComponent {
 
   override onDisable (): void {
     super.onDisable();
-    this.setCurrentTime(0);
+
     this.isVideoActive = false;
     this.pauseVideo();
+    const endBehavior = this.item?.endBehavior;
+
+    if (endBehavior === spec.EndBehavior.restart) {
+      this.setCurrentTime(0);
+    }
+
   }
 
   override onEnable (): void {