Playback of source material inside the transcript page

Currently, each transcript on our platform includes a link to the original source material through the media metadata field. This allows readers to easily access the original content if they wish to.

The next step in enhancing user experience is to integrate the original source material directly into our transcript pages. Initially, we aim to support YouTube videos and audio files. For YouTube videos, embedding them within the page will provide seamless access. For audio files, implementing playback controls will enable users to listen to the content without leaving the transcript page.

Furthermore, for transcripts with timestamps for each speaker segment, we should introduce functionality where readers can click on a timestamp while reading and navigate to that specific segment in the playback source. This feature will allow users to listen to corresponding segments of the original content as they read through the transcript.

Inspiration for this functionality can be drawn from projects like the [Optech podcast](https://bitcoinops.org/en/podcast/2024/03/07/), where timestamps are provided for different segments, enhancing the reader's experience.

Further inspiration:
- [Otter.ai playback](https://otter.ai/u/vpoR4jYR8VXgK1gZ6HokIYxJYZg)
- https://scription.app/ (this is also something that we have previously discussed for enhancing the working-environment/editor in the Review product)

Start with the transcript page and its media metadata field in the Hugo site. Define how YouTube videos and audio files are embedded, then trace how timestamped speaker segments can target playback positions; the work is done when both source types play in-page and timestamp clicks reach the corresponding segment.

由索引模型根據 Issue 內容生成。