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

淡淡的烟草味﹌ 2021-07-24 18:47 574阅读 0赞

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

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/e5df93ff357749b091459b1174e4d262.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/abb469b03b444b87ba45f39cadec76bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210724/cc2587541e284a78a970d77bb510f0ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210724/b4d20ed9b3ee40118bb84a75ec8b93c5.png