rn 视频播放组件react-native-video

1、安装
	yarn add react-native-video

2、导入
	import Video from 'react-native-video';

3、使用
	<Video 
          ref='video'
          source={{uri:'https://video.699pic.com/videos/73/92/43/b_mPEcRsUxTkE91597739243.mp4'}} //url或本地文件
          volume={5} //放大声音倍数
          paused={false}  //是否暂停
          rate={this.state.rate}  //0/1,0暂停,1正常
          muted={false}  //静音
          resizeMode='contain' //视频适应方式
          repeat={true} //是否重复播放
          controls={true} //显示控制按钮
          
          onLoadStart={this.onLoadStart}
          onLoad={this.onLoad}
          	参数:currentPosition 	当前播放时间
				duration	视频总时间
          onProgress={this.onProgress}  //视频播放每隔250毫秒触发,并携带当前已播放时间
          	参数:currentTime  当前播放时间
			    playableDuration 	视频总时间
          onEnd={this.onEnd}
          onError={this.onError}
          style={styles.video}
     />
     
     4、方法
     ref对象.seek(n秒); 跳转到视频多少秒

代码示例:
自定义进度条、播放结束暂停、点击视频暂停/播放:

import React,{Component} from 'react'
import {
  View,
  Text,
  StyleSheet,
  ActivityIndicator,
  Dimensions,
  TouchableOpacity
} from 'react-native'
import Video from 'react-native-video';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';

class Detail extends Component{
    state={
        rate:1,
        videoReady:false,
        videoTotal:0,
        currentTime:0,
        videoProgress:0,
        replay:false,
        paused:false
    }
    componentDidMount()
    {

    }
    onLoad=()=>{
        this.setState({
            videoReady:true,
        })
    }

    //视频开始隐藏重新播放按钮
    onLoadStart=()=>{


    }
    
    //自定义进度条
    onProgress=(data)=>{
        let duration=data.playableDuration;
        let currentTime=data.currentTime;
        let percent=0;

        //初始加载时duration=0
        if(duration!=0)
        {
            percent=Number((currentTime/duration).toFixed(2));
        }else{
            percent=0
        }
        
        this.setState({
            videoTotal:duration,
            currentTime:currentTime,
            videoProgress:percent,
            replay:false
        })
    }
    //视频结束显示重新播放按钮
    onEnd=()=>{
        this.setState({
            videoProgress:1,
            paused:true   //结束时必须设置暂停,使用seek方法才有效
        })
    }
    onError=(err)=>{
        console.log(err);

    }

    //点击按钮重新播放
    _replay=()=>{
        if(this.state.videoProgress==1)
        {
            this.video.seek(0);
        }
        
        this.setState({
            paused:false
        })

    }

    render()
    {
        return(

            <View>
                <Text>详情</Text>
                <TouchableWithoutFeedback
                    //点击视频暂停/播放 
                    onPress={()=>{
                        console.log(this.state.replay);
                        this.setState({
                            paused:!this.state.paused,
                        })
                    }}
                >
                    <Video 
                        ref={(video)=>{this.video=video}}
                        source={{uri:'https://video.699pic.com/videos/73/92/43/b_mPEcRsUxTkE91597739243.mp4'}} //url或本地文件,{require('xx.mp4')}
                        volume={5} //放大声音倍数
                        paused={this.state.paused}  //是否暂停
                        rate={this.state.rate}  //播放速度,0暂停,1正常
                        muted={false}  //静音
                        resizeMode='contain' //视频适应方式
                        repeat={false} //是否重复播放
                        // controls={true}  //显示视频控键
                        onLoadStart={this.onLoadStart}
                        onLoad={this.onLoad}
                        onProgress={this.onProgress}  //视频播放每隔250毫秒触发,并携带当前已播放时间
                        onEnd={this.onEnd}
                        onError={this.onError}
                        style={styles.video}
                        
                        
                    />
                </TouchableWithoutFeedback>
                {/* 进度条 */}
                <View style={styles.progressBox}>
                    <View style={[styles.progress,{width:Dimensions.get('window').width*this.state.videoProgress}]}></View>
                </View>
                {/* 若不设置重复播放,视频结束显示重新播放按钮 */}
                {
                    this.state.paused? 
                                <TouchableOpacity style={styles.wrap}
                                    onPress={this._replay}
                                >
                                    <View style={styles.play}>
                                            <Text style={{color:'#ccc',fontSize:30,lineHeight:50,marginLeft:5,marginBottom:5}} >▶</Text>
                                    </View>
                                </TouchableOpacity>
                                :<View></View>
                }
                
                {/* 加载圆圈 */}
                {
                    this.state.videoReady? <View></View>: <View
                                    style={styles.load}
                                 >
                                <ActivityIndicator 
                                    size={70}
                                    color='#ccc'
                                    animating={!this.state.videoReady}
                                />
                            </View>
                }
            </View>
        )
    }
}

const styles = StyleSheet.create({
    video:{
        width:'100%',
        height:300,
        backgroundColor:'black',
        justifyContent:'center',
        alignItems:'center',
        position:'relative'
    },
    load:{
        position:'absolute',
        left:'50%',
        top:'50%',
        marginLeft:-40,
        marginTop:-30
    },
    progressBox:{
        width:'100%',
        height:3,
        backgroundColor:'#ccc'
    },
    progress:{
        width:1,
        height:2,
        backgroundColor:'green'
    },
    wrap:{
        position:'absolute',
        bottom:'40%',
        right:'45%',
    },
    play:{
        height:50,
        width:50,
        resizeMode:'contain',
        borderWidth:1,
        borderColor:'#ccc',
        borderRadius:50,
        justifyContent:'center',
        alignItems:'center'
    }

})

export default Detail

效果图