Video trim values under 1 second don't reflect properly in preview canvas

[ferozhussain]

Issue Summary

Video and audio clips with trim values less than 1 second (e.g., 0.9s) do not display correctly in the preview canvas, appearing to start from the beginning of the media instead of the trimmed position.

Expected Behavior

When a video or audio clip has a trim value of 0.9 seconds, the preview should start playback from 0.9 seconds into the source media file.

Actual Behavior

Clips with trim values under 1 second appear to start from the beginning of the source media (trim appears to be ignored), while trim values of 1 second or greater work correctly.

Steps to Reproduce

1. Create a video or audio clip with trim: 0.9 in the clip configuration
2. Load the clip in the Studio canvas
3. Play the timeline from the start
4. Observe that the clip plays from the beginning of the source media instead of 0.9 seconds in

Technical Analysis

Root Cause: The desync threshold in both VideoPlayer and AudioPlayer is set to exactly 100ms, creating an edge case for sub-second trim values.

Code Location:

• src/core/entities/video-player.ts
• src/core/entities/audio-player.ts

const desyncThreshold = 100;
const shouldSync = Math.abs((this.texture.source.resource.currentTime - trim) * 1000 - playbackTime) > desyncThreshold;

Problem Logic:

• With trim = 0.9s and playbackTime = 0ms
• Expected video currentTime: 0.9s
• If actual video drifts to 0.8s: Math.abs((0.8 - 0.9) * 1000 - 0) = 100
• Since 100 is NOT > 100, no sync correction occurs

Files Affected:

• src/core/entities/video-player.ts
• src/core/entities/audio-player.ts

Possible Solutions

Option 1: Lower the desync threshold (simple fix)

const desyncThreshold = 50; // More aggressive sync for better trim accuracy

Option 2: Adaptive threshold based on trim value

const desyncThreshold = Math.max(50, Math.min(100, trim * 50)); // 50-100ms based on trim

Option 3: Use strict inequality for edge case

const shouldSync = Math.abs((this.texture.source.resource.currentTime - trim) * 1000 - playbackTime) >= desyncThreshold;

Tested Environment

• Studio Version: Latest 1.2.2
• Browser: All (JavaScript/WebGL issue)
• Media Types: Video (.mp4)

Additional Context

Performance Considerations:

• Lower threshold = more frequent resyncs = potential performance impact
• Adaptive threshold provides accuracy without excessive syncing

Related Code: The DiscardedFrameCount constant (33ms) in the base Player class may compound this issue for very small trim values.

---

[dazzatronus]

I wasn't able to reproduce this. Do you have an example you can share?

I tried with the following payload but trim starts exactly at 0.9s.

{
  "timeline": {
    "tracks": [
      {
        "clips": [
          {
            "asset": {
              "type": "video",
              "src": "https://shotstack-assets.s3.amazonaws.com/footage/scott-ko.mp4",
              "trim": 0.9
            },
            "start": 0,
            "length": 25
          }
        ]
      }
    ]
  },
  "output": {
    "format": "mp4",
    "size": {
      "width": 1280,
      "height": 720
    }
  }
}

[ferozhussain]

Hi @dazzatronus, try any trim value lesser than 0.9 maybe 0.5, the ultimate goal was to trim first frame that is how I tumble upon this issue.

[ferozhussain]

@dazzatronus , I see performance bottleneck when I reduce the sync threshold, which is a risky tradeoff. Would appreciate your thoughts?

[ferozhussain]

Hey @dazzatronus, Did you get a chance to look into this ?