必须同时安装 react-native-video 作为底层依赖;iOS 安装后需进入 ios 目录执行 pod install;README 未说明具体版本兼容范围,建议对照官方文档确认
react-native-video-player
TheWidlarzGroupMIT长期未更新给 React Native 应用用的视频播放器组件,自带可自定义的播放控件,省去自己搭控制栏的麻烦。
A <VideoPlayer /> component for React Native with custom controls
yarn add react-native-video-player react-native-video
cd ios && pod installREADME 未说明
React Native 视频播放器组件,内置自定义控制条,底层基于 react-native-video
给 React Native 应用用的视频播放器组件,自带可自定义的播放控件,省去自己搭控制栏的麻烦。
核心能力
- 提供 VideoPlayer 组件并暴露 ref 控制播放
- 支持 thumbnail 缩略图与 endWithThumbnail 结束回显
- 内置少量播放控制条,可显示时长
- 通过 onError 回调上报播放错误
- 底层复用 react-native-video 解码能力
容易踩的坑
- v0.16.3最新正式版2025-05-05 · 2025-05-05 18:43 UTC
What's Changed
- fix: onPlaybackStateChanged now takes an optional callback (now the same as all other event handlers) by @rob-ryszewski in https://github.com/TheWidlarzGroup/react-native-video-player/pull/227
- docs: replace redme with docs by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/228
- Update README.md by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/229
- feat: thumbnail image custom styles by @jarod-legault in https://github.com/TheWidlarzGroup/react-native-video-player/pull/232
- chore: release 0.16.3 by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/233
New Contributors
- @rob-ryszewski made their first contribution in https://github.com/TheWidlarzGroup/react-native-video-player/pull/227
- @jarod-legault made their first contribution in https://github.com/TheWidlarzGroup/react-native-video-player/pull/232
Full Changelog: https://github.com/TheWidlarzGroup/react-native-video-player/compare/v0.16.2...v0.16.3
- v0.16.22025-02-12 · 2025-02-12 14:28 UTC
查看更新说明
What's Changed
- refactor: update names by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/222
- Create FUNDING.yml by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/223
- chore: release 0.16.2 by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/224
Full Changelog: https://github.com/TheWidlarzGroup/react-native-video-player/compare/v0.16.1...v0.16.2
- v0.16.12025-02-12 · 2025-02-12 13:46 UTC
查看更新说明
What's Changed
- fix: autoplay & custom-styles & infinite-progress by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/220
- chore: release 0.16.1 by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/221
Full Changelog: https://github.com/TheWidlarzGroup/react-native-video-player/compare/v0.16.0...v0.16.1
- v0.16.02025-01-22 · 2025-01-22 11:52 UTC
查看更新说明
What's Changed
- docs: update demo video by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/207
- chore: fix bot comments by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/213
- perf: optimize rerenders by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/212
- chore: release 0.16.0 by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/217
Full Changelog: https://github.com/TheWidlarzGroup/react-native-video-player/compare/v0.15.0...v0.16.0
- v0.15.02024-12-10 · 2024-12-10 20:14 UTC
查看更新说明
What's Changed
- fix RCTVIEW [{flexGrow:<>}] is not usable as a native method argument #126 issue by @ayuleul in https://github.com/TheWidlarzGroup/react-native-video-player/pull/168
- Fix resume when autoPlay is false by @martinfrouin in https://github.com/TheWidlarzGroup/react-native-video-player/pull/174
- Update README.md by @Okelm in https://github.com/TheWidlarzGroup/react-native-video-player/pull/185
- Update README.md by @Okelm in https://github.com/TheWidlarzGroup/react-native-video-player/pull/188
- Release beta V0.15 🎉 by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/196
- docs: fix demo video by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/197
- chore: issue workflow - stale bot & templates by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/198
- feat: add docs by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/199
- docs: update
introsection by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/201 - docs(readme): add guide for running documentation locally by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/200
- fix(ci): deploy-docs by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/202
- docs: put docs link in readme by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/203
- feat: add slide animation by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/204
- ci(docs): check docs build on pr by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/205
- chore: release 0.15.0 by @moskalakamil in https://github.com/TheWidlarzGroup/react-native-video-player/pull/206
New Contributors
- @martinfrouin made their first contribution in https://github.com/TheWidlarzGroup/react-native-video-player/pull/174
- @Okelm made their first contribution in https://github.com/TheWidlarzGroup/react-native-video-player/pull/185
Full Changelog: https://github.com/TheWidlarzGroup/react-native-video-player/compare/v0.14.0...v0.15.0
用户点评
登录用户的真实使用记录,可按版本和硬件筛选还没有人点评。第一个说出真实体验的人最有价值。
react-native-video-player
🎥 <VideoPlayer /> component for React Native with a few controls. This player uses react-native-video under the hood
Documentation
documentation is available at docs.thewidlarzgroup.com/react-native-video-player/
Installation
yarn add react-native-video-player react-native-video
or
npm install --save react-native-video-player react-native-video
Then, install pods
cd ios
pod install
Example
import VideoPlayer, { type VideoPlayerRef } from 'react-native-video-player';
const playerRef = useRef<VideoPlayerRef>(null);
<VideoPlayer
ref={playerRef}
endWithThumbnail
thumbnail={{
uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
}}
source={{
uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
}}
onError={(e) => console.log(e)}
showDuration={true}
/>
Future features
Check out our Roadmap for what's coming up next! We're always working on new features and improvements, so stay tuned!
Community support
We have a discord server where you can ask questions and get help. Join the discord server