音视频移动开发【免费下载链接】react-native-videoA component for react-native项目地址https://gitcode.com/gh_mirrors/re/react-native-video点击查看免费下载react-native-video 的 v6 稳定版采用单一命令式Video组件模型一切配置通过 props 声明播放控制通过 ref 命令式调用事件通过回调 props 接收。本文以 skills/react-native-video/references/v6/component-and-props.md 为核心骨架结合仓库内 v6 相关参考文档与类型源码系统讲解 v6 的常用 props、source内嵌配置、纯音频播放、轨道选择与 DRM 配置读完即可在 v6 项目中落地一套完整可用的视频播放方案。v6 心智模型一个组件三类接口v6 的全部能力都收敛在Video组件上使用方式只有三步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{false} controls resizeModecontain onProgress{({ currentTime }) {}} /; // 命令式控制通过 ref 调用方法 ref.current?.seek(30);配置全部通过Video上的 props 完成声明式控制paused/muted/rate等是声明式 props而 seek、fullscreen、PiP 等通过ref命令式调用事件通过onLoad、onProgress、onError等回调 props 接收。v6 是当前稳定主线最新 6.x通过 interop 层支持 New Architecture需要 RN ≥ 0.72RN 0.74 时需在react-native.config.js中将Video注册为 legacy 组件它本身不是原生的 Fabric 组件。完整的 v6 心智模型参见 skills/react-native-video/references/v6/README.md。Common props 全览下表是 v6 最常用的一组 props完整权威列表以官方文档为准本表覆盖日常 95% 场景Prop类型用途source{ uri, headers?, type? }或require(...)要播放的媒体必填pausedboolean暂停/恢复声明式播放/暂停mutedboolean静音volumenumber音量范围 0.0–1.0ratenumber播放速度1.0 为正常repeatboolean播放结束后循环resizeModenone \| contain \| cover \| stretch画面缩放模式controlsboolean显示原生播放控件posterobject加载时的封面图自定义加载 UI 用renderLoaderfullscreenboolean进入全屏fullscreenOrientationstring限制全屏方向bufferConfigobjectAndroid 缓冲调优详见 skills/react-native-video/references/shared/streaming-sources.mdmaxBitRatenumber带宽上限bits/secpreferredForwardBufferDurationnumberiOS 预缓冲时长秒selectedAudioTrack/selectedTextTrack/selectedVideoTrackobject音轨/字幕轨/视频轨选择见 skills/react-native-video/references/v6/tracks-subtitles.mddrmobjectDRM 配置见 skills/react-native-video/references/v6/drm.mdplayInBackgroundbooleanApp 退到后台时继续播放playWhenInactivebooleaniOSApp 失焦但仍在屏上时继续播放通知中心/来电横幅遮挡时ignoreSilentSwitchinherit \| ignore \| obeyiOS 静音开关行为mixWithOthersinherit \| mix \| duck与其他 App 音频的混合策略showNotificationControlsboolean锁屏/通知栏媒体控制progressUpdateIntervalnumberonProgress触发间隔毫秒默认 250reportBandwidthboolean启用onBandwidthUpdate事件adTagUrlstringVAST/IMA 广告 tagviewTypeViewTypetextureView/surfaceView/secureView渲染表面默认surfaceView几个值得注意的细节volume是 0.0–1.0 的浮点数1.0 为最大音量与muted叠加使用时muted优先。rate同时影响音调变速不变调Android 由 ExoPlayer 处理iOS 由 AVPlayer 处理常用于 0.5×–2× 的慢放/快进。viewType的secureView用于受保护内容渲染textureView支持旋转/动画等视图变换surfaceView默认性能更好但不支持视图动画。progressUpdateInterval默认 250ms调大可减少onProgress回调频率以降低 JS 侧开销适合长时播放。最小可用示例Video source{{ uri: https://example.com/master.m3u8 }} style{{ width: 100%, aspectRatio: 16 / 9 }} controls paused{paused} resizeModecontain onLoad{({ duration }) {}} onProgress{({ currentTime }) {}} onError{(e) {}} /要点source可以是远程{ uri }、带鉴权的{ uri, headers }也可以是本地require(./video.mp4)style使用aspectRatio: 16 / 9保持视频比例避免黑边或裁切onLoad在元数据加载完成后触发duration可在此时写入 state 用于进度条onError收到错误对象含error.code与error.errorString时应做 UI 兜底相关类型可参考 packages/react-native-video/src/core/types/VideoError.ts。v6 的source内嵌配置bufferConfig/drm/adTagUrl/textTracksv6 的一个重要演进是bufferConfig、drm、adTagUrl、textTracks现在推荐直接放在source内部如source.drm、source.ad.adTagUrl顶层同名 props 仍然可用但已标记为 deprecatedVideo source{{ uri: https://example.com/manifest.mpd, drm: { type: DRMType.WIDEVINE, licenseServer: https://license.example.com/wv, headers: { X-AxDRM-Message: token }, }, ad: { adTagUrl: https://example.com/ads.xml }, textTracks: [ { title: English, language: en, type: text/vtt, uri: https://example.com/en.vtt }, ], }} /这样做的收益是媒体来源的所有属性内聚在source一个对象里切换视频源时整套配置随源一起替换ref.setSource(...)语义更干净。fullscreen在 iOS 与 Android 双平台都可用。流媒体源、鉴权请求头与缓冲调优支持的格式与type显式声明HLS.m3u8、DASH.mpd、渐进式MP4/MOV均受支持Android 走 ExoPlayer/Media3iOS 走 AVPlayerweb 走 video.jsSmoothStreaming 是 v6 独有。格式默认从 URL 扩展名自动探测若 URL 没有扩展名必须显式声明typeVideo source{{ uri: https://example.com/live, type: m3u8 }} /鉴权请求头付费/私有媒体通常需要带 token 访问直接通过source.headers携带Video source{{ uri, headers: { Authorization: Bearer t } }} /Android 缓冲调优bufferConfigv6 的bufferConfig字段与 v7 同名minBufferMs、maxBufferMs、bufferForPlaybackMs、bufferForPlaybackAfterRebufferMs、backBufferDurationMs但默认值不同v6 中未设置的字段回落到Media3DefaultLoadControl的默认值50000 / 50000 / 1000 / 2000backBuffer 为 0而非 v7 的 5000 / 10000 / 1000 / 2000。可对照仓库中的 BufferConfig.ts 类型定义理解各字段语义minBufferMs播放器尝试保持的最小缓冲时长毫秒maxBufferMs播放器尝试保持的最大缓冲时长毫秒bufferForPlaybackMsseek 等用户操作后开始/恢复播放所需的最小缓冲量bufferForPlaybackAfterRebufferMs一次 rebuffer缓冲中断后恢复播放所需的缓冲量backBufferDurationMs回看缓冲后退缓冲时长。场景建议构建短视频 feed 时把 Android 的 min/max 缓冲调低避免屏幕外的播放器过度预缓冲、吃掉内存Video source{{ uri }} bufferConfig{{ minBufferMs: 2000, maxBufferMs: 5000, bufferForPlaybackMs: 500, bufferForPlaybackAfterRebufferMs: 1000, }} /iOS 侧v6 的 iOS 预缓冲通过顶层preferredForwardBufferDuration秒控制带宽上限用maxBitRatebits/sec限制preferredForwardBufferDurationMs、preferredPeakBitRate、preferredMaximumResolution及livePlayback块是 v7 才有的字段。缓存与离线勿混淆**缓存Caching**是透明的重播/循环同一片段时避免重复下载。v6 内置缓存能力iOS 需在 Podfile 中开启$RNVideoUseVideoCachingtrue标志仅限渐进式MP4/M4V/MOV不适用于 HLSAndroid 则设置bufferConfig.cacheSizeMBLRU 缓存。**离线下载Offline**是用户主动发起的持久化行为不在核心包内普通 MP4 可自行下载后播放file://路径Expo 用expo-file-systemRN CLI 推荐react-native-blob-util直写磁盘HLS/DASH 或 DRM 内容的离线能力需借助 TheWidlarzGroup Offline SDK。v6 核心没有内置OfflineVideo/下载 API。轨道选择与字幕通过 props 选择音轨/字幕轨/视频轨Video source{{ uri }} selectedTextTrack{{ type: language, value: en }} selectedAudioTrack{{ type: language, value: en }} selectedVideoTrack{{ type: resolution, value: 720 }} onTextTracks{({ textTracks }) {}} onAudioTracks{({ audioTracks }) {}} onVideoTracks{({ videoTracks }) {}} /音轨/字幕轨的 selectortype可选system | disabled | title | language | index视频轨的type集合不同auto | disabled | resolution | index可用轨道通过onTextTracks/onAudioTracks/onVideoTracks事件获取拿到textTracks/audioTracks/videoTracks数组后再回填选择。平台差异音频/字幕轨道事件双平台都会触发onVideoTracks与selectedVideoTrack视频轨上报与选择仅 Android 支持。外部sidecar字幕Video source{{ uri }} textTracks{[ { title: English, language: en, type: text/vtt, uri: https://example.com/en.vtt }, ]} subtitleStyle{{ fontSize: 16, paddingBottom: 24 }} /限制iOS sidecar 字幕仅支持.vttsubtitleStyle的fontSize/paddingBottom仅 Android 生效opacity双平台可用。完整说明见 skills/react-native-video/references/v6/tracks-subtitles.md。纯音频播放保持挂载渲染隐藏v6 处理纯音频播放的方式是Video必须保持挂载否则无法播放但把它渲染成不可见Video source{{ uri: https://example.com/audio.m3u8 }} paused{false} playInBackground style{{ width: 0, height: 0 }} // 挂载但不可见 /想让音频在后台继续播放加上playInBackground并完成原生侧配置见下文后台与锁屏播放想要锁屏/通知栏媒体控制再加showNotificationControls配合metadata{ title, subtitle, artist, imageUri, ... }展示标题与封面这种方式可用但比 v7 繁琐——v7 中纯音频只需useVideoPlayerhook、完全不需要任何视图见 skills/react-native-video/references/v7/player-model.md。后台与锁屏播放原生侧前置配置iOS在Info.plist的UIBackgroundModes中加入audio或通过 Expo 配置插件完成后台音频才能持续播放Android后台播放经由媒体服务 通知实现Expo 项目需在 config plugin 中启用enableBackgroundAudio。各选项的作用选项作用playInBackgroundApp 退到后台Home/应用切换器时继续播放playWhenInactiveiOSApp 处于失焦但仍在前台屏幕状态时继续播放通知中心/控制中心下拉、来电横幅showNotificationControls在锁屏/通知栏显示媒体控制配合metadata设置标题与封面disableFocusv6不抢占音频焦点避免其他 App 的音频被暂停Video source{{ uri }} playInBackground playWhenInactive showNotificationControls metadata{{ title: Episode 1, artist: Acme, imageUri: https://example.com/art.jpg }} /注意上述选项保证的是退后台后音频继续若要离开页面/App 后画面仍可见需要用画中画Picture-in-Picture常与后台音频搭配使用参见 skills/react-native-video/references/v6/pip-fullscreen-controls.md。iOS 后台音频务必在真机上验证——模拟器无法可靠模拟AVAudioSession的后台行为Android 模拟器则没问题。Web 端锁屏控制走浏览器 MediaSession API。DRMv6 内置drmpropv6 的 DRM内置于核心包无需额外依赖通过drmprop 配置import Video, { DRMType } from react-native-video; Video source{{ uri: https://example.com/manifest.mpd }} drm{{ type: DRMType.WIDEVINE, // 枚举值不是字符串 licenseServer: https://license.example.com/wv, // 注意字段名licenseServer headers: { X-AxDRM-Message: token }, // iOS 和 Android 都会用到 }} /;drm字段表字段类型平台说明typeDRMType枚举全部WIDEVINE \| PLAYREADY \| CLEARKEYAndroid、FAIRPLAYiOSlicenseServerstring全部License 服务器 URLheadersobject全部License 请求头v6 中双平台生效getLicense(spc, contentId, licenseUrl, loadedLicenseUrl) base64iOS自定义 CKC 获取位置参数certificateUrlstringiOSFairPlay 证书base64CertificatebooleaniOS证书 URL 返回的是否为 base64contentIdstringiOS覆盖 content idmultiDrmbooleanAndroid密钥轮换key rotationlocalSourceEncryptionKeySchemestringiOS本地资源密钥方案License/token 过期的最佳实践不要硬编码静态 tokeniOS 在getLicense中每次拉取新鲜 tokenAndroid 使用短时有效的licenseServertoken或headers若播放中途 token 过期通过ref.setSource(...)重载源或 remount 组件。DRM 测试注意事项v6/v7 通用iOS 模拟器没有 FairPlayAndroid 模拟器通常能处理 Widevine——若模拟器上表现异常务必在真机验证。v7 的 DRM 体系完全不同拆分为独立react-native-video/drm包、字段更名如licenseServer→licenseUrl、multiDrm→multiSession、枚举改字符串联合、getLicense签名改变、base64Certificate/localSourceEncryptionKeyScheme被移除见 skills/react-native-video/references/v7/drm.md。仓库当前源码中的 DrmParams.ts 展示的正是 v7 形态licenseUrl、licenseHeaders、multiSession、getLicense接收对象参数可作为对比参考。播放控制与 ref 方法播放/暂停是声明式的pausedprop其余控制通过ref命令式完成import Video, { VideoRef } from react-native-video; const ref useRefVideoRef(null); Video ref{ref} source{{ uri }} paused{paused} /;方法说明seek(seconds)跳转到指定位置v7 对应player.seekTo()pause()/resume()命令式播放/暂停或用pausedpropsetVolume(value)音量0.0–1.0getCurrentPosition()返回当前播放位置的 Promise秒setSource(source)运行时更换视频源setFullScreen(bool)切换全屏推荐presentFullscreenPlayer()/dismissFullscreenPlayer()已废弃——改用setFullScreenenterPictureInPicture()/exitPictureInPicture()画中画restoreUserInterfaceForPictureInPictureStopCompleted(bool)iOS PiP 恢复 UI 回调save()iOS把当前条目保存到相册导出.mp4到缓存目录并应用当前滤镜resolve{ uri }示例ref.current?.seek(30); const pos await ref.current?.getCurrentPosition(); ref.current?.setFullScreen(true);静态方法VideoDecoderPropertiesimport { VideoDecoderProperties } from react-native-video后可用getWidevineLevel()、isCodecSupported(...)、isHEVCSupported()——全部仅 Android。完整方法说明见 skills/react-native-video/references/v6/playback-and-methods.md。从 v6 到 v7这些 props 去哪里了v7 是完全不同的编程模型本质是重写用法而非升版本但概念基本一一对应v6v7Video source{s} /const player useVideoPlayer(s)VideoView player{player} /pausedpropplayer.pause()/player.play()muted/volume/rate/repeatplayer.muted/player.volume/player.rate/player.loopresizeMode、controls相同——但变成VideoView的 propsref.seek(t)player.seekTo(t)绝对/player.seekBy(t)相对ref.pause()/resume()player.pause()/player.play()ref.setSource(s)player.replaceSourceAsync(s)ref.setFullScreen(true)videoViewRef.enterFullscreen()ref.enterPictureInPicture()videoViewRef.enterPictureInPicture()onLoad/onProgress/… 回调 propsuseEvent(player, onLoad/onProgress, cb)onPlaybackStateChangedonPlaybackStateChange更名onReadyForDisplayonReadyToDisplay更名bufferConfigpropbufferConfig移入useVideoPlayer配置source.headerssource.headers相同v6 有而 v7 核心没有的能力广告adTagUrl、onReceiveAdEvent不在 v7 核心内save()是 iOS 专属保存当前画面到相册工具也非通用下载能力且不在 v7 核心内。迁移细节参见 skills/react-native-video/references/migration-v6-to-v7.md。选型建议何时直接上 v7即便项目当前停留在 v6如果出现以下诉求建议评估直接迁移 v7预加载 / TikTok 式短视频 feedv7 原生支持preload() 快速换源v6 没有一等公民的预取能力只能用挂载相邻Video paused实例 调低bufferConfig的变通方案原生新架构Fabric集成或追求最佳启动/播放性能插件化体系如通过react-native-video/drm实现 DRM。v7 虽处 beta 但已支撑 1000 万 用户的生产应用。版本选择逻辑详见 skills/react-native-video/references/choosing-version.md。小结v6 的威力在于一个组件全搞定source承载媒体来源与鉴权、bufferConfig控制缓冲、drm内置版权保护、selected*Track管理多轨、playInBackground等支撑后台播放再配合 ref 的命令式方法与回调 props 的事件模型足以覆盖从普通视频播放到纯音频、字幕、DRM、全屏、画中画的完整场景。迁移到 v7 时用本文的映射表逐 prop 对照改写即可平滑过渡。赞分享音视频移动开发【免费下载链接】react-native-videoA component for react-native项目地址https://gitcode.com/gh_mirrors/re/react-native-video点击查看免费下载相关推荐react-native-video v6 音视频轨道与字幕完全指南轨道选择、事件回调与外部字幕实战react native video v6 音视频轨道与字幕完全指南轨道选择、事件回调与外部字幕实战 本篇技术指南围绕 react native video音视频移动开发React Native Video DRM 实战指南用 react-native-video/drm 集成 Widevine 与 FairPlayReact Native Video DRM 实战指南用 react native video/drm 集成 Widevine 与 FairPlay 本文讲音视频移动开发解锁流媒体自由N_m3u8DL-RE 跨平台下载解决方案的完整实践指南解锁流媒体自由N_m3u8DL RE 跨平台下载解决方案的完整实践指南 你是否曾经遇到过这样的困境精心挑选的在线课程无法离线学习重要的直播会议无法回看喜音视频移动开发上一篇StencylWorks集成ONLYOFFICE Docs游戏开发文档处理的终极指南下一篇零停机扩容Zodan 为 Spock 集群添加节点的完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考