react native随手记之视频播放器video

react native 随手记之视频播放器Video

---

一、导入三方库

1.video

yarn add react-native-video

2.slider

yarn add react-native-slider

二、 代码示例

import React, {Component} from 'react';
import {StyleSheet, View, Image, TouchableOpacity} from 'react-native';
import Video from 'react-native-video';
import Slider from 'react-native-slider';

export default class TrainDetailVideo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            video: Video,
            pauseShow: true,
            pause: true,
            progress: 0,
            maxProgress: 1,
        };
    }

    render() {
        const {videoUrl, videoPicUrl} = this.props;
        return (
            <View style={styles.container}>
                <Video
                    ref={(ref: Video) => {
                        this.video = ref;
                    }}
                    paused={this.state.pause}
                    style={styles.videoStyle}
                    source={{uri: videoUrl}}
                    resizeMode={'contain'}
                    // repeat={true}
                    onLoad={(e) => {
                        this.setState({maxProgress: e.duration});
                    }}
                    onProgress={(e) => {
                        this.setState({
                            progress: e.currentTime,
                        });
                    }}
                    poster={videoPicUrl}
                    posterResizeMode={'cover'}
                    onEnd={() => {
                        this.setState({
                            pause: true,
                            progress: this.state.maxProgress,
                        });
                    }}
                />
                <View style={styles.viewControll}>
                    {this.state.pauseShow === true ?
                        <View style={styles.viewPause}>
                            <TouchableOpacity
                                onPress={() => {

                                    this.setState({
                                        pause: false,
                                        pauseShow: false,
                                    });
                                }}>
                                <Image style={styles.imgPauseBig}
                                       source={require('../../../../assets/ic_video_pause.png')}/>
                            </TouchableOpacity>

                        </View>
                        :
                        <View style={styles.viewBottomControll}>
                            <View style={{flexDirection: 'row', alignItems: 'center', marginBottom: 5}}>
                                <TouchableOpacity
                                    onPress={() => {
                                        if (this.state.progress >= this.state.maxProgress) {
                                            this.video.seek(0);
                                        }
                                        this.setState({
                                            pause: this.state.pause === true ? false : true,
                                            progress: this.state.progress >= this.state.maxProgress ? 0 : this.state.progress,
                                        });
                                    }}>  
                                    <Image style={styles.imgPauseSmall}
                                           source={this.state.pause === true ? require('../../../../assets/ic_small_pause.png') : require('../../../../assets/ic_small_play.png')}/>
                                </TouchableOpacity>

                                <Slider style={styles.slider}
                                        value={this.state.progress}
                                        maximumValue={this.state.maxProgress}
                                        minimumTrackTintColor={'white'}
                                        maximumTrackTintColor={'#636D76'}
                                        thumbTintColor={'white'}
                                        thumbStyle={{width: 10, height: 10}}
                                    // disabled={true}
                                        onValueChange={(value) => {
                                            this.video.seek(value);
                                            this.setState({
                                                progress: value,
                                                pause: value >= this.state.maxProgress ? true : false,
                                            });
                                        }}/>
                            </View>
                        </View>}


                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        position: 'relative',
        marginLeft: 16,
        marginRight: 16,
        height: 196,
        marginBottom: 10,
        backgroundColor: 'black',
        justifyContent: 'center',
        alignItems: 'center',
    },
    videoStyle: {
        flex: 1,
        width: '100%',
        height: 196,
    },
    viewControll: {
        position: 'absolute',
        width: '100%',
        height: '100%',

    },
    viewPause: {
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
    },
    viewBottomControll: {
        width: '100%',
        height: '100%',
        flexDirection: 'row',
        alignItems: 'flex-end',
        paddingRight: 5,
        paddingLeft: 5,

    },
    imgPauseBig: {
        height: 50,
        width: 50,
    },
    imgPauseSmall: {
        height: 30,
        width: 30,
    },
    slider: {
        marginLeft: 10,
        marginRight: 10,
        height: 5,
        flex: 1,
    },
});

---