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)

从 Hugo 站点中的转录页面及其媒体元数据字段开始。定义如何嵌入 YouTube 视频和音频文件，然后追踪带时间戳的说话人片段如何定位到播放位置；当两种源类型都能在页面内播放，且点击时间戳能够到达相应片段时，这项工作就完成了。

由索引模型根据 Issue 内容生成。