Label Studio 多帧视频视图插件实战基于 Frame Offset 实现三路视频同步标注【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio本篇技术指南围绕 Label Studio 官方插件「Multi-Frame Video View多帧视频视图」展开讲解如何通过一个自定义插件与标注配置将同一视频以 -1 帧、0 帧、1 帧三个偏移并行展示并保持三路播放器严格同步从而方便标注员观察视频帧的上下文变化。读完本文你将掌握Video、TimelineLabels标签的完整配置方法、LSILabel Studio Interface插件 API 的annotation.names访问方式以及视频同步插件从事件监听到时间偏移计算的核心实现原理可直接复用于自己的视频标注项目。插件概览为什么需要多帧视图在视频帧级标注场景中标注员经常需要对比相邻帧才能准确判断目标的状态变化例如物体是否运动、是否跨帧遮挡。单路播放器只能看到当前帧无法同时观察前后帧的上下文。Label Studio 的「多帧视频视图」插件正是为此设计它通过一个标注配置Labeling config与一段 JavaScript 插件代码的组合将三个视频播放器纵向排列videoMinus1显示当前帧的前一帧-1 帧video0显示当前帧0 帧同时承载时间轴标注videoPlus1显示当前帧的后一帧1 帧三路播放器由插件代码保证同步播放、同步暂停、同步拖动任何一路的 seek跳帧、play、pause 操作都会以固定的帧偏移传播到其他两路让标注员始终以「当前帧」为基准同时看到前、后各一帧的画面。该插件在仓库中位于 docs/source/plugins/frame_offset.md被标记为tier: enterprise企业版功能标注界面效果如下所示截图来自官方文档video_sync.png注上图路径为文档中引用的官方截图路径如本地仓库未包含该资源可参考 docs/source/plugins/frame_offset.md 中的说明理解界面布局。插件整体架构XML 配置 JavaScript 逻辑该插件由两部分组成二者缺一不可组成文件/代码位置职责标注配置Labeling config项目设置中的 XML 模板声明三个Video标签的布局、数据绑定与命名以及TimelineLabels标注控件插件代码Plugin通过「Customize and Build Your Own Plugins」方式加载的 JS 文件等待LSI就绪后获取三个视频对象注册同步事件处理器计算帧偏移并驱动播放器关于如何创建、修改与加载自定义插件详见 Customize and Build Your Own Plugins插件功能的通用说明见 Plugins for projects 与 Plugin FAQ。标注配置详解XML 模板逐行分析插件配套的标注配置如下完整摘录自原文档View View styledisplay: flex View stylewidth: 100% Header valueVideo -1 Frame/ Video namevideoMinus1 value$video_url height200 synclag frameRate29.97/ /View View stylewidth: 100% Header valueVideo 1 Frame/ Video namevideoPlus1 value$video_url height200 synclag frameRate29.97/ /View /View View stylewidth: 100%; margin-bottom: 1em; Header valueVideo 0 Frame/ Video namevideo0 value$video_url height400 synclag frameRate29.97/ /View TimelineLabels nametimelinelabels toNamevideo0 Label valueclass1/ Label valueclass2/ /TimelineLabels /View布局View包裹与纵向堆叠每个视频被包裹在width: 100%的View标签中使其在垂直方向上依次堆叠。最外层View styledisplay: flex将前两个视频-1 帧与 1 帧横向并排放置而第三个视频0 帧独立成行并通过margin-bottom: 1em与上方区域留出间距。这样形成「上方两路小屏并排、下方一路大屏居中」的布局符合主看 0 帧、辅看 ±1 帧的使用直觉。Header标签为每个播放器提供标题Video -1 Frame、Video 1 Frame、Video 0 Frame让标注员一目了然当前看到的是哪个偏移的帧。视频标签Video的关键属性每个Video标签都使用name属性唯一标识这是插件代码通过LSI.annotation.names.get(name)定位对象的依据。各属性说明如下结合 Video 标签源码 的 JSDoc 与模型定义属性示例值说明namevideoMinus1/videoPlus1/video0元素唯一名称插件据此索引对应视频对象三路名称必须与插件代码中的get()参数完全一致value$video_url视频 URL支持从任务数据中取值模板字符串语法$video_url对应样本数据中的video_url字段height200/400播放器高度像素源码中默认值为600这里通过显式指定使小屏更紧凑、主屏更突出synclag同步模式标识使三个播放器进入同一同步组详见下文底层同步机制frameRate29.97视频帧率fps。源码中该属性在模型层名为framerate不区分大小写默认值为24可传任务数据引用如$fps插件代码会读取该值计算帧时长关于frameRate有一个重要的源码细节在 Video.js 的afterCreate中framerate会被归一化——先将字符串解析为数字支持任务数据解析若解析失败则回退为24若值小于1可能被当作每帧秒数传入还会自动取倒数换算成 fps。因此配置frameRate29.97后插件中video0.framerate即为数值化的29.97。时间轴标注TimelineLabelsTimelineLabels nametimelinelabels toNamevideo0 Label valueclass1/ Label valueclass2/ /TimelineLabelsTimelineLabels是视频帧分类控件toNamevideo0将其绑定到中间那个0 帧视频标注员在时间轴上选中标签后单击标注单帧、拖拽可标注连续帧段。它内部通过toName反查视频对象源码见 Video.js 中的timelineControl视图它从annotation.toNames中寻找type包含timeline的控件并依赖selectedLabels决定是否允许创建时间轴区域。class1、class2是两个示例类别实际项目中可替换为任意自定义标签也可为每个Label添加background颜色参考 TimelineLabels 标签文档 中的示例。完整标签参考 View · Video · TimelineLabels · Label。插件代码逐段解析三路同步的完整实现插件代码是本文的核心下面按逻辑分段展开分析完整代码继承自原文档仅修正了一处严格模式下需要显式声明的变量。等待接口就绪并获取视频对象async function initMultiFrameVideoView() { // Wait for the Label Studio Interface to be ready await LSI; // Get references to the video objects by their names const videoMinus1 LSI.annotation.names.get(videoMinus1); const video0 LSI.annotation.names.get(video0); const videoPlus1 LSI.annotation.names.get(videoPlus1); if (!videoMinus1 || !video0 || !videoPlus1) return; ... }await LSI等待全局 Label Studio Interface 实例就绪。LSI.annotation.names是插件访问界面元素的统一入口按标注配置中的name属性索引所有对象标签实例相关方法见annotation在 自定义插件文档 中的说明。三个get()调用分别取出三个视频对象任何一个取不到例如标注配置中的name与代码不一致则直接返回保证插件在错误配置下安全退出而不报错。帧率解析与帧时长计算// Convert frameRate to a number and ensure its valid const frameRate Number.parseFloat(video0.framerate) || 24; const frameDuration 1 / frameRate;以video00 帧视频的framerate为准用Number.parseFloat转为数字解析失败或为 0 时回退到24fps 默认值。frameDuration 1 / frameRate得到每帧对应的秒数这是后续把帧偏移换算成时间偏移的基础。例如frameRate 29.97时每帧约 0.0334 秒。同步调整函数事件监听与防循环function adjustVideoSync(video, offsetFrames) { video.isSyncing false; for (const event of [seek, play, pause]) { video.syncHandlers.set(event, (data) { if (!video.isSyncing) { video.isSyncing true; if (video.ref.current video ! video0) { const videoElem video.ref.current; let adjustedTime (video0.ref.current.currentFrame offsetFrames) * frameDuration; adjustedTime Math.max( 0, Math.min(adjustedTime, video.ref.current.duration), ); if (data.playing) { if (!videoElem.playing) videoElem.play(); } else { if (videoElem.playing) videoElem.pause(); } if (data.speed) { video.speed data.speed; } videoElem.currentTime adjustedTime; if ( Math.abs(videoElem.currentTime - adjustedTime) frameDuration / 2 ) { videoElem.currentTime adjustedTime; } } video.isSyncing false; } }); } }adjustVideoSync(video, offsetFrames)为单个视频注册三个同步事件处理器seek跳帧/拖动进度条、play播放、pause暂停每个事件的处理逻辑都以offsetFrames决定该视频相对 0 帧视频的偏移。调用时分别传入-1、1、0即videoMinus1恒为当前帧前一帧、videoPlus1恒为后一帧、video0偏移为 0基准。isSyncing防循环机制video.isSyncing是一个简单的互斥标志。当本视频的事件处理器正在执行即本视频作为跟随者被动调整时忽略其自身再次触发的事件避免 A 同步 B、B 又同步 A 造成无限循环。偏移时间计算adjustedTime (video0.ref.current.currentFrame offsetFrames) * frameDuration——以 0 帧视频的当前帧号加上偏移量再乘以每帧秒数得到目标播放位置。边界裁剪Math.max(0, Math.min(adjustedTime, video.ref.current.duration))将目标时间限制在[0, 视频总时长]区间内防止负时间或超出时长导致的 seek 错误。这意味着当 0 帧视频处于开头时-1 帧视频会钳制在 0 秒处而不是回绕。播放状态同步根据data.playing决定play()或pause()并先检查当前状态避免重复调用。速度同步data.speed存在时同步给跟随视频保证倍速播放时三路步调一致。二次校准设置currentTime后再次比较实际值与目标值的偏差若超过frameDuration / 2半帧时长则再次写入。这是为了规避浏览器 HTML5 video 的 seek 精度误差确保帧级对齐。应用偏移并初始化// Adjust offsets for each video adjustVideoSync(videoMinus1, -1); adjustVideoSync(videoPlus1, 1); adjustVideoSync(video0, 0); } // Initialize the plugin initMultiFrameVideoView();三个视频分别以-1、1、0的偏移注册同步处理器video0偏移为 0即自身即基准不参与跟随调整——代码中video ! video0的判断也保证了基准视频不会被自我调整干扰最后直接调用initMultiFrameVideoView()启动插件。底层同步机制从源码看synclag与同步组XML 配置中给每个Video都设置了synclag这一属性并非摆设。在 Syncable.ts 中Label Studio 实现了完整的同步基础设施SyncManager按同步组管理目标syncTargets以name为键登记同一同步组内的所有标签register()/unregister()负责加入/移出同步组syncTargets.set(syncTarget.name, syncTarget)正是插件中LSI.annotation.names.get(name)能取到对象的底层来源。事件类型SyncEvent支持play | pause | seek | speed | buffering五种事件插件手动注册了前三种而speed、buffering由编辑器内置逻辑处理例如Video.js中的registerSyncHandlers()会额外注册speed与可选buffering处理器。防风暴锁定SYNC_WINDOW 100ms同步管理器在 100ms 窗口内只接受事件源origin的同步事件其余目标的事件会被抑制sync()返回false从编辑器层面再次避免同步风暴isSyncing标志是插件层的第一道防线SyncManager的窗口锁定则是第二道防线。事件传播sync(data, event, origin)遍历syncTargets把事件广播给除 origin 外的所有目标调用各目标的syncReceive(data, event)data中携带time、playing、speed、buffering等状态字段见SyncDataFull接口。值得说明的是编辑器内置的sync同步的是完全相同的时间点而本插件的价值在于叠加固定帧偏移——它复用video.syncHandlers这一事件注册点但在处理函数中用currentFrame offsetFrames替换原始时间从而实现同步但错帧的效果。这是对内置同步机制的一次精妙扩展。样本数据格式插件要求任务数据中包含视频 URL 字段并与 XML 中的$video_url对应[ { video: /static/samples/opossum_snow.mp4 } ]注意XML 中写的是value$video_url因此实际导入时字段名应为video_url若沿用上例中的video字段需要将 XML 中的value同步改为value$video。仓库中的$video_url模板支持任意任务数据字段引用参考 Video 标签 的value参数说明可替换为本地文件、URL 或云存储地址。使用步骤与注意事项创建项目并进入标注设置将上文 XML 完整粘贴为标注配置Labeling config。导入包含video_url或其他自定义字段名的任务数据。按 Customize and Build Your Own Plugins 的方式创建插件文件粘贴插件 JS 代码并启用。打开标注页面验证拖动任意视频的进度条或播放/暂停其余两路应分别保持前一帧/后一帧同步。注意事项该插件标记为tier: enterprise在企业版Enterprise环境提供社区版可能需要对照 docs/source/plugins/custom.md 自行适配。插件的帧偏移精度依赖frameRate配置与实际视频一致务必确保 XML 中的frameRate与视频真实帧率匹配建议使用**恒定帧率CFR**视频。据 Video.js 源码 的说明推荐使用 MP4 容器 H.264AVC视频编码 AAC 音频并转换到约 30 fps 的恒定帧率以避免帧数不一致、重复/丢失帧等问题可使用 FFmpeg 转换ffmpeg -i input.mp4 -c:v libx264 -profile:v high -pix_fmt yuv420p -r 30 -c:a aac -b:a 128k output.mp4并用ffprobe -v error -show_format -show_streams -print_format json input.mp4校验参数。三个Video的name必须与插件代码中的三个get()参数逐一对应否则插件会在空值检查处静默退出。时间轴标注绑定在video0上若需让标注结果反映其他帧偏移需相应调整toName与偏移逻辑。延伸阅读自定义插件开发指南了解LSI.annotation等插件 API 的完整用法Video 视频标签参考value、frameRate、height、sync等参数详解TimelineLabels 时间轴标注标签帧级与帧段分类的标注交互插件 FAQ常见问题排查Video 标签源码实现帧率归一化、同步动作与时间轴控制逻辑同步机制源码SyncManager、SYNC_WINDOW与同步事件模型【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Label Studio 多帧视频视图插件实战：基于 Frame Offset 实现三路视频同步标注
Label Studio 多帧视频视图插件实战基于 Frame Offset 实现三路视频同步标注【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio本篇技术指南围绕 Label Studio 官方插件「Multi-Frame Video View多帧视频视图」展开讲解如何通过一个自定义插件与标注配置将同一视频以 -1 帧、0 帧、1 帧三个偏移并行展示并保持三路播放器严格同步从而方便标注员观察视频帧的上下文变化。读完本文你将掌握Video、TimelineLabels标签的完整配置方法、LSILabel Studio Interface插件 API 的annotation.names访问方式以及视频同步插件从事件监听到时间偏移计算的核心实现原理可直接复用于自己的视频标注项目。插件概览为什么需要多帧视图在视频帧级标注场景中标注员经常需要对比相邻帧才能准确判断目标的状态变化例如物体是否运动、是否跨帧遮挡。单路播放器只能看到当前帧无法同时观察前后帧的上下文。Label Studio 的「多帧视频视图」插件正是为此设计它通过一个标注配置Labeling config与一段 JavaScript 插件代码的组合将三个视频播放器纵向排列videoMinus1显示当前帧的前一帧-1 帧video0显示当前帧0 帧同时承载时间轴标注videoPlus1显示当前帧的后一帧1 帧三路播放器由插件代码保证同步播放、同步暂停、同步拖动任何一路的 seek跳帧、play、pause 操作都会以固定的帧偏移传播到其他两路让标注员始终以「当前帧」为基准同时看到前、后各一帧的画面。该插件在仓库中位于 docs/source/plugins/frame_offset.md被标记为tier: enterprise企业版功能标注界面效果如下所示截图来自官方文档video_sync.png注上图路径为文档中引用的官方截图路径如本地仓库未包含该资源可参考 docs/source/plugins/frame_offset.md 中的说明理解界面布局。插件整体架构XML 配置 JavaScript 逻辑该插件由两部分组成二者缺一不可组成文件/代码位置职责标注配置Labeling config项目设置中的 XML 模板声明三个Video标签的布局、数据绑定与命名以及TimelineLabels标注控件插件代码Plugin通过「Customize and Build Your Own Plugins」方式加载的 JS 文件等待LSI就绪后获取三个视频对象注册同步事件处理器计算帧偏移并驱动播放器关于如何创建、修改与加载自定义插件详见 Customize and Build Your Own Plugins插件功能的通用说明见 Plugins for projects 与 Plugin FAQ。标注配置详解XML 模板逐行分析插件配套的标注配置如下完整摘录自原文档View View styledisplay: flex View stylewidth: 100% Header valueVideo -1 Frame/ Video namevideoMinus1 value$video_url height200 synclag frameRate29.97/ /View View stylewidth: 100% Header valueVideo 1 Frame/ Video namevideoPlus1 value$video_url height200 synclag frameRate29.97/ /View /View View stylewidth: 100%; margin-bottom: 1em; Header valueVideo 0 Frame/ Video namevideo0 value$video_url height400 synclag frameRate29.97/ /View TimelineLabels nametimelinelabels toNamevideo0 Label valueclass1/ Label valueclass2/ /TimelineLabels /View布局View包裹与纵向堆叠每个视频被包裹在width: 100%的View标签中使其在垂直方向上依次堆叠。最外层View styledisplay: flex将前两个视频-1 帧与 1 帧横向并排放置而第三个视频0 帧独立成行并通过margin-bottom: 1em与上方区域留出间距。这样形成「上方两路小屏并排、下方一路大屏居中」的布局符合主看 0 帧、辅看 ±1 帧的使用直觉。Header标签为每个播放器提供标题Video -1 Frame、Video 1 Frame、Video 0 Frame让标注员一目了然当前看到的是哪个偏移的帧。视频标签Video的关键属性每个Video标签都使用name属性唯一标识这是插件代码通过LSI.annotation.names.get(name)定位对象的依据。各属性说明如下结合 Video 标签源码 的 JSDoc 与模型定义属性示例值说明namevideoMinus1/videoPlus1/video0元素唯一名称插件据此索引对应视频对象三路名称必须与插件代码中的get()参数完全一致value$video_url视频 URL支持从任务数据中取值模板字符串语法$video_url对应样本数据中的video_url字段height200/400播放器高度像素源码中默认值为600这里通过显式指定使小屏更紧凑、主屏更突出synclag同步模式标识使三个播放器进入同一同步组详见下文底层同步机制frameRate29.97视频帧率fps。源码中该属性在模型层名为framerate不区分大小写默认值为24可传任务数据引用如$fps插件代码会读取该值计算帧时长关于frameRate有一个重要的源码细节在 Video.js 的afterCreate中framerate会被归一化——先将字符串解析为数字支持任务数据解析若解析失败则回退为24若值小于1可能被当作每帧秒数传入还会自动取倒数换算成 fps。因此配置frameRate29.97后插件中video0.framerate即为数值化的29.97。时间轴标注TimelineLabelsTimelineLabels nametimelinelabels toNamevideo0 Label valueclass1/ Label valueclass2/ /TimelineLabelsTimelineLabels是视频帧分类控件toNamevideo0将其绑定到中间那个0 帧视频标注员在时间轴上选中标签后单击标注单帧、拖拽可标注连续帧段。它内部通过toName反查视频对象源码见 Video.js 中的timelineControl视图它从annotation.toNames中寻找type包含timeline的控件并依赖selectedLabels决定是否允许创建时间轴区域。class1、class2是两个示例类别实际项目中可替换为任意自定义标签也可为每个Label添加background颜色参考 TimelineLabels 标签文档 中的示例。完整标签参考 View · Video · TimelineLabels · Label。插件代码逐段解析三路同步的完整实现插件代码是本文的核心下面按逻辑分段展开分析完整代码继承自原文档仅修正了一处严格模式下需要显式声明的变量。等待接口就绪并获取视频对象async function initMultiFrameVideoView() { // Wait for the Label Studio Interface to be ready await LSI; // Get references to the video objects by their names const videoMinus1 LSI.annotation.names.get(videoMinus1); const video0 LSI.annotation.names.get(video0); const videoPlus1 LSI.annotation.names.get(videoPlus1); if (!videoMinus1 || !video0 || !videoPlus1) return; ... }await LSI等待全局 Label Studio Interface 实例就绪。LSI.annotation.names是插件访问界面元素的统一入口按标注配置中的name属性索引所有对象标签实例相关方法见annotation在 自定义插件文档 中的说明。三个get()调用分别取出三个视频对象任何一个取不到例如标注配置中的name与代码不一致则直接返回保证插件在错误配置下安全退出而不报错。帧率解析与帧时长计算// Convert frameRate to a number and ensure its valid const frameRate Number.parseFloat(video0.framerate) || 24; const frameDuration 1 / frameRate;以video00 帧视频的framerate为准用Number.parseFloat转为数字解析失败或为 0 时回退到24fps 默认值。frameDuration 1 / frameRate得到每帧对应的秒数这是后续把帧偏移换算成时间偏移的基础。例如frameRate 29.97时每帧约 0.0334 秒。同步调整函数事件监听与防循环function adjustVideoSync(video, offsetFrames) { video.isSyncing false; for (const event of [seek, play, pause]) { video.syncHandlers.set(event, (data) { if (!video.isSyncing) { video.isSyncing true; if (video.ref.current video ! video0) { const videoElem video.ref.current; let adjustedTime (video0.ref.current.currentFrame offsetFrames) * frameDuration; adjustedTime Math.max( 0, Math.min(adjustedTime, video.ref.current.duration), ); if (data.playing) { if (!videoElem.playing) videoElem.play(); } else { if (videoElem.playing) videoElem.pause(); } if (data.speed) { video.speed data.speed; } videoElem.currentTime adjustedTime; if ( Math.abs(videoElem.currentTime - adjustedTime) frameDuration / 2 ) { videoElem.currentTime adjustedTime; } } video.isSyncing false; } }); } }adjustVideoSync(video, offsetFrames)为单个视频注册三个同步事件处理器seek跳帧/拖动进度条、play播放、pause暂停每个事件的处理逻辑都以offsetFrames决定该视频相对 0 帧视频的偏移。调用时分别传入-1、1、0即videoMinus1恒为当前帧前一帧、videoPlus1恒为后一帧、video0偏移为 0基准。isSyncing防循环机制video.isSyncing是一个简单的互斥标志。当本视频的事件处理器正在执行即本视频作为跟随者被动调整时忽略其自身再次触发的事件避免 A 同步 B、B 又同步 A 造成无限循环。偏移时间计算adjustedTime (video0.ref.current.currentFrame offsetFrames) * frameDuration——以 0 帧视频的当前帧号加上偏移量再乘以每帧秒数得到目标播放位置。边界裁剪Math.max(0, Math.min(adjustedTime, video.ref.current.duration))将目标时间限制在[0, 视频总时长]区间内防止负时间或超出时长导致的 seek 错误。这意味着当 0 帧视频处于开头时-1 帧视频会钳制在 0 秒处而不是回绕。播放状态同步根据data.playing决定play()或pause()并先检查当前状态避免重复调用。速度同步data.speed存在时同步给跟随视频保证倍速播放时三路步调一致。二次校准设置currentTime后再次比较实际值与目标值的偏差若超过frameDuration / 2半帧时长则再次写入。这是为了规避浏览器 HTML5 video 的 seek 精度误差确保帧级对齐。应用偏移并初始化// Adjust offsets for each video adjustVideoSync(videoMinus1, -1); adjustVideoSync(videoPlus1, 1); adjustVideoSync(video0, 0); } // Initialize the plugin initMultiFrameVideoView();三个视频分别以-1、1、0的偏移注册同步处理器video0偏移为 0即自身即基准不参与跟随调整——代码中video ! video0的判断也保证了基准视频不会被自我调整干扰最后直接调用initMultiFrameVideoView()启动插件。底层同步机制从源码看synclag与同步组XML 配置中给每个Video都设置了synclag这一属性并非摆设。在 Syncable.ts 中Label Studio 实现了完整的同步基础设施SyncManager按同步组管理目标syncTargets以name为键登记同一同步组内的所有标签register()/unregister()负责加入/移出同步组syncTargets.set(syncTarget.name, syncTarget)正是插件中LSI.annotation.names.get(name)能取到对象的底层来源。事件类型SyncEvent支持play | pause | seek | speed | buffering五种事件插件手动注册了前三种而speed、buffering由编辑器内置逻辑处理例如Video.js中的registerSyncHandlers()会额外注册speed与可选buffering处理器。防风暴锁定SYNC_WINDOW 100ms同步管理器在 100ms 窗口内只接受事件源origin的同步事件其余目标的事件会被抑制sync()返回false从编辑器层面再次避免同步风暴isSyncing标志是插件层的第一道防线SyncManager的窗口锁定则是第二道防线。事件传播sync(data, event, origin)遍历syncTargets把事件广播给除 origin 外的所有目标调用各目标的syncReceive(data, event)data中携带time、playing、speed、buffering等状态字段见SyncDataFull接口。值得说明的是编辑器内置的sync同步的是完全相同的时间点而本插件的价值在于叠加固定帧偏移——它复用video.syncHandlers这一事件注册点但在处理函数中用currentFrame offsetFrames替换原始时间从而实现同步但错帧的效果。这是对内置同步机制的一次精妙扩展。样本数据格式插件要求任务数据中包含视频 URL 字段并与 XML 中的$video_url对应[ { video: /static/samples/opossum_snow.mp4 } ]注意XML 中写的是value$video_url因此实际导入时字段名应为video_url若沿用上例中的video字段需要将 XML 中的value同步改为value$video。仓库中的$video_url模板支持任意任务数据字段引用参考 Video 标签 的value参数说明可替换为本地文件、URL 或云存储地址。使用步骤与注意事项创建项目并进入标注设置将上文 XML 完整粘贴为标注配置Labeling config。导入包含video_url或其他自定义字段名的任务数据。按 Customize and Build Your Own Plugins 的方式创建插件文件粘贴插件 JS 代码并启用。打开标注页面验证拖动任意视频的进度条或播放/暂停其余两路应分别保持前一帧/后一帧同步。注意事项该插件标记为tier: enterprise在企业版Enterprise环境提供社区版可能需要对照 docs/source/plugins/custom.md 自行适配。插件的帧偏移精度依赖frameRate配置与实际视频一致务必确保 XML 中的frameRate与视频真实帧率匹配建议使用**恒定帧率CFR**视频。据 Video.js 源码 的说明推荐使用 MP4 容器 H.264AVC视频编码 AAC 音频并转换到约 30 fps 的恒定帧率以避免帧数不一致、重复/丢失帧等问题可使用 FFmpeg 转换ffmpeg -i input.mp4 -c:v libx264 -profile:v high -pix_fmt yuv420p -r 30 -c:a aac -b:a 128k output.mp4并用ffprobe -v error -show_format -show_streams -print_format json input.mp4校验参数。三个Video的name必须与插件代码中的三个get()参数逐一对应否则插件会在空值检查处静默退出。时间轴标注绑定在video0上若需让标注结果反映其他帧偏移需相应调整toName与偏移逻辑。延伸阅读自定义插件开发指南了解LSI.annotation等插件 API 的完整用法Video 视频标签参考value、frameRate、height、sync等参数详解TimelineLabels 时间轴标注标签帧级与帧段分类的标注交互插件 FAQ常见问题排查Video 标签源码实现帧率归一化、同步动作与时间轴控制逻辑同步机制源码SyncManager、SYNC_WINDOW与同步事件模型【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
