Jupyter Notebook并排视频滑块同步及统一显示尺寸问题咨询

一、核心思路 #

不用依赖原生视频自带的进度条，改用公共滑块统一控制两个视频的播放进度，同时通过组件参数强制约束视频显示尺寸，完全可以实现你的需求。

二、完整修改代码 #

import ipywidgets as widgets
from IPython.display import display
import numpy as np

# ---------------------- 配置参数 ----------------------
# 统一设置两个视频的显示尺寸，按需修改数值
TARGET_WIDTH = 400
TARGET_HEIGHT = 300
# 此处直接使用你已有的animation_video_1、animation_video_2变量即可
# 如果变量是带<video>标签的HTML字符串，提取标签内src属性的base64内容赋值即可
VIDEO1_CONTENT = animation_video_1
VIDEO2_CONTENT = animation_video_2

# ---------------------- 初始化组件 ----------------------
# 用ipywidgets.Video加载两个视频，强制设置相同宽高，原始视频会自动适配缩放不会变形
video1 = widgets.Video(
    value=VIDEO1_CONTENT,
    width=TARGET_WIDTH, 
    height=TARGET_HEIGHT,
    controls=False # 隐藏原生进度条，统一用公共滑块控制
)
video2 = widgets.Video(
    value=VIDEO2_CONTENT,
    width=TARGET_WIDTH, 
    height=TARGET_HEIGHT,
    controls=False
)

# 公共进度滑块，可在视频加载完成后用video1.duration获取实际总时长替换max参数
progress_slider = widgets.FloatSlider(
    min=0, max=10, step=0.1, value=0, 
    description='帧进度:', 
    layout=widgets.Layout(width='850px')
)

# ---------------------- 同步逻辑 ----------------------
# 滑块变动时同步更新两个视频的播放进度
def on_slider_change(change):
    current_time = change['new']
    video1.current_time = current_time
    video2.current_time = current_time

progress_slider.observe(on_slider_change, names='value')

# 可选：如果需要保留视频原生进度条，拖动原生进度也同步，可取消注释下方代码
# def on_video1_time_change(change):
#     progress_slider.value = change['new']
# def on_video2_time_change(change):
#     progress_slider.value = change['new']
# video1.observe(on_video1_time_change, names='current_time')
# video2.observe(on_video2_time_change, names='current_time')

# ---------------------- 布局展示 ----------------------
video_box = widgets.HBox([video1, video2])
display(video_box, progress_slider)

三、补充说明 #

• 强制设置的width和height只会修改Jupyter内的显示尺寸，不会改变你已经生成的原始动画文件，原始比例不一致时会自动加黑边适配，不会出现拉伸变形的问题。
• 视频总时长可以在首次加载完成后，通过video1.duration获取到精确值，再赋值给progress_slider.max即可实现完全匹配的进度控制。

如果你坚持要使用原生HTML的video标签实现，可以给两个video标签加width="400" height="300"属性统一尺寸，再插入一段JS代码监听两个video的timeupdate事件，互相同步currentTime属性即可实现进度同步。

内容的提问来源于stack exchange，提问作者mno-93