宝宝秀项目学习（三）

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

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

export default class Detail extends Component {
constructor(props){
super(props);
this.state = {
rowData:this.props.rowData,  //从上以页面传递过来的数据
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(!this.state.goProgress) {
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 = ()=>{
this.refs.VideoPlayer.seek(0);  //this.refs.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 = this.getCurrentTimePercentage() * 100;
const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;
let rowData = this.state.rowData;
return (
<View style={styles.container}>
{/*头部标题和返回按钮*/}
<DetailTatil backToList={this._backtoList}/>

<View style={styles.videoBox}>
<Video
ref="VideoPlayer"  //Video组件的标记
source={{uri:'http://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={this.state.resizeMode}    // 视频的自适应伸缩铺放行为
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 && !this.state.goProgress ?  //判断已经加载完并且已经不再progress过程
<Icon
name='ios-play' //播放视频的图标
size={45}
style={styles.play}
onPress={this._rePlay}
/>
: null}

{/*视频播放的时候点击视频上任何一个地方都会暂停，暂停后点击播放按钮继续播放*/}
{this.state.videoLoaded && this.state.goProgress ?
<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()跳转回去并且卸载掉当前场景
}
}
}