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.运行命令进行安装

?

1	npm install react - native - video --save

1.2.iOS版本

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

?

1 2 3 4 5 6 7 8

#import <AVFoundation/AVFoundation.h>  // import   - ( BOOL ) application : ( UIApplication * ) application didFinishLaunchingWithOptions : ( NSDictionary * ) launchOptions {    ...    [[AVAudioSession sharedInstance] setCategory : AVAudioSessionCategoryAmbient error : nil];  / / allow    ... }

1.3.Android版本

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

1.4.android/settings.gradle文件

?

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

1.5.android/app/build.gradle文件

?

1 2 3 4

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

1.6.MainActivity.java文件修改

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

?

1	import com.brentvatne.react.ReactVideoPackage;

然后在方法中添加:

?

1	.addPackage( new ReactVideoPackage())

使用实例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// 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.. var styles = StyleSheet.create({    backgroundVideo: {      position: 'absolute' ,      top: 0,      left: 0,      bottom: 0,      right: 0,    }, });

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

运行效果: