react-native-video-controls 事件系统详解9 大回调实现播放器与业务联动【免费下载链接】react-native-video-controlsA React Native video component with controls项目地址: https://gitcode.com/gh_mirrors/re/react-native-video-controlsreact-native-video-controls 是一个自带控制界面的 React Native 视频播放组件它基于 react-native-video 封装内置了返回按钮、进度条、音量条、全屏切换、播放/暂停等一整套 GUI 控件。而真正让播放器与你的业务活起来的关键正是它的事件系统——通过 9 大回调Callback你可以精确感知播放开始、暂停、结束、出错、全屏切换、控制栏显隐等每一个关键时刻并做出对应业务响应。本文带你逐个吃透这 9 个回调的触发时机、默认行为与实战用法。react-native-video-controls 事件系统为什么回调是联动的核心播放器本质上是一个黑盒视频在底层播放业务层需要知道它发生了什么。事件系统就是两者之间的桥梁。react-native-video-controls 在组件内部维护了一个统一的events映射见 VideoPlayer.js把 9 个业务回调与内部处理方法绑定在一起你传入的onPlay、onEnd等 prop 会被直接挂载到事件对象上你没传的如onError、onBack、onEnd则使用组件内置的默认实现还有一批内部事件onLoad、onProgress、onSeek等专职驱动进度条、计时器和加载动画不占用你的业务回调名额。所有回调的类型声明集中在 VideoPlayer.d.ts官方文档的完整事件表见 README.md。理解这套设计后你就能按需接管任意一个环节。9 大回调速查表一张表看懂播放器事件回调触发时机典型业务场景onPlay点击播放按钮后开始播放上报播放开始埋点、记录播放时长起点onPause点击暂停按钮后暂停暂停广告、记录暂停位置、展示续播提示onEnd视频播放完毕自动推荐下一集、展示完播弹窗onError视频加载/播放出错弹出错误提示、切换备用清晰度onBack点击返回按钮自定义导航逻辑、离开前确认onEnterFullscreen进入全屏后隐藏状态栏、切换横屏布局onExitFullscreen退出全屏后恢复竖屏、收起全屏 UIonShowControls控制栏出现时统计用户唤出操作的频率onHideControls控制栏消失时判断用户已离开交互、隐藏干扰元素下面按播放控制、生命周期、全屏导航、显隐反馈四类逐一拆解。播放控制回调用 onPlay / onPause 同步播放状态播放/暂停是使用频率最高的一对回调它们在用户点击按钮后触发代码见_togglePlayPauseVideoPlayer.js暂停时调用onPause恢复播放时调用onPlay。注意它们是用户操作型事件不是播放器底层状态型事件——通过进度条拖动、静音等操作不会触发它们。实战中最经典的用法是点击播放后才开始计时、暂停时结算VideoPlayer source{{uri: videoUrl}} onPlay{() startPlayTimer()} onPause{() stopPlayTimer()} /如果你还想统计真实的观看时长可以配合透传的onProgress事件VideoPlayer.js它会持续回传currentTime与onPause结合即可算出精确的观看进度。生命周期回调用 onEnd / onError 处理结束与异常视频播放完和播放出错是业务上最需要兜底的两个时刻。onEnd组件内置的_onEnd是一个空函数VideoPlayer.js源码注释明确建议你应该覆盖它否则视频播完就静默结束。典型做法是自动连播下一集或弹出再看一遍按钮。onError默认的_onError会把内部error状态置为 true组件随即渲染出内置的错误提示界面VideoPlayer.js。如果你传入自定义onError就能接管错误展示比如上报日志、切换清晰度后重试VideoPlayer onEnd{() playNextEpisode()} onError{(err) { reportError(err); switchToLowerBitrate(); }} /全屏与导航回调onEnterFullscreen / onExitFullscreen / onBack这三兄弟分别管理全屏进入、全屏退出、返回上一页。全屏切换的逻辑在_toggleFullscreenVideoPlayer.js默认toggleResizeModeOnFullscreen为 true进入全屏时视频模式会从contain切到cover同时触发onEnterFullscreen退出时反向触发onExitFullscreen。业务侧可以借此同步手机的方向锁定onEnterFullscreen{() Orientation.lockToLandscape()} onExitFullscreen{() Orientation.lockToPortrait()}onBack则比较特殊默认实现_onBack依赖 React Native 内置的navigator.pop()VideoPlayer.js如果你没有传navigator也没有覆盖onBack控制台会给出警告。所以使用自定义路由如 React Navigation时一定要自己接管VideoPlayer onBack{() navigation.goBack()} /控制栏显隐回调onShowControls / onHideControls 洞察用户交互控制栏默认在启动时显示用户点击屏幕后重新出现超过controlTimeout默认 15000ms后自动隐藏显隐动画时长由controlAnimationTiming默认 500ms控制。每次显隐切换都会触发对应回调VideoPlayer.jsonShowControls用户想操作了可用于暂停自动滚动的推荐流、隐藏弹幕onHideControls用户长时间没有操作可用于收起冗余 UI、开启专注观影模式。这两个回调也是埋点统计的好帮手——用户多久会碰一次控制栏直接反映控件设计的易用性。内部事件协同onLoad / onProgress / onSeek 如何默默工作除了 9 大业务回调组件内部还透传了一批 react-native-video 事件它们虽然不占用业务回调名额但理解它们能让排查问题事半功倍onLoadStart加载开始触发加载动画并显示控制栏VideoPlayer.jsonLoad加载完成记录视频duration总时长关闭加载动画VideoPlayer.jsonProgress播放中持续更新进度条与计时器VideoPlayer.jsonSeek拖动进度条后清除快进中状态恢复播放VideoPlayer.js。有趣的是onLoad、onLoadStart、onProgress等事件即使你传入自定义 prop也会先执行内部逻辑更新 UI 状态再调用你的回调——这就是内置处理 业务扩展的协同模式。常见问题回调不触发的排查思路onEnd 没反应先确认是否被其他组件打断再检查是否自己覆盖了它——默认_onEnd是空实现只有你主动传入才会执行业务逻辑onBack 报警告说明既没传navigator也没传onBack二选一即可onEnterFullscreen 不触发检查是否设了disableFullscreen或把toggleResizeModeOnFullscreen设为 false 后自己接管了全屏逻辑onPause/onPlay 与预期不符它们只在用户点击播放/暂停按钮时触发拖动进度条导致的暂停不会走这两个回调。总结react-native-video-controls 的 9 大回调覆盖了播放、暂停、结束、报错、返回、全屏、控制栏显隐等全部关键交互节点配合内部透传的onLoad、onProgress、onSeek等事件足以支撑绝大多数视频业务的联动需求。建议动手实践时直接阅读 VideoPlayer.js 的事件定义与 VideoPlayer.d.ts 的类型声明对照本文的触发时机逐一验证很快你就能把播放器织进自己的业务逻辑里。【免费下载链接】react-native-video-controlsA React Native video component with controls项目地址: https://gitcode.com/gh_mirrors/re/react-native-video-controls创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考