@give-tech/ec-player 0.0.1-beta.11 → 0.0.1-beta.12

package/dist/index.js

@@ -1552,6 +1552,8 @@ class HLSPlayer extends BasePlayer {
     this._sampleQueue = [];
     this.prefetcher = null;
     this.lastRenderTime = 0;
+    this.playStartTime = 0;
+    this.firstFramePts = null;
     this.renderLoop = (timestamp = 0) => {
       if (!this.isPlaying) return;
       const downloaded = this.isFMP4 ? this.sampleQueue.length : this.nalQueue.length;
@@ -1565,17 +1567,24 @@ class HLSPlayer extends BasePlayer {
         totalSegments
       });
       if (this.frameBuffer.length > 0 && this.renderer) {
-        const frame = this.frameBuffer.shift();
-        this.renderer.render(frame);
-        if (this.lastRenderTime > 0) {
-          const elapsed = timestamp - this.lastRenderTime;
-          this.setCurrentTime(this._currentTime + elapsed);
+        const frame = this.frameBuffer[0];
+        if (this.playStartTime === 0 || this.firstFramePts === null) {
+          this.playStartTime = performance.now();
+          this.firstFramePts = frame.pts ?? 0;
+        }
+        const elapsedMs = performance.now() - this.playStartTime;
+        const timescale = this.fmp4Demuxer.getTimescale();
+        const currentTargetPts = this.firstFramePts + elapsedMs * timescale / 1e3;
+        const framePts = frame.pts ?? 0;
+        if (framePts <= currentTargetPts) {
+          this.frameBuffer.shift();
+          this.renderer.render(frame);
+          this.setCurrentTime(framePts / timescale);
+          this.updateState({ resolution: `${frame.width}x${frame.height}` });
+          const fps = this.renderer.updateFps();
+          this.updateState({ fps });
+          this.callbacks.onFrameRender?.(frame);
         }
-        this.lastRenderTime = timestamp;
-        this.updateState({ resolution: `${frame.width}x${frame.height}` });
-        const fps = this.renderer.updateFps();
-        this.updateState({ fps });
-        this.callbacks.onFrameRender?.(frame);
       } else {
         this.lastRenderTime = 0;
       }
@@ -1655,6 +1664,8 @@ class HLSPlayer extends BasePlayer {
     this.isPlaying = true;
     this.decodeLoopAbort = false;
     this.lastRenderTime = 0;
+    this.playStartTime = 0;
+    this.firstFramePts = null;
     this.updateState({ isPlaying: true });
     if (!this.prefetcher) {
       this.initPrefetcher();
@@ -2200,6 +2211,10 @@ class HLSPlayer extends BasePlayer {
       data: annexBData,
       size: annexBData.length
     });
+    if (frame) {
+      frame.pts = sample.pts;
+      frame.dts = sample.dts;
+    }
     return frame;
   }
   /**