├── .gitignore ├── README.md ├── RNIndicator.podspec ├── android ├── build.gradle └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── com │ └── ngxu │ └── videoplayer │ ├── AppBrightness.java │ ├── HeidBottomBtn.java │ ├── HideBottomNa.java │ ├── RNVideoplayerModule.java │ ├── RNVideoplayerPackage.java │ └── SetAppBrightness.java ├── component └── svg.js ├── index.js ├── ios ├── RNIndicator.h ├── RNIndicator.m └── RNIndicator.xcodeproj │ └── project.pbxproj ├── package.json ├── utils ├── formatSeconds.js └── getMaxdata.js └── view └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | example -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 已废弃不会更新，不推荐使用（由于没有mac设备等问题） 2 | 3 | # 已废弃不会更新，不推荐使用（由于没有mac设备等问题） 4 | 5 | # 已废弃不会更新，不推荐使用（由于没有mac设备等问题） 6 | 7 | # 已废弃不会更新，不推荐使用（由于没有mac设备等问题） 8 | 9 | 10 | 11 | # react-native-rn-videoplayer 12 | 13 | 14 | 15 | 16 | - 视频上下滑动调节音量、屏幕亮度、长按左右两边快进退、左右滑动以及拖动进度条调节视频进度，视频控件锁定，全屏切换，缓冲进度，双击视频暂停，等功能，基于react-native-video 17 | - ps：Android改变亮度无需获取高级权限，只改变当前active也就是当前页面的亮度，改变亮度后，返回进入到其他页面会恢复到原来的亮度。 18 | 19 | - 如果你的视频全屏后尺寸没发生改变，参考[全屏尺寸问题18](https://github.com/A-ANing/react-native-rn-videoplayer/issues/18) 20 | 21 | - Version 2.x requires react-native >= 0.60.0 22 | - Version 1.3.2 requires react-native <= 0.59.9 23 | 24 | 25 |

博客文档地址        免VPN视频预览

