音视频移动开发【免费下载链接】react-native-videoA component for react-native项目地址https://gitcode.com/gh_mirrors/re/react-native-video点击查看免费下载VideoView是 react-native-video v7 中负责把VideoPlayer实例渲染到屏幕上的核心原生视图组件同时内置了原生播放控件、全屏与画中画PiP等 UI 能力。本文以 VideoView 官方文档 为骨架结合本仓库的 TypeScript 实现与 Nitro 原生绑定源码系统讲解它的基本用法、全部 Props、命令式方法Ref、UI 事件回调、Chapters 章节功能以及它在 iOS / Android / Web 三端的底层工作原理让你能直接照着写出可运行的视频播放界面。VideoView 在 v7 架构中的定位在 v7 的「播放器模型Player Model」中播放逻辑与视图渲染被明确拆分VideoPlayer负责视频源管理、播放、暂停、seek、音量、字幕等全部播放行为见 useVideoPlayer 指南 与 VideoPlayer 类文档VideoView只负责把某个VideoPlayer的画面渲染到屏幕上并提供原生控件、全屏、画中画、屏幕常亮等视图层功能。这意味着你可以把同一个player实例挂到多个VideoView上也可以在列表页、详情页之间复用一个播放器而无需重建原生资源。使用VideoView的硬性前提是必须把一个VideoPlayer实例通过playerprop 传入。基本用法从创建播放器到渲染画面最基础的使用方式是通过useVideoPlayer钩子创建播放器实例再把它传给VideoView的playerpropimport React from react; import { VideoPlayer, VideoView } from react-native-video; import { StyleSheet } from react-native; const App () { const player useVideoPlayer(https://example.com/video.mp4, (_player) { // 可选播放器创建完成后立即执行的初始化函数 _player.play(); }); return ( VideoView style{styles.video} player{player} controls{true} / ); }; const styles StyleSheet.create({ video: { width: 100%, height: 200, }, }); export default App;几个关键点useVideoPlayer的第二个参数是「创建回调」在播放器实例创建完成后触发适合在这里调用play()、设置muted、loop等初始状态controls决定是否显示原生播放控件播放/暂停、进度条、音量等默认false即「裸画面」player是必填 prop类型为VideoPlayerBase见 VideoViewProps.ts。如果你需要更精细地控制播放器生命周期也可以不依赖钩子直接手动创建VideoPlayer实例后传入参见 VideoPlayer 类文档。Props 全量参考以下表格是VideoView支持的全部 Props来自 props.md并与源码中VideoViewProps接口VideoViewProps.ts一一对应Prop类型必填默认值说明playerVideoPlayer是-管理待显示视频的VideoPlayer实例styleViewStyle否-标准 React Native 样式控制VideoView的布局与外观controlsboolean否false是否显示原生播放控件播放/暂停、进度条、音量等pictureInPictureboolean否false是否启用并显示原生控件中的画中画PiP按钮需平台支持且控件可见autoEnterPictureInPictureboolean否false播放开始后 App 进入后台时是否自动进入 PiP 模式行为因平台而异resizeModecontain \| cover \| stretch \| none否none视频如何缩放以适配视图keepScreenAwakeboolean否true视频视图挂载期间是否保持屏幕常亮surfaceTypesurface \| texture否仅 AndroidsurfaceAndroid底层原生视图类型iOS 上忽略关于resizeMode四种取值的精确定义源码注释VideoViewProps.ts给出如下语义contain保持宽高比把视频完整缩放进视图内部可能留黑边cover保持宽高比并填满整个视图可能裁剪画面stretch拉伸填满视图不保持宽高比画面可能变形none不做任何缩放。注意VideoView的默认resizeMode是none这与旧版组件的习惯不同如果发现画面没有按预期适配请显式设置该 prop。Android如何选择 surfaceType:::info 仅 AndroidsurfaceType只在 Android 生效iOS 上会被忽略。 :::在 Android 上默认渲染路径使用SurfaceView即surfaceTypesurface以获得最优的解码性能与更低的延迟。但SurfaceView运行在独立的窗口层separate window中因此它无法被 transform 动画处理缩放、旋转、透明度渐隐被父视图裁剪圆角、遮罩与兄弟视图可靠地叠放存在 z-order 问题。如果你的 UI 需要上述效果应切换为TextureViewVideoView player{player} surfaceTypetexture style{{ width: 300, height: 170, borderRadius: 16, overflow: hidden }} resizeModecover controls /使用原则仅在确实需要动画、圆角裁剪或重叠 UI 时才用TextureView因为它性能略低且在部分设备上可能增加功耗。相关类型定义可参见 VideoViewViewManager.nitro.ts。Refs 与命令式方法程序化控制全屏与画中画VideoView通过forwardRef暴露命令式方法VideoView.tsx。获取 ref 后即可调用const videoViewRef React.useRefVideoViewRef(null); // ... VideoView ref{videoViewRef} player{player} / // 之后即可调用命令式方法 videoViewRef.current?.enterFullscreen();VideoViewRef上可用的方法定义见 methods.md 与 VideoViewProps.ts方法类型说明enterFullscreen()() void程序化请求进入全屏模式exitFullscreen()() void程序化请求退出全屏模式enterPictureInPicture()() void程序化请求进入画中画模式exitPictureInPicture()() void程序化请求退出画中画模式canEnterPictureInPicture()() boolean检查画中画当前是否可用/受支持可进入返回true否则返回false另外VideoViewRef还暴露了一个addEventListener方法见 VideoViewProps.ts可以像下面这样以编程方式注册 UI 事件监听并返回一个可调remove()的订阅对象const subscription videoViewRef.current?.addEventListener( onFullscreenChange, ({ isFullscreen }) { console.log(isFullscreen ? 进入全屏 : 退出全屏); } ); // 不再需要时移除监听 subscription?.remove();从实现上看这些命令式方法都会转发给底层的 NitroVideoViewViewManager混合对象VideoViewViewManager.nitro.ts并由一个wrapNativeViewManagerFunction包装器统一处理「视图管理器未找到」等错误VideoView.tsx。事件回调感知全屏与画中画状态变化VideoView接受一系列与 UI 状态变化相关的事件回调完整列表见 events.md事件类型定义见 Events.ts事件类型说明onPictureInPictureChange?(event: { isActive: boolean }) void画中画开始或停止时触发onFullscreenChange?(event: { isFullscreen: boolean }) void全屏开始或停止时触发willEnterFullscreen?() void即将进入全屏前触发willExitFullscreen?() void即将退出全屏前触发willEnterPictureInPicture?() void即将进入画中画前触发willExitPictureInPicture?() void即将退出画中画前触发这些回调可以用于在状态切换时同步更新组件自身的 UI 或业务状态VideoView player{player} onFullscreenChange{({ isFullscreen }) { console.log(isFullscreen ? Entered fullscreen : Exited fullscreen); }} onPictureInPictureChange{({ isActive }) { console.log(isActive ? PiP active : PiP inactive); }} /在 VideoView.tsx 中可以看到这些基于 prop 的回调会被自动注册为原生事件监听器addOnFullscreenChangeListener、addWillEnterPictureInPictureListener等并在依赖变化或组件卸载时通过sub.remove()正确清理避免内存泄漏组件卸载时还会调用clearAllListeners()VideoView.tsx。Chapters进度条章节标记与跳转VideoView还支持「视频章节」功能章节会以可视化标记显示在 seekbar 上用户点击即可跳到对应位置。该功能属于 Pro 插件能力对应文档 frontmatter 标注plan: pro仓库提供了演示视频 chapters.mp4 展示实际效果。安装与启用首先安装独立插件包npm install react-native-video/chapters然后在应用初始化时调用enable()开启该功能必须在调用其他章节方法之前执行import { enable } from react-native-video/chapters; enable();setChapters设置章节列表setChapters(chapters, options?)用于为播放器设置章节。chapters是如下结构的对象数组{ title: string; // 章节标题 timeMs: number; // 章节时间点毫秒 }[]可选的options配置对象支持markersColor?: string—— 章节标记的颜色默认取平台默认色showTooltip?: boolean—— 悬停在标记上时是否显示提示气泡默认trueshowTimer?: boolean—— 是否在标记上显示时间默认true。完整示例import { setChapters } from react-native-video/chapters; const chapters [ { title: Introduction, timeMs: 0 }, { title: Main Content, timeMs: 30000 }, // 30 秒 { title: Conclusion, timeMs: 120000 }, // 2 分钟 ]; setChapters(chapters, { markersColor: #FF6B35, showTooltip: true, showTimer: true, });clearChapters 与 goToChapterclearChapters()移除播放器上的所有章节import { clearChapters } from react-native-video/chapters; clearChapters();goToChapter(title)按标题程序化跳转到指定章节import { goToChapter } from react-native-video/chapters; goToChapter(Main Content);平台差异iOS自定义 seekbar带可视标记与提示气泡Androidseekbar 上的可视标记支持提示气泡。源码层面VideoView 是如何驱动原生渲染的理解 Props 与方法的背后是本仓库基于 Nitro 的混合对象Hybrid Object架构。原生视图的绑定VideoView渲染时实际挂载的是NativeVideoViewNativeVideoView.tsx它通过UIManager.hasViewManagerConfig(VideoView)检测原生视图是否已正确链接若未链接会抛出包含「pod install / rebuild / Expo Go」排查提示的LINKING_ERROR。视图管理器的创建组件首次挂载后原生侧会通过onNitroIdChange事件把原生生成的nitroId回传随后由VideoViewViewManagerFactory.createViewManager(id)创建对应的原生视图管理器VideoView.tsx。源码中特别处理了「视图在原生管理器找到它之前就被卸载」的竞态场景此时只打印警告而非抛错。Props 的同步每次 props 变化都会调用updateProps把player、controls、pictureInPicture、autoEnterPictureInPicture、resizeMode、keepScreenAwake、surfaceType同步到原生管理器VideoView.tsx。注意其中player是通过(props.player as VideoPlayer).__getNativePlayer()取出的原生播放器句柄这正是「同一个播放器可被多个视图共用」的实现基础。iOS / Android 的实现载体iOS 侧对应HybridVideoViewViewManager.swift等文件见 ios/hybrids/VideoViewViewManagerAndroid 侧由 Kotlin 实现并在 fabric 原生组件 中提供渲染载体两者都遵循 VideoViewViewManager.nitro.ts 定义的接口契约。Web 端实现差异Web 平台的VideoView走的是另一套实现VideoView.web.tsx基于videojs/react的 Player 与 VideoSkinresizeMode被映射为 CSSobject-fitcontain → contain、cover → cover、stretch → fill、none → containVideoView.web.tsx全屏通过containerRef.current?.requestFullscreen?.()/document.exitFullscreen?.()实现画中画通过video.requestPictureInPicture?.()/document.exitPictureInPicture?.()实现canEnterPictureInPicture返回document.pictureInPictureEnabledcontrols{true}时使用VideoSkin包裹画面以呈现控制 UI。因此同样的 Props 与命令式方法在 Web 上也能获得一致的使用体验。实战建议与相关文档播放器生命周期推荐始终用useVideoPlayer创建播放器它会在组件卸载时自动释放原生资源详见 use-video-player.md避免在VideoView卸载后仍持有已释放的播放器。全屏与 PiP 的组合若需要「进入后台自动画中画」可同时开启autoEnterPictureInPicture并结合onPictureInPictureChange更新 UI在调用enterPictureInPicture()前建议先用canEnterPictureInPicture()探测设备支持度。性能取舍Android 默认的surface渲染路径性能最优仅当确实需要圆角、动画或叠层 UI 时才切换到texture。联动查阅播放行为与事件在 player/events.md 中有完整对照想了解 v6 旧版组件与 v7 的差异可参考 updating.md。赞分享音视频移动开发【免费下载链接】react-native-videoA component for react-native项目地址https://gitcode.com/gh_mirrors/re/react-native-video点击查看免费下载相关推荐react-native-video 的 VideoView 组件 Props 全解析播放器绑定、原生控件、画中画与画面适配react native video 的 VideoView 组件 Props 全解析播放器绑定、原生控件、画中画与画面适配 导读 VideoView 是 r音视频移动开发Hydra核心架构解析如何实现实时3D场景图构建与优化Hydra核心架构解析如何实现实时3D场景图构建与优化 Hydra 是一个革命性的实时3D场景图构建系统由麻省理工学院SPARK实验室开发。这个强大的机器人计算机视觉深度学习Windows 11终极清理指南使用Win11Debloat实现系统性能优化与隐私保护Windows 11终极清理指南使用Win11Debloat实现系统性能优化与隐私保护 Windows 11虽然带来了现代化的界面和功能但同时也带来了预装应桌面应用CLI上一篇终极指南ChunJun三大高级功能详解——DDL同步、断点续传与脏数据处理下一篇5分钟快速上手轻量级Java工作流引擎Snaker完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
