一.

專案介紹

該元件進行封裝成React Native平臺播放器Video元件,大家可以使用該元件進行播放視訊啦~不過支援React Native的版本最低0.19版本。

二.

1.1. 執行命令進行安裝

npm install react-native-video --save

1.2.iOS版本

以上的命令執行完成安裝元件之後，如果你需要其他的應用也可以在你的Video元件上面播放音樂，視訊等。你可以在AppDelegate.m檔案作如下處理:

#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檔案

include ':RCTVideo', ':app'
project(':RCTVideo').projectDir = new File(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(new ReactVideoPackage())

三. 例項

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    TextInput,
    ListView,
    TouchableOpacity,
    Image,
    ScrollView,
    Text,
    Alert,
    View
} from 'react-native'
 
;
import  Video from 'react-native-video'



export default class extends Component  {


        render(){

            return(
                 //方法一:


                 <Video source={{uri: "http://14.29.86.13/vlive.qqvideo.tc.qq.com/n00151ljmvl.p202.5.mp4?sdtfrom=v1010&amp;guid=68f3b8fc1fcc716ee248eba5de706f32&amp;vkey=AB781962EAB8A3E80E7F48B5D1864BCFE4C577B072E96C21A88E032765C2DDCC5F3399F4C846EF005E5017347C5F05369F49C83C1FC833077BCCF336962264F25805A09F04693E6028296F3D6F5CCBFA6FF7AD78C6040BE86A5CCB26F9F20DAA37B3DFBFB84768B4E07BD4E9EB30F10483ECAAB57ABFF271#t=198"}} // Can be a URL or a local file.
                   rate={1.0}                   // 控制暫停/播放，0 代表暫停
                   volume={1.0}                 // 聲音的放大倍數，0 代表沒有聲音，就是靜音muted, 1 代表正常音量 normal，更大的數字表示放大的倍數
                   muted={false}                //true代表靜音，預設為false.
                   paused={false}               // Pauses playback entirely.
                   resizeMode="cover"           // 視訊的自適應伸縮鋪放行為，
                   repeat={true}                // 是否重複播放
                   onLoadStart={this.loadStart} // 當視訊開始載入時的回撥函式
                   onLoad={this.setDuration}    // 當視訊載入完畢時的回撥函式
                   onProgress={this.setTime}    // 進度控制，每250ms呼叫一次，以獲取視訊播放的進度
                   onEnd={this.onEnd}           // 當視訊播放完畢後的回撥函式
                   onError={this.videoError}    // 當視訊不能載入，或出錯後的回撥函式
                   style={styles.backgroundVideo}
                 />



            );

        }

}

const styles = StyleSheet.create({
    backgroundVideo: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
});