26 | 27 | 28 | ## gif预览 [ios](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-imgbed/43621fcd-e016-4f94-967e-47000082529c.gif) 和 [android](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-imgbed/683885c8-fcfd-4434-88b3-f52e90ccfc7f.gif) 不是最新版 29 | 30 |      31 | 32 | 33 | # 增加功能 34 | 35 | - v2.2.10 支持左右两边长按快进退，返回按钮右边显示视频名字、自定义缓冲提示图标和文字、暂停文字、快进退的文字！ 36 | 37 |      38 | 39 | 40 | 41 | - v2.2.9 showSmallCont={false}小屏是否显示返回按钮，默认为true; 自定义进度条颜色(见api) 42 | 43 | - v2.2.8 当ios设备为iPhone X以上,全屏时隐藏底部小横条 44 | 45 | - v2.2.5 autoPlay={false}是否自动播放，默认为true 46 | 47 | - v2.2.1 增加手势左右滑动视频区域(非进度条上的点)来调整视频进度 48 | 49 | - v2.0.8 自定义小屏状态栏 类型fun 50 | 默认状态栏为沉浸式，黑底白字，有状态栏高度，可查看view/index.js 的Header组件 51 | ``` 52 | null}//不使用默认状态栏 跟当前app保持一致 54 | statusBar={()=>}//自定义 55 | /> 56 | ``` 57 | 58 | - v2.0.6 增加锁定视频控件，锁定用户操作（调节音量/亮度，展示隐藏控件） 59 | 60 | ` 61 | lockControl (true/false 默认关闭) 62 | ` 63 | 64 |      65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | ## Getting started 81 | 1. 82 | ```shell 83 | npm install react-native-rn-videoplayer --save 84 | ``` 85 | 86 | 2. 87 | ## - - android 88 | 89 | Open up `android/app/src/main/java/[...]/MainActivity.java` 90 | 91 | ```diff 92 | +import android.content.Intent; 93 | +import android.content.res.Configuration; 94 | public class MainActivity extends ReactActivity { 95 | 96 | ... 97 | 98 | + @Override 99 | + public void onConfigurationChanged(Configuration newConfig) { 100 | + super.onConfigurationChanged(newConfig); 101 | + Intent intent = new Intent("onConfigurationChanged"); 102 | + intent.putExtra("newConfig", newConfig); 103 | + this.sendBroadcast(intent); 104 | + } 105 | ... 106 | } 107 | ``` 108 | 109 | ## - - iOS 110 | 111 | Add the following to your project's `AppDelegate.m`: 112 | 113 | ```diff 114 | +#import "Orientation.h" 115 | +#import 116 | 117 | @implementation AppDelegate 118 | 119 | // ... 120 | 121 | +- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window { 122 | + return [Orientation getOrientation]; 123 | +} 124 | 125 | //找到这行 126 | UIViewController *rootViewController = [UIViewController new]; 127 | 128 | //改为 129 | UIViewController *rootViewController = [HomeIndicatorView new]; 130 | 131 | 132 | @end 133 | ``` 134 | 135 | ## RN >= 0.60 136 | 137 | ### ios 138 | ``` 139 | cd ios 140 | 141 | pod install 142 | ``` 143 | 144 | ### Android. 145 | #### Most of them are automatically linked. If you can’t find XX, you should link manually 146 | - settings.gradle 147 | ```diff 148 | rootProject.name = 'TestPack622' 149 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 150 | 151 | + include ':react-native-linear-gradient' 152 | + project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android') 153 | + include ':react-native-svg' 154 | + project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android') 155 | + include ':react-native-orientation-locker' 156 | + project(':react-native-orientation-locker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation-locker/android') 157 | + include ':react-native-video' 158 | + project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer') 159 | + include ':react-native-system-setting' 160 | + project(':react-native-system-setting').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-system-setting/android') 161 | 162 | include ':app' 163 | ``` 164 | 165 | - MainApplication.java 166 | 167 | ```diff 168 | 169 | + import com.horcrux.svg.SvgPackage; 170 | + import com.BV.LinearGradient.LinearGradientPackage; // <--- This! 171 | + import org.wonday.orientation.OrientationPackage; 172 | + import com.ninty.system.setting.SystemSettingPackage; 173 | + import com.brentvatne.react.ReactVideoPackage; 174 | 175 | 176 | ··· 177 | @Override 178 | protected List getPackages() { 179 | @SuppressWarnings("UnnecessaryLocalVariable") 180 | List packages = new PackageList(this).getPackages(); 181 | // Packages that cannot be autolinked yet can be added manually here, for example: 182 | + packages.add(new LinearGradientPackage()); 183 | + packages.add(new SvgPackage()); 184 | + packages.add(new OrientationPackage()); 185 | + packages.add(new SystemSettingPackage()); 186 | + packages.add(new ReactVideoPackage()); 187 | return packages; 188 | } 189 | ··· 190 | 191 | ``` 192 | 193 | - app/build.gradle 194 | 195 | ```diff 196 | dependencies { 197 | + implementation project(':react-native-svg') 198 | + implementation project(':react-native-linear-gradient') 199 | + implementation project(':react-native-orientation-locker') 200 | + implementation project(':react-native-system-setting') 201 | + implementation project(':react-native-video') 202 | } 203 | 204 | ``` 205 | 206 | 207 | ## RN <= 0.59 208 | 209 | 210 | ```shell 211 | react-native link react-native-linear-gradient 212 | react-native link react-native-orientation-locker 213 | react-native link react-native-svg 214 | react-native link react-native-system-setting 215 | react-native link react-native-video 216 | ``` 217 | 218 | #### Android 219 | 220 | 221 | 222 | 1. Append the following lines to `android/settings.gradle`: 223 | ``` javascript 224 | include ':react-native-rn-videoplayer' 225 | project(':react-native-rn-videoplayer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-rn-videoplayer/android') 226 | ``` 227 | 2. Insert the following lines inside the dependencies block in `android/app/build.gradle`: 228 | ``` 229 | compile project(':react-native-rn-videoplayer') 230 | ``` 231 | 232 | 3. Open up `android/app/src/main/java/[...]/MainApplication.java` 233 | 234 | - Add 235 | ```java 236 | import com.ngxu.videoplayer.RNVideoplayerPackage; 237 | 238 | new RNVideoplayerPackage() //to the list returned by the `getPackages()` method 239 | ``` 240 | 241 | 242 | 243 | 244 | ## Usage 245 | ```javascript 246 | import VideoPlayer from 'react-native-rn-videoplayer'; 247 | 248 | this.player=ref} 253 | lockControl={true}//控件锁定功能 v2.0.6增加 254 | moreSetting={() => null}//右上角更多按钮 输出null则不显示 255 | onSmallBack={()=>{this.props.navigation.goBack()}} 256 | /> 257 | 258 | ``` 259 | # api 260 | - url 视频地址 261 | - showSmallCont={bool} 小屏是否隐藏返回按钮 默认false; 262 | - changeWindows() 切换全屏或者小屏 263 | 264 | changeWindows(boolean) true 全屏， false 小屏 265 | 266 | Example: 267 | ```javascript 268 | this.player=ref}/> 269 | this.player.changeWindows(true); // 全屏 270 | ``` 271 | 272 | - storeComponent 右上角收藏按钮的图标 273 | ```javascript 274 | storeComponent={()=>} 275 | ``` 276 | - moreSetting 右上角更多按钮的图标 277 | ```javascript 278 | moreSetting={()=>} 279 | ``` 280 | 281 | - speedColor 当前播放进度条颜色 "#e54602" 282 | 283 | - dotColor 进度条上的圆点颜色 "#e54602" 284 | 285 | - dotBorderColor 进度条上的圆点被按下时的边框颜色 "rgba(255,255,255,0.3)" 286 | 287 | - bottomSpeedColor 最底部播放进度的颜色 "#e54602" 288 | 289 | - cachColor 缓冲进度条颜色 "#ffffff" 290 | 291 | - allSpeedColor 整个进度条颜色 "rgba(0,0,0,0.4) 292 | 293 | - backVideoName 返回按钮旁的文字 string 294 | 295 | - pausedTipText 已暂停的文字 string 296 | 297 | - loadingText 正在缓冲的文字 string 298 | 299 | - loadingIcon 加载的图标 loadingIcon={<>} 300 | 301 | - solText 快退中的文字 string 302 | 303 | - fastText 快进中的文字 string 304 | 305 | 306 | - setPaused 播放暂停 307 | ```javascript 308 | this.player.setPaused(true)//true暂停；false播放； 309 | 310 | this.player=ref} 312 | > 313 | 314 | ``` 315 | - reLoad 重新加载 316 | ```javascript 317 | this.player.reLoad() 318 | 319 | this.player=ref} 321 | > 322 | 323 | ``` 324 | 325 | - rePlay 重置进度为0 326 | ```javascript 327 | 328 | this.player.reLoad(false) 329 | //false 不自动播放 330 | //默认为true 自动播放 331 | ``` 332 | 333 | - onSmallBack 当视频是小窗口时 点击返回按钮的回调 可以在此添加返回上个页面的功能 func 334 | - onStore 点击右上角收藏按钮的回调 func 335 | - onMoreFun 点击右上角更多按钮的回调 func 336 | - onWindowChange 窗口改变的回调 func 337 | ```javascript 338 | 339 | {}}//e:"full"全屏 "small"小屏 341 | > 342 | 343 | ``` 344 | 345 | - continuous 是否开启全屏时的选集功能 适合连续剧 默认 false 346 | ```js 347 | continuous={true} 348 | ``` 349 | 350 | - renderAllSeenList 点击选集后显示的集数列表 351 | ```js 352 | ··· 353 | this.player=ref} 356 | renderAllSeenList={this.renderAllSeenList} 357 | /> 358 | 359 | ··· 360 | renderAllSeenList = () => ( 361 | 362 | 363 |