在 Jupyter Notebook 中嵌入本地视频时，为什么媒体范围片段不起作用？

Question

动机

目标：给定一个较长的视频，我想将其嵌入到 Jupyter Notebook 中，并具有以编程方式确定的开始/停止时间。

上下文：我们正在处理大量视频。我们正在对这些视频中的事件进行调查检测实验。我们使用 Jupyter 笔记本进行工作。以前，我们使用 ffmpeg 生成包含感兴趣事件的视频短片段。然而，这既耗时又容易出错。

我希望使用此处描述的媒体片段：

• https://developer.mozilla.org/en-US/docs/Web/Media/Audio_and_video_delivery#specifying_playback_range
• https://web.dev/articles/video-and-source-tags#specify_start_and_end_times

问题

我已通过

jupyter lab

shell 命令在包含笔记本和视频文件的文件夹中启动了 jupyter。

在 Jupyter 单元中：

from IPython.display import HTML

video_type="video/mp4"
start_s = 5
end_s = 10

# https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime    
_html = f"""
<video style="width:100%" 
    id="{video_dom_id}"
    alt="{local_relative_path_video}" 
    controls>
    <source src="{local_relative_path_video}#t={start_s}{end_s}" type="{video_type}">
</video>
"""

display(HTML(_html))

视频无法加载，并出现错误“未找到支持格式和 MIME 类型的视频”。如果省略

#t={start_s}{end_s}

，视频加载成功。按照 web.dev 文章中的指示，我已经检查了

Accept-Ranges

并确认它出现在

bytes

中。 已在 macOS 上的 Firefox 和 Chrome 上得到确认。

解决方法

目前，使用

.currentTime

。但是，这不允许我定义感兴趣的片段的结束时间：

_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>
    document.getElementById("{video_dom_id}").addEventListener('loadeddata', function() {{
        document.getElementById("{video_dom_id}").currentTime = {start_s};
    }}, false);
    document.getElementById("{video_dom_id}").load();    
</script>
"""

Answer 1

我注意到的唯一错误是视频路径的

,

设置上缺少逗号

#time

。

它应该类似于这个例子：

"c:/users/somecoder/desktop/testfile.mp4#t=5,10"

解决方案：

 <source src="{local_relative_path_video}#t={start_s},{end_s}" type="{video_type}">