音视频移动开发【免费下载链接】react-native-videoA component for react-native项目地址https://gitcode.com/gh_mirrors/re/react-native-video点击查看免费下载本文以 react-native-video v6 稳定版为对象系统讲解 v6 的播放控制模型paused属性负责声明式的播放/暂停其余播放器能力通过ref上的实例方法命令式调用。读完本文你将掌握seek、setVolume、getCurrentPosition、setSource、setFullScreen、PiP画中画以及 iOS 专属的save保存到相册等全部核心方法并了解VideoDecoderProperties静态编解码能力探测 API以及 v6 与 v7 在预加载场景下的选型差异。一、v6 的控制模型声明式属性 命令式 refreact-native-video v6 是一个单一命令式Video组件所有配置通过props传入播放控制除播放/暂停外通过ref上的方法命令式调用事件通过回调 props接收。其中唯一的特例是播放/暂停它被设计为声明式的paused属性。也就是说你不需要手动调用play()/pause()只需控制paused这个 state组件会自行同步播放状态import Video, { VideoRef } from react-native-video; import { useRef } from react; const ref useRefVideoRef(null); Video ref{ref} source{{ uri: https://example.com/master.m3u8 }} paused{paused} // 声明式播放/暂停 controls resizeModecontain onProgress{({ currentTime }) {}} /;注意v6 中组件必须保持mounted才能播放哪怕做音频-only 播放也要把Video挂载并渲染为width: 0, height: 0的隐藏视图。这也是 v6 与 v7 的重要差异之一——v7 的useVideoPlayerhook 允许无视图的纯音频播放详见 skills/react-native-video/references/v7/player-model.md。其余所有能力都集中在VideoRef上调用方式统一为ref.current?.method(...)。二、ref 实例方法速查表以下方法均通过useRefVideoRef(null)获取的 ref 调用方法细节与各平台支持情况在后续小节展开方法说明seek(seconds)跳转到指定位置单位秒。v7 中对应player.seekTo()pause()/resume()命令式暂停/恢复或直接用paused属性setVolume(value)设置音量取值范围 0.0–1.0getCurrentPosition()返回当前播放位置秒的 PromisesetSource(source)运行时动态切换媒体源setFullScreen(bool)切换全屏官方推荐presentFullscreenPlayer()/dismissFullscreenPlayer()已弃用——请改用setFullScreenenterPictureInPicture()/exitPictureInPicture()进入/退出画中画restoreUserInterfaceForPictureInPictureStopCompleted(bool)iOS PiP 退出后的 UI 恢复回调save()iOS 专属将当前媒体保存到系统相册导出.mp4到缓存目录并应用当前滤镜resolve 结果{ uri }这些方法完整定义可对照官方 v6 版本化文档 docs/versioned_docs/version-6.x/component/methods.mdx 中的方法签名与平台标记PlatformsList。三、核心播放方法逐一详解3.1seek(seconds)跳转播放// 必须等 onLoad 之后才能调用 ref.current?.seek(30); // iOS 精确跳转第二个参数 tolerance毫秒 ref.current?.seek(200, 10); // 允许 ±10ms 容差调用时机文档明确要求seek必须在onLoad之后调用否则播放器尚未就绪。事件联动seek 完成后会触发onSeek事件其 payload 包含currentTimeseek 后的实际时间与seekTime请求的目标时间示例见 docs/versioned_docs/version-6.x/component/events.mdx。iOS 精确 seekiOS 支持seek(seconds, tolerance)第二参数默认容差为 ±100ms如需精确定位例如逐帧校对传tolerance 0。平台差异注意文档注明在 iOS 上启用原生控件controls时onSeek不会被上报。3.2pause()/resume()命令式播放控制两个方法分别暂停与恢复播放返回Promisevoid。官方推荐优先使用声明式的paused属性适合绑定 UI 状态pause()/resume()则适合在事件回调、定时器或第三方逻辑中临时打断/恢复播放。3.3setVolume(value)音量控制ref.current?.setVolume(0.5); // 50% 音量取值 0.0–1.0行为与volume属性一致docs/versioned_docs/version-6.x/component/props.mdx 中volume属性的说明相同。音量变化会触发onVolumeChange事件其 payload 为{ volume, muted }注意该事件反映的是播放器音量而非设备系统音量。3.4getCurrentPosition()读取播放进度const pos await ref.current?.getCurrentPosition(); console.log(当前播放位置秒:, pos);返回Promisenumber即当前播放位置秒。若播放器尚未初始化会抛出错误因此调用前应确保onLoad已经触发。相比用onProgress回调维护currentTime状态这个方法适合在用户点击某一时刻需要立即取值如收藏当前时间点、上报进度时按需读取。3.5setSource(source)运行时动态换源ref.current?.setSource({ uri: https://example.com/another.m3u8 });支持平台Android、iOSweb 上无此方法web 可换用原生 HTML 元素引用。行为会覆盖sourceprop 的当前值实现运行时换源例如切清晰度、切语言版本、切换直播流。注意在 v6 中drm、bufferConfig、adTagUrl、textTracks等配置推荐直接放进source对象内如source.drm、source.ad.adTagUrl顶层同名 props 虽仍可用但已标记为 deprecated。3.6setFullScreen(bool)全屏控制推荐ref.current?.setFullScreen(true); // 进入全屏 ref.current?.setFullScreen(false); // 退出全屏支持平台Android、iOS、web。这是官方推荐的全屏方案替代已弃用的presentFullscreenPlayer()/dismissFullscreenPlayer()。与全屏配套的属性与事件属性fullscreen、fullscreenOrientation限制全屏方向、fullscreenAutorotate事件onFullscreenPlayerWillPresent/onFullscreenPlayerDidPresent/onFullscreenPlayerWillDismiss/onFullscreenPlayerDidDismiss详见 skills/react-native-video/references/v6/pip-fullscreen-controls.md。平台差异iOS 上进入全屏会打开一个带控件的全屏视图控制器Android 上播放器进入全屏但需要你自己用样式撑满屏幕尺寸。3.7 PiPenterPictureInPicture()/exitPictureInPicture()ref.current?.enterPictureInPicture(); ref.current?.exitPictureInPicture();支持平台Android、iOS、web。状态事件onPictureInPictureStatusChangedpayload 为{ isActive }可据此同步 UI 状态。自动进入enterPictureInPictureOnLeave属性可在用户离开 App 时自动进入 PiP。原生配置要求iOS需要开启 audio background mode后台音频模式详见 skills/react-native-video/references/shared/platform-setup.mdAndroid需要在AndroidManifest.xml的activity上声明android:supportsPictureInPicturetrue且minSdk不低于 26。测试环境提示PiP 在iOS 模拟器上不支持需真机验证Android 模拟器API 26 的 Google Play 镜像上可用。3.8restoreUserInterfaceForPictureInPictureStopCompleted(bool)iOS PiP UI 恢复仅 iOS 支持。当系统退出 PiP 并要求恢复 App 界面时会触发onRestoreUserInterfaceForPictureInPictureStop事件你必须在该事件的处理器内、完成 UI 恢复后调用此方法通知系统Video ref{ref} onRestoreUserInterfaceForPictureInPictureStop{() { // 恢复被 PiP 遮挡的 UI ref.current?.restoreUserInterfaceForPictureInPictureStopCompleted(true); }} /;它对应 AppleAVPictureInPictureControllerDelegate的restoreUserInterfaceForPictureInPictureStop协议方法。3.9save()iOS 保存视频到相册const { uri } await ref.current?.save(); console.log(已保存到相册缓存文件:, uri);仅 iOS 支持签名save(): Promise{ uri: string }。使用注意事项源自 docs/versioned_docs/version-6.x/component/methods.mdx仅支持MP4导出文件导出到缓存目录文件名由 UUID 生成若视频尚未缓冲完成需要联网才能导出视频保存在系统相册中直到用户手动删除对已缓存的视频同样有效官方文档列出的后续改进方向包括多清晰度选项、更多格式、自定义目录与文件名。四、静态方法VideoDecoderProperties编解码能力探测除 ref 实例方法外v6 还通过命名导出VideoDecoderProperties提供一组静态方法注意 v6 中仅 Android 支持import { VideoDecoderProperties } from react-native-video; VideoDecoderProperties.getWidevineLevel().then((level) { console.log(Widevine Level:, level); }); VideoDecoderProperties.isCodecSupported(video/hevc, 1920, 1080).then( (support) { console.log(HEVC Support:, support); // hardware | software | unsupported }, ); VideoDecoderProperties.isHEVCSupported().then((support) { console.log(HEVC 1080p Support:, support); });4.1getWidevineLevel()返回设备支持的Widevine DRM 等级0表示未知/不支持1、2、3表示支持的 Widevine 级别。可用于在播放 DRM 内容前做设备能力预检配合 DRM 配置使用见 skills/react-native-video/references/v6/drm.md。4.2isCodecSupported(mimetype, width, height)检查指定视频编解码器是否支持参数为 MIME 类型与宽高返回值为返回值含义hardware支持硬件解码software仅支持软件解码unsupported不支持该编码4.3isHEVCSupported()检查HEVCH.265在 1920×1080 分辨率下是否支持内部复用isCodecSupported即isCodecSupported(video/hevc, 1920, 1080)的便捷封装。五、完整示例一个带全部常用控制的播放器综合 ref 方法与静态方法一个典型用法如下完整示例参见 docs/versioned_docs/version-6.x/component/methods.mdx 的 Example Usage 一节import Video, { VideoRef } from react-native-video; import { useRef } from react; const videoRef useRefVideoRef(null); const handleVideoControls async () { if (!videoRef.current) return; // 全屏控制推荐 setFullScreen老 API 已弃用 videoRef.current.setFullScreen(true); videoRef.current.setFullScreen(false); // 播放控制命令式 pause/resume videoRef.current.pause(); videoRef.current.resume(); // iOS保存视频到相册 const response await videoRef.current.save(); console.log(Saved video path:, response.uri); // 跳转seek 到 200 秒iOS 可带容差 videoRef.current.seek(200); videoRef.current.seek(200, 10); // 读取进度 const pos await videoRef.current.getCurrentPosition(); console.log(Current position:, pos); }; return ( Video ref{videoRef} source{{ uri: https://example.com/video.mp4 }} controls / );六、web 平台补充nativeHtmlVideoRef在 v6 的 web 实现中VideoRef上还有一个 web 专属的nativeHtmlVideoRef——指向原生 HTMLvideo元素的引用方便集成hls.js、shaka、video.js等第三方 Web 播放库。七、构建预加载信息流时的 v6 边界与 v7 建议如果你的目标场景是TikTok 式短视频信息流feed预加载需要明确 v6 的边界v6 没有一等公民的 prefetch预加载API常见 workaround 是挂载相邻的Video paused实例并调优bufferConfigAndroid 缓冲调优参数见 skills/react-native-video/references/shared/streaming-sources.md。若平滑预加载是核心诉求v7 才是为此设计的提供preload()replaceSourceAsync()能实现廉价换源。详见 skills/react-native-video/references/v7/playback-control.md 与 skills/react-native-video/references/choosing-version.md。此外v6 通过interop 层支持新架构需 RN ≥ 0.72RN 0.74 时需在react-native.config.js中将Video注册为 legacy 组件但它本身不是原生 Fabric 组件——追求原生新架构与极致首帧/播放性能时v7 是更合适的选择。八、结语react-native-video v6 的控制 API 可以一句话概括paused管播放/暂停ref管一切。掌握seek含 iOS 容差、setVolume、getCurrentPosition、setSource、setFullScreen、PiP 系列方法与 iOSsave()即可覆盖绝大多数业务场景配合VideoDecoderProperties的编解码能力探测还能在 Android 上做播放前的设备能力预检。若需要预加载信息流等进阶能力建议按 skills/react-native-video/references/choosing-version.md 的指引评估迁移 v7。完整方法签名与平台支持矩阵可随时对照仓库内的 docs/versioned_docs/version-6.x/component/methods.mdx 与 skills/react-native-video/references/v6/playback-and-methods.md。赞分享音视频移动开发【免费下载链接】react-native-videoA component for react-native项目地址https://gitcode.com/gh_mirrors/re/react-native-video点击查看免费下载相关推荐Native SDK Video Player 示例全解析声明式 video 与 Custom 命令式播放器双架构Native SDK Video Player 示例全解析声明式 video 与 Custom 命令式播放器双架构 导读 本文以 examples/vid桌面应用跨平台react-native-video v6 完整指南用 Video 组件、props、ref 方法与事件回调构建播放能力react native video v6 完整指南用 Video 组件、props、ref 方法与事件回调构建播放能力 导读 本文以 react nat音视频移动开发react-native-video 的 VideoView 命令式 API 指南Ref 方法控制全屏与画中画react native video 的 VideoView 命令式 API 指南Ref 方法控制全屏与画中画 VideoView 是 react nativ音视频移动开发上一篇Apache Thrift 参数校验Parameter Validation提案解析从 IDL 注解到代码生成的完整指南下一篇完整的 Dify 工作流合集46 个现成流程从导入到出结果创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考