如何在Jupyter Notebook中通过IPython Display实现多视频并排显示

实现思路 #

逐次调用display.display()输出的IPython视频元素默认以块级形式渲染，会占满整行宽度形成垂直堆叠效果，导致输出区两侧出现大量空白。要实现视频并排排列，不需要替换原有的可行视频加载逻辑——纯手写HTML视频标签无法正常加载的核心原因是缺少内嵌文件的编码逻辑，只要复用display.Video生成的内嵌视频元素，将其放入支持横向排列的弹性布局容器中统一渲染，就能同时兼顾视频加载兼容性和并排布局效果。

可直接运行的代码 #

from IPython import display

# 替换为你的目标视频路径列表
filepaths = [
    "video1.mp4",
    "video2.mp4"
]

# 定义横向弹性布局的样式
layout_css = """
<style>
.video-flex-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}
/* 限制单个视频的最大宽度，适配输出区版面 */
.video-flex-wrap video {
    max-width: 45%;
    height: auto;
}
</style>
"""

# 批量生成内嵌视频元素
video_html_fragments = []
for filepath in filepaths:
    # 生成和原逻辑一致的内嵌视频对象，不单独触发输出
    video_component = display.Video(filepath, embed=True)
    # 提取组件对应的HTML渲染内容，加入待拼接列表
    video_html_fragments.append(video_component._repr_html_())

# 拼接完整的布局结构
final_render_html = layout_css + f'<div class="video-flex-wrap">{"".join(video_html_fragments)}</div>'

# 统一输出渲染
display.display(display.HTML(final_render_html))

布局自定义调整方法 #

• 修改每行并排的视频数量：调整.video-flex-wrap video类下的max-width参数即可，比如3个视频并排可将值设为30%，预留出元素间距空间避免内容溢出
• 实现单行不换行排布：将CSS中的flex-wrap: wrap替换为flex-wrap: nowrap，所有视频会在同一行横向排布，超出宽度时会自动出现横向滚动条
• 增加视频标注：在拼接单个视频的HTML片段时，可在视频元素外层嵌套一层带文字的容器，将对应视频的说明文字放在视频上方，方便做多视频对比标注

该方案完全复用原验证可行的视频加载逻辑，所有视频的播放控件、内嵌能力和单独输出的单视频效果完全一致，不会出现纯手写HTML标签时的路径加载失败、跨源播放受限问题。

内容的提问来源于stack exchange，提问作者Vainmonde De Courtenay