React Native开源播放器Video组件(react-native-video)

本文来自:江清清的技术专栏-翻译组(http://www.lcode.org)

开源项目地址:https://github.com/brentvatne/react-native-login

项目介绍

该组件进行封装成React Native平台播放器Video组件,大家可以使用该组件进行播放视频啦~不过支持React Native的版本最低0.19版本。

刚创建的React Native交流5群:386216878,欢迎各位大牛,React Native技术爱好者加入交流!

配置安装

1.1.运行命令进行安装

npm install react-native-video--save

1.2.iOS版本

以上的命令运行完成安装组件之后，如果你需要其他的应用也可以在你的Video组件上面播放音乐，视频等。你可以在AppDelegate.m文件作如下处理:

#import <AVFoundation/AVFoundation.h>  // import

-(BOOL)application:(UIApplication*)applicationdidFinishLaunchingWithOptions:(NSDictionary*)launchOptions
{
  ...
  [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbienterror:nil]; //allow
  ...
}

1.3.Android版本

首先复制你的Video文件到android项目的 android/app/src/main/res/raw/的文件夹中，然后做如下相关处理:

1.4.android/settings.gradle文件

include':RCTVideo',':app'
project(':RCTVideo').projectDir = newFile(rootProject.projectDir, '../node_modules/react-native-video/android')

1.5.android/app/build.gradle文件

dependencies {
   ...
   compile project(':RCTVideo')
}

1.6.MainActivity.java文件修改

首先在文件的头部，导入相关包:

import com.brentvatne.react.ReactVideoPackage;

然后在方法中添加:

.addPackage(newReactVideoPackage())

使用实例

// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.
<Video source={{uri: "background"}}// Can be a URL or a local file.
       rate={1.0}                  // 0 is paused, 1 is normal.
       volume={1.0}                // 0 is muted, 1 is normal.
       muted={false}               // Mutes the audio entirely.
       paused={false}              // Pauses playback entirely.
       resizeMode="cover"          // Fill the whole screen at aspect ratio.
       repeat={true}               // Repeat forever.
       onLoadStart={this.loadStart}// Callback when video starts to load
       onLoad={this.setDuration}   // Callback when video loads
       onProgress={this.setTime}   // Callback every ~250ms with currentTime
       onEnd={this.onEnd}          // Callback when playback finishes
       onError={this.videoError}   // Callback when video cannot be loaded
       style={styles.backgroundVideo} />

// Later on in your styles..
varstyles = StyleSheet.create({
  backgroundVideo: {
    position:'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

关于更多例子,大家可以去https://github.com/brentvatne/react-native-login  下载实例使用

运行效果: