音視頻移動(dòng)開發(fā)【免費(fèi)下載鏈接】react-native-videoA component for react-native項(xiàng)目地址https://gitcode.com/gh_mirrors/re/react-native-video點(diǎn)擊查看免費(fèi)下載VideoView是 react-native-video v7 中負(fù)責(zé)把VideoPlayer實(shí)例渲染到屏幕上的核心原生視圖組件同時(shí)內(nèi)置了原生播放控件、全屏與畫中畫PiP等 UI 能力。本文以 VideoView 官方文檔 為骨架結(jié)合本倉(cāng)庫(kù)的 TypeScript 實(shí)現(xiàn)與 Nitro 原生綁定源碼系統(tǒng)講解它的基本用法、全部 Props、命令式方法Ref、UI 事件回調(diào)、Chapters 章節(jié)功能以及它在 iOS / Android / Web 三端的底層工作原理讓你能直接照著寫出可運(yùn)行的視頻播放界面。VideoView 在 v7 架構(gòu)中的定位在 v7 的「播放器模型Player Model」中播放邏輯與視圖渲染被明確拆分VideoPlayer負(fù)責(zé)視頻源管理、播放、暫停、seek、音量、字幕等全部播放行為見 useVideoPlayer 指南 與 VideoPlayer 類文檔VideoView只負(fù)責(zé)把某個(gè)VideoPlayer的畫面渲染到屏幕上并提供原生控件、全屏、畫中畫、屏幕常亮等視圖層功能。這意味著你可以把同一個(gè)player實(shí)例掛到多個(gè)VideoView上也可以在列表頁、詳情頁之間復(fù)用一個(gè)播放器而無需重建原生資源。使用VideoView的硬性前提是必須把一個(gè)VideoPlayer實(shí)例通過playerprop 傳入。基本用法從創(chuàng)建播放器到渲染畫面最基礎(chǔ)的使用方式是通過useVideoPlayer鉤子創(chuàng)建播放器實(shí)例再把它傳給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) { // 可選播放器創(chuàng)建完成后立即執(zhí)行的初始化函數(shù) _player.play(); }); return ( VideoView style{styles.video} player{player} controls{true} / ); }; const styles StyleSheet.create({ video: { width: 100%, height: 200, }, }); export default App;幾個(gè)關(guān)鍵點(diǎn)useVideoPlayer的第二個(gè)參數(shù)是「創(chuàng)建回調(diào)」在播放器實(shí)例創(chuàng)建完成后觸發(fā)適合在這里調(diào)用play()、設(shè)置muted、loop等初始狀態(tài)controls決定是否顯示原生播放控件播放/暫停、進(jìn)度條、音量等默認(rèn)false即「裸畫面」player是必填 prop類型為VideoPlayerBase見 VideoViewProps.ts。如果你需要更精細(xì)地控制播放器生命周期也可以不依賴鉤子直接手動(dòng)創(chuàng)建VideoPlayer實(shí)例后傳入?yún)⒁?VideoPlayer 類文檔。Props 全量參考以下表格是VideoView支持的全部 Props來自 props.md并與源碼中VideoViewProps接口VideoViewProps.ts一一對(duì)應(yīng)Prop類型必填默認(rèn)值說明playerVideoPlayer是-管理待顯示視頻的VideoPlayer實(shí)例styleViewStyle否-標(biāo)準(zhǔn) React Native 樣式控制VideoView的布局與外觀controlsboolean否false是否顯示原生播放控件播放/暫停、進(jìn)度條、音量等pictureInPictureboolean否false是否啟用并顯示原生控件中的畫中畫PiP按鈕需平臺(tái)支持且控件可見autoEnterPictureInPictureboolean否false播放開始后 App 進(jìn)入后臺(tái)時(shí)是否自動(dòng)進(jìn)入 PiP 模式行為因平臺(tái)而異resizeModecontain \| cover \| stretch \| none否none視頻如何縮放以適配視圖keepScreenAwakeboolean否true視頻視圖掛載期間是否保持屏幕常亮surfaceTypesurface \| texture否僅 AndroidsurfaceAndroid底層原生視圖類型iOS 上忽略關(guān)于resizeMode四種取值的精確定義源碼注釋VideoViewProps.ts給出如下語義contain保持寬高比把視頻完整縮放進(jìn)視圖內(nèi)部可能留黑邊cover保持寬高比并填滿整個(gè)視圖可能裁剪畫面stretch拉伸填滿視圖不保持寬高比畫面可能變形none不做任何縮放。注意VideoView的默認(rèn)resizeMode是none這與舊版組件的習(xí)慣不同如果發(fā)現(xiàn)畫面沒有按預(yù)期適配請(qǐng)顯式設(shè)置該 prop。Android如何選擇 surfaceType:::info 僅 AndroidsurfaceType只在 Android 生效iOS 上會(huì)被忽略。 :::在 Android 上默認(rèn)渲染路徑使用SurfaceView即surfaceTypesurface以獲得最優(yōu)的解碼性能與更低的延遲。但SurfaceView運(yùn)行在獨(dú)立的窗口層separate window中因此它無法被 transform 動(dòng)畫處理縮放、旋轉(zhuǎn)、透明度漸隱被父視圖裁剪圓角、遮罩與兄弟視圖可靠地疊放存在 z-order 問題。如果你的 UI 需要上述效果應(yīng)切換為TextureViewVideoView player{player} surfaceTypetexture style{{ width: 300, height: 170, borderRadius: 16, overflow: hidden }} resizeModecover controls /使用原則僅在確實(shí)需要?jiǎng)赢?、圓角裁剪或重疊 UI 時(shí)才用TextureView因?yàn)樗阅苈缘颓以诓糠衷O(shè)備上可能增加功耗。相關(guān)類型定義可參見 VideoViewViewManager.nitro.ts。Refs 與命令式方法程序化控制全屏與畫中畫VideoView通過forwardRef暴露命令式方法VideoView.tsx。獲取 ref 后即可調(diào)用const videoViewRef React.useRefVideoViewRef(null); // ... VideoView ref{videoViewRef} player{player} / // 之后即可調(diào)用命令式方法 videoViewRef.current?.enterFullscreen();VideoViewRef上可用的方法定義見 methods.md 與 VideoViewProps.ts方法類型說明enterFullscreen()() void程序化請(qǐng)求進(jìn)入全屏模式exitFullscreen()() void程序化請(qǐng)求退出全屏模式enterPictureInPicture()() void程序化請(qǐng)求進(jìn)入畫中畫模式exitPictureInPicture()() void程序化請(qǐng)求退出畫中畫模式canEnterPictureInPicture()() boolean檢查畫中畫當(dāng)前是否可用/受支持可進(jìn)入返回true否則返回false另外VideoViewRef還暴露了一個(gè)addEventListener方法見 VideoViewProps.ts可以像下面這樣以編程方式注冊(cè) UI 事件監(jiān)聽并返回一個(gè)可調(diào)remove()的訂閱對(duì)象const subscription videoViewRef.current?.addEventListener( onFullscreenChange, ({ isFullscreen }) { console.log(isFullscreen ? 進(jìn)入全屏 : 退出全屏); } ); // 不再需要時(shí)移除監(jiān)聽 subscription?.remove();從實(shí)現(xiàn)上看這些命令式方法都會(huì)轉(zhuǎn)發(fā)給底層的 NitroVideoViewViewManager混合對(duì)象VideoViewViewManager.nitro.ts并由一個(gè)wrapNativeViewManagerFunction包裝器統(tǒng)一處理「視圖管理器未找到」等錯(cuò)誤VideoView.tsx。事件回調(diào)感知全屏與畫中畫狀態(tài)變化VideoView接受一系列與 UI 狀態(tài)變化相關(guān)的事件回調(diào)完整列表見 events.md事件類型定義見 Events.ts事件類型說明onPictureInPictureChange?(event: { isActive: boolean }) void畫中畫開始或停止時(shí)觸發(fā)onFullscreenChange?(event: { isFullscreen: boolean }) void全屏開始或停止時(shí)觸發(fā)willEnterFullscreen?() void即將進(jìn)入全屏前觸發(fā)willExitFullscreen?() void即將退出全屏前觸發(fā)willEnterPictureInPicture?() void即將進(jìn)入畫中畫前觸發(fā)willExitPictureInPicture?() void即將退出畫中畫前觸發(fā)這些回調(diào)可以用于在狀態(tài)切換時(shí)同步更新組件自身的 UI 或業(yè)務(wù)狀態(tài)VideoView player{player} onFullscreenChange{({ isFullscreen }) { console.log(isFullscreen ? Entered fullscreen : Exited fullscreen); }} onPictureInPictureChange{({ isActive }) { console.log(isActive ? PiP active : PiP inactive); }} /在 VideoView.tsx 中可以看到這些基于 prop 的回調(diào)會(huì)被自動(dòng)注冊(cè)為原生事件監(jiān)聽器addOnFullscreenChangeListener、addWillEnterPictureInPictureListener等并在依賴變化或組件卸載時(shí)通過sub.remove()正確清理避免內(nèi)存泄漏組件卸載時(shí)還會(huì)調(diào)用clearAllListeners()VideoView.tsx。Chapters進(jìn)度條章節(jié)標(biāo)記與跳轉(zhuǎn)VideoView還支持「視頻章節(jié)」功能章節(jié)會(huì)以可視化標(biāo)記顯示在 seekbar 上用戶點(diǎn)擊即可跳到對(duì)應(yīng)位置。該功能屬于 Pro 插件能力對(duì)應(yīng)文檔 frontmatter 標(biāo)注plan: pro倉(cāng)庫(kù)提供了演示視頻 chapters.mp4 展示實(shí)際效果。安裝與啟用首先安裝獨(dú)立插件包npm install react-native-video/chapters然后在應(yīng)用初始化時(shí)調(diào)用enable()開啟該功能必須在調(diào)用其他章節(jié)方法之前執(zhí)行import { enable } from react-native-video/chapters; enable();setChapters設(shè)置章節(jié)列表setChapters(chapters, options?)用于為播放器設(shè)置章節(jié)。chapters是如下結(jié)構(gòu)的對(duì)象數(shù)組{ title: string; // 章節(jié)標(biāo)題 timeMs: number; // 章節(jié)時(shí)間點(diǎn)毫秒 }[]可選的options配置對(duì)象支持markersColor?: string—— 章節(jié)標(biāo)記的顏色默認(rèn)取平臺(tái)默認(rèn)色showTooltip?: boolean—— 懸停在標(biāo)記上時(shí)是否顯示提示氣泡默認(rèn)trueshowTimer?: boolean—— 是否在標(biāo)記上顯示時(shí)間默認(rèn)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()移除播放器上的所有章節(jié)import { clearChapters } from react-native-video/chapters; clearChapters();goToChapter(title)按標(biāo)題程序化跳轉(zhuǎn)到指定章節(jié)import { goToChapter } from react-native-video/chapters; goToChapter(Main Content);平臺(tái)差異iOS自定義 seekbar帶可視標(biāo)記與提示氣泡Androidseekbar 上的可視標(biāo)記支持提示氣泡。源碼層面VideoView 是如何驅(qū)動(dòng)原生渲染的理解 Props 與方法的背后是本倉(cāng)庫(kù)基于 Nitro 的混合對(duì)象Hybrid Object架構(gòu)。原生視圖的綁定VideoView渲染時(shí)實(shí)際掛載的是NativeVideoViewNativeVideoView.tsx它通過UIManager.hasViewManagerConfig(VideoView)檢測(cè)原生視圖是否已正確鏈接若未鏈接會(huì)拋出包含「pod install / rebuild / Expo Go」排查提示的LINKING_ERROR。視圖管理器的創(chuàng)建組件首次掛載后原生側(cè)會(huì)通過onNitroIdChange事件把原生生成的nitroId回傳隨后由VideoViewViewManagerFactory.createViewManager(id)創(chuàng)建對(duì)應(yīng)的原生視圖管理器VideoView.tsx。源碼中特別處理了「視圖在原生管理器找到它之前就被卸載」的競(jìng)態(tài)場(chǎng)景此時(shí)只打印警告而非拋錯(cuò)。Props 的同步每次 props 變化都會(huì)調(diào)用updateProps把player、controls、pictureInPicture、autoEnterPictureInPicture、resizeMode、keepScreenAwake、surfaceType同步到原生管理器VideoView.tsx。注意其中player是通過(props.player as VideoPlayer).__getNativePlayer()取出的原生播放器句柄這正是「同一個(gè)播放器可被多個(gè)視圖共用」的實(shí)現(xiàn)基礎(chǔ)。iOS / Android 的實(shí)現(xiàn)載體iOS 側(cè)對(duì)應(yīng)HybridVideoViewViewManager.swift等文件見 ios/hybrids/VideoViewViewManagerAndroid 側(cè)由 Kotlin 實(shí)現(xiàn)并在 fabric 原生組件 中提供渲染載體兩者都遵循 VideoViewViewManager.nitro.ts 定義的接口契約。Web 端實(shí)現(xiàn)差異Web 平臺(tái)的VideoView走的是另一套實(shí)現(xiàn)VideoView.web.tsx基于videojs/react的 Player 與 VideoSkinresizeMode被映射為 CSSobject-fitcontain → contain、cover → cover、stretch → fill、none → containVideoView.web.tsx全屏通過containerRef.current?.requestFullscreen?.()/document.exitFullscreen?.()實(shí)現(xiàn)畫中畫通過video.requestPictureInPicture?.()/document.exitPictureInPicture?.()實(shí)現(xiàn)canEnterPictureInPicture返回document.pictureInPictureEnabledcontrols{true}時(shí)使用VideoSkin包裹畫面以呈現(xiàn)控制 UI。因此同樣的 Props 與命令式方法在 Web 上也能獲得一致的使用體驗(yàn)。實(shí)戰(zhàn)建議與相關(guān)文檔播放器生命周期推薦始終用useVideoPlayer創(chuàng)建播放器它會(huì)在組件卸載時(shí)自動(dòng)釋放原生資源詳見 use-video-player.md避免在VideoView卸載后仍持有已釋放的播放器。全屏與 PiP 的組合若需要「進(jìn)入后臺(tái)自動(dòng)畫中畫」可同時(shí)開啟autoEnterPictureInPicture并結(jié)合onPictureInPictureChange更新 UI在調(diào)用enterPictureInPicture()前建議先用canEnterPictureInPicture()探測(cè)設(shè)備支持度。性能取舍Android 默認(rèn)的surface渲染路徑性能最優(yōu)僅當(dāng)確實(shí)需要圓角、動(dòng)畫或疊層 UI 時(shí)才切換到texture。聯(lián)動(dòng)查閱播放行為與事件在 player/events.md 中有完整對(duì)照想了解 v6 舊版組件與 v7 的差異可參考 updating.md。贊分享音視頻移動(dòng)開發(fā)【免費(fèi)下載鏈接】react-native-videoA component for react-native項(xiàng)目地址https://gitcode.com/gh_mirrors/re/react-native-video點(diǎn)擊查看免費(fèi)下載相關(guān)推薦react-native-video 的 VideoView 組件 Props 全解析播放器綁定、原生控件、畫中畫與畫面適配react native video 的 VideoView 組件 Props 全解析播放器綁定、原生控件、畫中畫與畫面適配 導(dǎo)讀 VideoView 是 r音視頻移動(dòng)開發(fā)Hydra核心架構(gòu)解析如何實(shí)現(xiàn)實(shí)時(shí)3D場(chǎng)景圖構(gòu)建與優(yōu)化Hydra核心架構(gòu)解析如何實(shí)現(xiàn)實(shí)時(shí)3D場(chǎng)景圖構(gòu)建與優(yōu)化 Hydra 是一個(gè)革命性的實(shí)時(shí)3D場(chǎng)景圖構(gòu)建系統(tǒng)由麻省理工學(xué)院SPARK實(shí)驗(yàn)室開發(fā)。這個(gè)強(qiáng)大的機(jī)器人計(jì)算機(jī)視覺深度學(xué)習(xí)Windows 11終極清理指南使用Win11Debloat實(shí)現(xiàn)系統(tǒng)性能優(yōu)化與隱私保護(hù)Windows 11終極清理指南使用Win11Debloat實(shí)現(xiàn)系統(tǒng)性能優(yōu)化與隱私保護(hù) Windows 11雖然帶來了現(xiàn)代化的界面和功能但同時(shí)也帶來了預(yù)裝應(yīng)桌面應(yīng)用CLI上一篇終極指南ChunJun三大高級(jí)功能詳解——DDL同步、斷點(diǎn)續(xù)傳與臟數(shù)據(jù)處理下一篇5分鐘快速上手輕量級(jí)Java工作流引擎Snaker完全指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 react-native-video 的 VideoView 組件完全指南：原生渲染、播放控制、全屏與畫中畫
音視頻移動(dòng)開發(fā)【免費(fèi)下載鏈接】react-native-videoA component for react-native項(xiàng)目地址https://gitcode.com/gh_mirrors/re/react-native-video點(diǎn)擊查看免費(fèi)下載VideoView是 react-native-video v7 中負(fù)責(zé)把VideoPlayer實(shí)例渲染到屏幕上的核心原生視圖組件同時(shí)內(nèi)置了原生播放控件、全屏與畫中畫PiP等 UI 能力。本文以 VideoView 官方文檔 為骨架結(jié)合本倉(cāng)庫(kù)的 TypeScript 實(shí)現(xiàn)與 Nitro 原生綁定源碼系統(tǒng)講解它的基本用法、全部 Props、命令式方法Ref、UI 事件回調(diào)、Chapters 章節(jié)功能以及它在 iOS / Android / Web 三端的底層工作原理讓你能直接照著寫出可運(yùn)行的視頻播放界面。VideoView 在 v7 架構(gòu)中的定位在 v7 的「播放器模型Player Model」中播放邏輯與視圖渲染被明確拆分VideoPlayer負(fù)責(zé)視頻源管理、播放、暫停、seek、音量、字幕等全部播放行為見 useVideoPlayer 指南 與 VideoPlayer 類文檔VideoView只負(fù)責(zé)把某個(gè)VideoPlayer的畫面渲染到屏幕上并提供原生控件、全屏、畫中畫、屏幕常亮等視圖層功能。這意味著你可以把同一個(gè)player實(shí)例掛到多個(gè)VideoView上也可以在列表頁、詳情頁之間復(fù)用一個(gè)播放器而無需重建原生資源。使用VideoView的硬性前提是必須把一個(gè)VideoPlayer實(shí)例通過playerprop 傳入。基本用法從創(chuàng)建播放器到渲染畫面最基礎(chǔ)的使用方式是通過useVideoPlayer鉤子創(chuàng)建播放器實(shí)例再把它傳給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) { // 可選播放器創(chuàng)建完成后立即執(zhí)行的初始化函數(shù) _player.play(); }); return ( VideoView style{styles.video} player{player} controls{true} / ); }; const styles StyleSheet.create({ video: { width: 100%, height: 200, }, }); export default App;幾個(gè)關(guān)鍵點(diǎn)useVideoPlayer的第二個(gè)參數(shù)是「創(chuàng)建回調(diào)」在播放器實(shí)例創(chuàng)建完成后觸發(fā)適合在這里調(diào)用play()、設(shè)置muted、loop等初始狀態(tài)controls決定是否顯示原生播放控件播放/暫停、進(jìn)度條、音量等默認(rèn)false即「裸畫面」player是必填 prop類型為VideoPlayerBase見 VideoViewProps.ts。如果你需要更精細(xì)地控制播放器生命周期也可以不依賴鉤子直接手動(dòng)創(chuàng)建VideoPlayer實(shí)例后傳入?yún)⒁?VideoPlayer 類文檔。Props 全量參考以下表格是VideoView支持的全部 Props來自 props.md并與源碼中VideoViewProps接口VideoViewProps.ts一一對(duì)應(yīng)Prop類型必填默認(rèn)值說明playerVideoPlayer是-管理待顯示視頻的VideoPlayer實(shí)例styleViewStyle否-標(biāo)準(zhǔn) React Native 樣式控制VideoView的布局與外觀controlsboolean否false是否顯示原生播放控件播放/暫停、進(jìn)度條、音量等pictureInPictureboolean否false是否啟用并顯示原生控件中的畫中畫PiP按鈕需平臺(tái)支持且控件可見autoEnterPictureInPictureboolean否false播放開始后 App 進(jìn)入后臺(tái)時(shí)是否自動(dòng)進(jìn)入 PiP 模式行為因平臺(tái)而異resizeModecontain \| cover \| stretch \| none否none視頻如何縮放以適配視圖keepScreenAwakeboolean否true視頻視圖掛載期間是否保持屏幕常亮surfaceTypesurface \| texture否僅 AndroidsurfaceAndroid底層原生視圖類型iOS 上忽略關(guān)于resizeMode四種取值的精確定義源碼注釋VideoViewProps.ts給出如下語義contain保持寬高比把視頻完整縮放進(jìn)視圖內(nèi)部可能留黑邊cover保持寬高比并填滿整個(gè)視圖可能裁剪畫面stretch拉伸填滿視圖不保持寬高比畫面可能變形none不做任何縮放。注意VideoView的默認(rèn)resizeMode是none這與舊版組件的習(xí)慣不同如果發(fā)現(xiàn)畫面沒有按預(yù)期適配請(qǐng)顯式設(shè)置該 prop。Android如何選擇 surfaceType:::info 僅 AndroidsurfaceType只在 Android 生效iOS 上會(huì)被忽略。 :::在 Android 上默認(rèn)渲染路徑使用SurfaceView即surfaceTypesurface以獲得最優(yōu)的解碼性能與更低的延遲。但SurfaceView運(yùn)行在獨(dú)立的窗口層separate window中因此它無法被 transform 動(dòng)畫處理縮放、旋轉(zhuǎn)、透明度漸隱被父視圖裁剪圓角、遮罩與兄弟視圖可靠地疊放存在 z-order 問題。如果你的 UI 需要上述效果應(yīng)切換為TextureViewVideoView player{player} surfaceTypetexture style{{ width: 300, height: 170, borderRadius: 16, overflow: hidden }} resizeModecover controls /使用原則僅在確實(shí)需要?jiǎng)赢?、圓角裁剪或重疊 UI 時(shí)才用TextureView因?yàn)樗阅苈缘颓以诓糠衷O(shè)備上可能增加功耗。相關(guān)類型定義可參見 VideoViewViewManager.nitro.ts。Refs 與命令式方法程序化控制全屏與畫中畫VideoView通過forwardRef暴露命令式方法VideoView.tsx。獲取 ref 后即可調(diào)用const videoViewRef React.useRefVideoViewRef(null); // ... VideoView ref{videoViewRef} player{player} / // 之后即可調(diào)用命令式方法 videoViewRef.current?.enterFullscreen();VideoViewRef上可用的方法定義見 methods.md 與 VideoViewProps.ts方法類型說明enterFullscreen()() void程序化請(qǐng)求進(jìn)入全屏模式exitFullscreen()() void程序化請(qǐng)求退出全屏模式enterPictureInPicture()() void程序化請(qǐng)求進(jìn)入畫中畫模式exitPictureInPicture()() void程序化請(qǐng)求退出畫中畫模式canEnterPictureInPicture()() boolean檢查畫中畫當(dāng)前是否可用/受支持可進(jìn)入返回true否則返回false另外VideoViewRef還暴露了一個(gè)addEventListener方法見 VideoViewProps.ts可以像下面這樣以編程方式注冊(cè) UI 事件監(jiān)聽并返回一個(gè)可調(diào)remove()的訂閱對(duì)象const subscription videoViewRef.current?.addEventListener( onFullscreenChange, ({ isFullscreen }) { console.log(isFullscreen ? 進(jìn)入全屏 : 退出全屏); } ); // 不再需要時(shí)移除監(jiān)聽 subscription?.remove();從實(shí)現(xiàn)上看這些命令式方法都會(huì)轉(zhuǎn)發(fā)給底層的 NitroVideoViewViewManager混合對(duì)象VideoViewViewManager.nitro.ts并由一個(gè)wrapNativeViewManagerFunction包裝器統(tǒng)一處理「視圖管理器未找到」等錯(cuò)誤VideoView.tsx。事件回調(diào)感知全屏與畫中畫狀態(tài)變化VideoView接受一系列與 UI 狀態(tài)變化相關(guān)的事件回調(diào)完整列表見 events.md事件類型定義見 Events.ts事件類型說明onPictureInPictureChange?(event: { isActive: boolean }) void畫中畫開始或停止時(shí)觸發(fā)onFullscreenChange?(event: { isFullscreen: boolean }) void全屏開始或停止時(shí)觸發(fā)willEnterFullscreen?() void即將進(jìn)入全屏前觸發(fā)willExitFullscreen?() void即將退出全屏前觸發(fā)willEnterPictureInPicture?() void即將進(jìn)入畫中畫前觸發(fā)willExitPictureInPicture?() void即將退出畫中畫前觸發(fā)這些回調(diào)可以用于在狀態(tài)切換時(shí)同步更新組件自身的 UI 或業(yè)務(wù)狀態(tài)VideoView player{player} onFullscreenChange{({ isFullscreen }) { console.log(isFullscreen ? Entered fullscreen : Exited fullscreen); }} onPictureInPictureChange{({ isActive }) { console.log(isActive ? PiP active : PiP inactive); }} /在 VideoView.tsx 中可以看到這些基于 prop 的回調(diào)會(huì)被自動(dòng)注冊(cè)為原生事件監(jiān)聽器addOnFullscreenChangeListener、addWillEnterPictureInPictureListener等并在依賴變化或組件卸載時(shí)通過sub.remove()正確清理避免內(nèi)存泄漏組件卸載時(shí)還會(huì)調(diào)用clearAllListeners()VideoView.tsx。Chapters進(jìn)度條章節(jié)標(biāo)記與跳轉(zhuǎn)VideoView還支持「視頻章節(jié)」功能章節(jié)會(huì)以可視化標(biāo)記顯示在 seekbar 上用戶點(diǎn)擊即可跳到對(duì)應(yīng)位置。該功能屬于 Pro 插件能力對(duì)應(yīng)文檔 frontmatter 標(biāo)注plan: pro倉(cāng)庫(kù)提供了演示視頻 chapters.mp4 展示實(shí)際效果。安裝與啟用首先安裝獨(dú)立插件包npm install react-native-video/chapters然后在應(yīng)用初始化時(shí)調(diào)用enable()開啟該功能必須在調(diào)用其他章節(jié)方法之前執(zhí)行import { enable } from react-native-video/chapters; enable();setChapters設(shè)置章節(jié)列表setChapters(chapters, options?)用于為播放器設(shè)置章節(jié)。chapters是如下結(jié)構(gòu)的對(duì)象數(shù)組{ title: string; // 章節(jié)標(biāo)題 timeMs: number; // 章節(jié)時(shí)間點(diǎn)毫秒 }[]可選的options配置對(duì)象支持markersColor?: string—— 章節(jié)標(biāo)記的顏色默認(rèn)取平臺(tái)默認(rèn)色showTooltip?: boolean—— 懸停在標(biāo)記上時(shí)是否顯示提示氣泡默認(rèn)trueshowTimer?: boolean—— 是否在標(biāo)記上顯示時(shí)間默認(rèn)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()移除播放器上的所有章節(jié)import { clearChapters } from react-native-video/chapters; clearChapters();goToChapter(title)按標(biāo)題程序化跳轉(zhuǎn)到指定章節(jié)import { goToChapter } from react-native-video/chapters; goToChapter(Main Content);平臺(tái)差異iOS自定義 seekbar帶可視標(biāo)記與提示氣泡Androidseekbar 上的可視標(biāo)記支持提示氣泡。源碼層面VideoView 是如何驅(qū)動(dòng)原生渲染的理解 Props 與方法的背后是本倉(cāng)庫(kù)基于 Nitro 的混合對(duì)象Hybrid Object架構(gòu)。原生視圖的綁定VideoView渲染時(shí)實(shí)際掛載的是NativeVideoViewNativeVideoView.tsx它通過UIManager.hasViewManagerConfig(VideoView)檢測(cè)原生視圖是否已正確鏈接若未鏈接會(huì)拋出包含「pod install / rebuild / Expo Go」排查提示的LINKING_ERROR。視圖管理器的創(chuàng)建組件首次掛載后原生側(cè)會(huì)通過onNitroIdChange事件把原生生成的nitroId回傳隨后由VideoViewViewManagerFactory.createViewManager(id)創(chuàng)建對(duì)應(yīng)的原生視圖管理器VideoView.tsx。源碼中特別處理了「視圖在原生管理器找到它之前就被卸載」的競(jìng)態(tài)場(chǎng)景此時(shí)只打印警告而非拋錯(cuò)。Props 的同步每次 props 變化都會(huì)調(diào)用updateProps把player、controls、pictureInPicture、autoEnterPictureInPicture、resizeMode、keepScreenAwake、surfaceType同步到原生管理器VideoView.tsx。注意其中player是通過(props.player as VideoPlayer).__getNativePlayer()取出的原生播放器句柄這正是「同一個(gè)播放器可被多個(gè)視圖共用」的實(shí)現(xiàn)基礎(chǔ)。iOS / Android 的實(shí)現(xiàn)載體iOS 側(cè)對(duì)應(yīng)HybridVideoViewViewManager.swift等文件見 ios/hybrids/VideoViewViewManagerAndroid 側(cè)由 Kotlin 實(shí)現(xiàn)并在 fabric 原生組件 中提供渲染載體兩者都遵循 VideoViewViewManager.nitro.ts 定義的接口契約。Web 端實(shí)現(xiàn)差異Web 平臺(tái)的VideoView走的是另一套實(shí)現(xiàn)VideoView.web.tsx基于videojs/react的 Player 與 VideoSkinresizeMode被映射為 CSSobject-fitcontain → contain、cover → cover、stretch → fill、none → containVideoView.web.tsx全屏通過containerRef.current?.requestFullscreen?.()/document.exitFullscreen?.()實(shí)現(xiàn)畫中畫通過video.requestPictureInPicture?.()/document.exitPictureInPicture?.()實(shí)現(xiàn)canEnterPictureInPicture返回document.pictureInPictureEnabledcontrols{true}時(shí)使用VideoSkin包裹畫面以呈現(xiàn)控制 UI。因此同樣的 Props 與命令式方法在 Web 上也能獲得一致的使用體驗(yàn)。實(shí)戰(zhàn)建議與相關(guān)文檔播放器生命周期推薦始終用useVideoPlayer創(chuàng)建播放器它會(huì)在組件卸載時(shí)自動(dòng)釋放原生資源詳見 use-video-player.md避免在VideoView卸載后仍持有已釋放的播放器。全屏與 PiP 的組合若需要「進(jìn)入后臺(tái)自動(dòng)畫中畫」可同時(shí)開啟autoEnterPictureInPicture并結(jié)合onPictureInPictureChange更新 UI在調(diào)用enterPictureInPicture()前建議先用canEnterPictureInPicture()探測(cè)設(shè)備支持度。性能取舍Android 默認(rèn)的surface渲染路徑性能最優(yōu)僅當(dāng)確實(shí)需要圓角、動(dòng)畫或疊層 UI 時(shí)才切換到texture。聯(lián)動(dòng)查閱播放行為與事件在 player/events.md 中有完整對(duì)照想了解 v6 舊版組件與 v7 的差異可參考 updating.md。贊分享音視頻移動(dòng)開發(fā)【免費(fèi)下載鏈接】react-native-videoA component for react-native項(xiàng)目地址https://gitcode.com/gh_mirrors/re/react-native-video點(diǎn)擊查看免費(fèi)下載相關(guān)推薦react-native-video 的 VideoView 組件 Props 全解析播放器綁定、原生控件、畫中畫與畫面適配react native video 的 VideoView 組件 Props 全解析播放器綁定、原生控件、畫中畫與畫面適配 導(dǎo)讀 VideoView 是 r音視頻移動(dòng)開發(fā)Hydra核心架構(gòu)解析如何實(shí)現(xiàn)實(shí)時(shí)3D場(chǎng)景圖構(gòu)建與優(yōu)化Hydra核心架構(gòu)解析如何實(shí)現(xiàn)實(shí)時(shí)3D場(chǎng)景圖構(gòu)建與優(yōu)化 Hydra 是一個(gè)革命性的實(shí)時(shí)3D場(chǎng)景圖構(gòu)建系統(tǒng)由麻省理工學(xué)院SPARK實(shí)驗(yàn)室開發(fā)。這個(gè)強(qiáng)大的機(jī)器人計(jì)算機(jī)視覺深度學(xué)習(xí)Windows 11終極清理指南使用Win11Debloat實(shí)現(xiàn)系統(tǒng)性能優(yōu)化與隱私保護(hù)Windows 11終極清理指南使用Win11Debloat實(shí)現(xiàn)系統(tǒng)性能優(yōu)化與隱私保護(hù) Windows 11雖然帶來了現(xiàn)代化的界面和功能但同時(shí)也帶來了預(yù)裝應(yīng)桌面應(yīng)用CLI上一篇終極指南ChunJun三大高級(jí)功能詳解——DDL同步、斷點(diǎn)續(xù)傳與臟數(shù)據(jù)處理下一篇5分鐘快速上手輕量級(jí)Java工作流引擎Snaker完全指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考