I am using Next.js and a transcription API for a project. I have a video file and I would like to display a transcript next to it. The transcript can be obtained in JSON, VTT, SRT, or DPE formats. I want to achieve the following functionality:
As the user scrubs through the video, the pointer should move accordingly throughout the transcript. When the user clicks on a specific part of the transcript, the video should jump to that timestamp. Additionally, the user should be able to rename speakers. How can I implement this in a Next.js application?
Thank you in advance.