React native 第三方组件 React native video

最新推荐文章于 2024-11-06 22:29:35 发布

H_MZ

最新推荐文章于 2024-11-06 22:29:35 发布

阅读量156

点赞数

文章标签：移动开发 java javascript ViewUI

原文链接：https://juejin.im/post/5a323dd0f265da431a433703

版权

简介

这个组件封装了React-Native平台的播放器组件Video

使用方法:

1.安装:

执行命令:

npm i -S react-native-video
复制代码

重新编译项目,执行命令:

react-native link
复制代码

2.导入原生模块

iOS 11平台首先找到AppDelegate.m文件,
首先导入包，在此文件顶部添加如下代码:

#import <AVFoundation/AVFoundation.h>

然后,修改代码:

    ...
    [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];  // allow
    ...
}
复制代码

Android 平台相对复杂:

首先，找到 android/settings.gradle 这个文件，在其中加入以下代码：

 include ':react-native-video'
 project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
复制代码

找到 android/app/build.gradle 这个文件，在 * dependencies *大括号的方法中添加如下代码：
```
compile project(':react-native-video')
复制代码
```

就像这样：

``` 
dependencies {
       compile project(':react-native-video')
    }
```
复制代码

如果你的 react-native版本<0.29，那么找到MainActivity.java 这个文件，在最顶部添加：import com.brentvatne.react.ReactVideoPackage; 并且在下面的代码中添加：new ReactVideoPackage()

如果你的 react-native版本>=0.29，那么就找到MainApplication.java这个文件，在顶部添加：
```
import com.brentvatne.react.ReactVideoPackage;
复制代码
```
并且在下面的代码中添加：new ReactVideoPackage()

就像这样：
```
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ReactVideoPackage()
      );
    }
复制代码
```

3. 使用例子:

<Video source={{uri: "background"}} // 视频的URL地址，或者本地地址，都可以. 
       rate={1.0}                   // 控制暂停/播放，0 代表暂停paused, 1代表播放normal. 
       volume={1.0}                 // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数 
       muted={false}                // true代表静音，默认为false. 
       paused={false}               // true代表暂停，默认为false 
       resizeMode="cover"           // 视频的自适应伸缩铺放行为，
       repeat={true}                // 是否重复播放 
       playInBackground={false}     // 当app转到后台运行的时候，播放是否暂停
       playWhenInactive={false}     // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
       onLoadStart={this.loadStart} // 当视频开始加载时的回调函数
       onLoad={this.setDuration}    // 当视频加载完毕时的回调函数
       onProgress={this.setTime}    //  进度控制，每250ms调用一次，以获取视频播放的进度
       onEnd={this.onEnd}           // 当视频播放完毕后的回调函数
       onError={this.videoError}    // 当视频不能加载，或出错后的回调函数
       style={styles.backgroundVideo} />
// 样式
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});
复制代码