在Jupyter Notebook中嵌入本地视频时媒体范围片段为何失效？

问题场景 #

我们需要在Jupyter Notebook中嵌入长视频，通过代码指定播放的起止时间，替代之前用ffmpeg裁剪片段的低效方式。尝试用媒体片段URL（#t=起始秒数,结束秒数）的方式实现时，视频加载失败，提示「未找到支持格式和MIME类型的视频」，但去掉锚点参数后视频能正常播放。已确认本地服务返回Accept-Ranges: bytes，且在Firefox、Chrome中都出现这个问题。

问题原因 #

Jupyter Lab的本地文件服务不会解析媒体片段的URL锚点（#t=...），导致浏览器请求的资源路径被错误处理，服务器无法找到对应资源，最终抛出格式不支持的错误（实际是资源未找到的伪装提示）。

完整解决方案 #

通过JavaScript监听视频的loadeddata和timeupdate事件，同时实现起始时间跳转和结束时间自动暂停，完美替代媒体片段URL的功能：

from IPython.display import HTML

video_type = "video/mp4"
start_s = 5
end_s = 10
video_dom_id = "target-video"
local_relative_path_video = "your-video.mp4"  # 替换成你的视频路径

_html = f"""
<video style="width:100%" 
    id="{video_dom_id}"
    alt="{local_relative_path_video}" 
    controls>
    <source src="{local_relative_path_video}" type="{video_type}">
</video>
<script>
    const video = document.getElementById("{video_dom_id}");
    // 加载完成后跳转到起始时间
    video.addEventListener('loadeddata', function() {{
        video.currentTime = {start_s};
    }});
    // 实时检查当前时间，到达结束时间则暂停
    video.addEventListener('timeupdate', function() {{
        if (video.currentTime >= {end_s}) {{
            video.pause();
        }}
    }});
    video.load();
</script>
"""

display(HTML(_html))

方案说明 #

1. loadeddata事件：视频元数据加载完成后，立即将播放位置跳转到指定的起始时间
2. timeupdate事件：每0.25秒左右触发一次，检查当前播放时间，一旦到达结束时间就暂停视频
3. 保留原生视频控件，用户可以手动调整播放，同时自动生效起止时间控制

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