如何在Streamlit中实现视频与字幕同步显示？

方案1：自定义HTML5 Video组件直接嵌入字幕 #

Streamlit支持通过st.markdown渲染原生HTML，利用HTML5 video的<track>标签可以直接挂载字幕文件（支持VTT、SRT格式，推荐VTT兼容性更好）。

示例代码：

import streamlit as st

# 视频文件路径（本地文件或远程URL）
video_url = "your_video.mp4"
# 字幕文件路径（VTT格式，需与视频同域或允许跨域访问）
subtitle_url = "your_subtitle.vtt"

# 渲染带字幕的HTML5视频组件
st.markdown(f"""
<video width="100%" controls>
  <source src="{video_url}" type="video/mp4">
  <track src="{subtitle_url}" kind="subtitles" srclang="zh" label="中文" default>
</video>
""", unsafe_allow_html=True)

VTT字幕格式示例（需符合规范）：

WEBVTT

00:00:00.000 --> 00:00:02.500
欢迎来到语音识别演示系统

00:00:02.500 --> 00:00:05.000
接下来为您展示实时字幕同步

注意：本地文件需放在Streamlit可访问的目录，避免跨域问题。

方案2：拆分播放区与字幕区，实时匹配时间戳 #

如果需要动态生成字幕（比如实时语音识别输出），可将视频播放和字幕显示分为两个独立区域，通过监听播放进度同步更新字幕：

1. 用st.video加载视频，通过自定义JavaScript脚本监听视频的timeupdate事件，将当前播放时间实时传递给Python端；
2. 维护字幕时间戳字典（格式：{时间戳(秒): 字幕文本}），根据当前播放时间匹配对应字幕，用st.empty()实时更新显示。

简化版示例（基于预生成字幕）：

import streamlit as st
import time

# 预定义字幕时间戳映射
subtitle_timestamps = {
    0: "欢迎来到语音识别演示系统",
    2.5: "接下来为您展示实时字幕同步",
    5: "现在播放的是测试视频片段"
}

# 播放视频
video_file = open("test.mp4", "rb")
st.video(video_file)

# 字幕显示占位符
subtitle_placeholder = st.empty()

# 模拟播放进度（实际场景需通过JS获取真实播放时间）
current_time = 0
max_duration = 10  # 视频总时长（秒）
while current_time < max_duration:
    # 匹配当前时间对应的字幕
    matched_subtitle = ""
    for timestamp in sorted(subtitle_timestamps.keys()):
        if timestamp <= current_time:
            matched_subtitle = subtitle_timestamps[timestamp]
        else:
            break
    subtitle_placeholder.markdown(f"**当前字幕：** {matched_subtitle}")
    time.sleep(0.1)
    current_time += 0.1

进阶优化：编写Streamlit自定义组件，通过JS监听视频真实播放进度，替代模拟循环，实现精准同步。

方案3：使用第三方Streamlit视频组件 #

部分第三方组件原生支持字幕功能，比如streamlit-player（基于React Player），配置简单灵活：

先安装组件：

pip install streamlit-player

示例代码：

from streamlit_player import st_player

# 视频与字幕URL
video_url = "https://example.com/video.mp4"
subtitle_url = "https://example.com/subtitle.vtt"

# 配置播放器并添加字幕
st_player(
    video_url,
    options={
        "tracks": [
            {
                "kind": "subtitles",
                "src": subtitle_url,
                "srclang": "zh",
                "label": "中文",
                "default": True
            }
        ]
    }
)

内容的提问来源于stack exchange，提问作者Franck Dernoncourt