宝宝秀项目学习（三）

宝宝秀项目学习（三）

一个第三方的视频播放组件：

react-native-video：此组件的需要对原生的android和iOS进行一些操作才可以使用。具体参照GitHub：

export default class Detail extends Component {constructor(props){super(props);this.state = {   rowData:wData,  //从上以页面传递过来的数据
            videoLoaded:false,  //标记是否加载完
            goProgress:false,     //标记是否在播放状态（即是否还在progress过程），暂停也是在progress状态
            isVideoOk:true,    //标记视频是否正常

            //下面的状态都是组件Video自带的，必须有
            rate: 1,volume: 1,              // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数
            muted: false,          // true代表静音，默认为false.
            resizeMode: 'contain',// 视频的自适应伸缩铺放行为
            paused: false,         // true代表暂停，默认为false

            duration: 0.0,        //视频的总时间长度
            currentTime: 0.0,     //当前播放的进度
        }}//开始加载的回调函数
    _onLoadStart = () => {console.log('_onLoadStart')}//加载完毕后的回调函数
    _onLoad = (data) => {console.log('_onload 视频总长度'+data.duration)this.setState({ duration: data.duration });};//正在播放时候的回调函数
    _onProgress = (data) => {if(!this.state.videoLoaded) {this.setState({videoLoaded: true
            })}if(!Progress) {this.setState({goProgress: true
            })}console.log('_onProgress 数据对象'+JSON.stringify(data))this.setState({ currentTime: data.currentTime });console.log('_onProgress 当前时间'+data.currentTime)};//播放完毕后的回调函数
    _onEnd = () => {this.setState({paused: true,currentTime:this.state.duration, //否则当视频播放完毕后进度条还有一小块没有顶满
            goProgress:false
        })};//发生错误的回调函数
    _onError = (error)=> {console.log('错误'+JSON.stringify(error))this.setState({isVideoOk:false
        })}//重新从头开始播放
    _rePlay = ()=>{fs.VideoPlayer.seek(0);  //fs.VideoPlayer通过ref找到子组件Video
        this.setState({paused:false
        })}//暂停
    _pause = () =>{if(!this.state.paused) {this.setState({paused: true
            })}}//暂停后恢复播放
    _resume = ()=> {if(this.state.paused) {this.setState({paused: false
            })}}//获取当前播放进度占总长度的比例
    getCurrentTimePercentage() {if (this.state.currentTime > 0) {return parseFloat(this.state.currentTime) / parseFloat(this.state.duration);}return 0;};render() {const flexCompleted = CurrentTimePercentage() * 100;const flexRemaining = (1 - CurrentTimePercentage()) * 100;let rowData = wData;return (<View style={ainer}>{/*头部标题和返回按钮*/}<DetailTatil backToList={this._backtoList}/><View style={styles.videoBox}><Video
                        ref="VideoPlayer"  //Video组件的标记
                        source={{uri:'183.2.204.11/youku/6977DD384574D72B8E93562A1/0300080100595CA431F631003E8803E1CFEC05-52A3-9C7E-F6FE-08902263E9C6.mp4?sid=050354086381818185773_00&sign=d8259ba16df7653fa59ad648cee7ddd0&ctype=50'}}
                        style={styles.fullScreen}
                        rate={this.state.rate}      // 控制暂停/播放，0 代表暂停paused, 1代表正常
                        paused={this.state.paused}  // true代表暂停，默认为false
                        volume={this.state.volume} // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数
                        muted={this.state.muted}   // true代表静音，默认为false.
                        resizeMode={sizeMode}    // 视频的自适应伸缩铺放行为
                        repeat={false}                 //重复播放
                        playInBackground={false}     // 当app转到后台运行的时候，播放是否暂停

                        onLoadStart={this._onLoadStart}   // 当视频开始加载时的回调函数，会传一个参数
                        onLoad={this._onLoad}              // 当视频加载完毕时的回调函数
                        onProgress={this._onProgress}      //  进度控制，每250ms调用一次，以获取视频播放的进度
                        onEnd={this._onEnd}
                        onError={this._onError}

                    />{/*在视频加载完之前加一个加载的loading圆圈，就是把ActivityIndicator组件叠加到video组件上面，需要绝对定位*/}{!this.state.videoLoaded ?  <ActivityIndicator color={'red'} size={'large'} style={styles.loading} /> : null}{/*中间的播放按钮重新播放  先判断，在根据判断的结果添加组件*/}{this.state.videoLoaded && !Progress ?  //判断已经加载完并且已经不再progress过程
                        <Icon
                            name='ios-play' //播放视频的图标
                            size={45}
                            style={styles.play}
                            onPress={this._rePlay}
                        />: null}{/*视频播放的时候点击视频上任何一个地方都会暂停，暂停后点击播放按钮继续播放*/}{this.state.videoLoaded && Progress ?<TouchableOpacity
                            onPress={this._pause}
                            style={styles.pauseArea}
                        >{this.state.paused ?<Icon
                                    name='ios-play' //播放视频的图标
                                    size={45}
                                    style={styles.play}
                                    onPress={this._resume}
                                />: null}</TouchableOpacity>: null}{/*当视频出错的时候在video上显示内容*/}{!this.state.isVideoOk ?<Text style={styles.failText}>视频出错</Text>: null}{/*视频的进度条，也可以用width来设置*/}<View style={styles.progress}>{/*flex属性是flex-grow, flex-shrink 和 flex-basis的简写*/}<View style={[styles.innerProgressCompleted, { flex: flexCompleted }]} /><View style={[styles.innerProgressRemaining, { flex: flexRemaining }]} />{/*这两个view就是进度条*/}</View></View></View>);}//返回上一个页面,从哪个页面跳进来返回哪一个页面
    _backtoList = ()=>{let {navigator} = this.props;if(navigator){navigator.pop();  //pop()跳转回去并且卸载掉当前场景
        }}
}