[BUG] Caption synchronization for multi-sourced Canvas

[Dananji]

Description

The IA Manifest is a single Canvas Manifest with multiple items in the same Canvas.

This particular IA Manifest has a supplementing annotation that is displayed as a captions file in the player. The cues are created with time-stamps relative to the entire duration of the Canvas, where they are time-stamped in the range 00:02 -> 13:02.
When each source is loaded into the player the cues from the time range 00:00 -> 01:00 in the VTT are repeated since VideoJS is not aware of the relative timestamp of the current source in the Canvas. This leads to the repetition of the same set of cues in this particular time range because each source segment in the Canvas is exactly 60 seconds.

Done Looks Like

• Investigate how VideoJS handle cue synchronization with media playback
• Display the correct cues for the current time of the player during playback and scrubbing

[joncameron]

Timeboxed investigation; can add points as needed for implementation or create a new issue for putting a fix in place.

[masaball]

@Dananji From what I can tell, it looks like the issue is primarily coming from how we are feeding the src file(s) into videojs. When we drill all the way down in how multi-source canvases are handled, we get to the parseCanvasTarget function in the utility helpers. This grabs the media fragment, if present, and sets start and end times of each src target based on that.

With the manifest in this ticket, each target passed to videojs has the content

{
  start: 0,
  end: 60,
  duration: 60,
  altStart: ...
}

If each target has properly offset start and end times (e.x. `{ start: 60, end: 120, duration: 60 }' for the second src), then the captions render properly. However, this causes other issues with our custom progress bar/video playback where watching into the second part plays for maybe 5 seconds then jumps back to the start of that part and trying to manually navigate further in video jumps to the beginning of the second part.

I am unsure how we can untangle this. I think ideally we would be able to feed the targets into VideoJS with the proper start and end times, but we have the current behavior for a reason. Changing it feels like potentially a pretty big rethink of how playback and the progress bar work.

I don't know what other approaches might work though.