Question

我想播放15秒的视频。首先，我想以简单的顺序播放视频，在15秒后，我想以相反的顺序播放视频。在下面的代码中，我正在从本地文件中获取视频并在react-native-video中播放。我想将视频作为Instagram飞镖选项播放。我也尝试过将react-native-video选项的寻求选项作为向后选项，但它不起作用。请帮我解决这个问题。这是我的代码：-

 import React, { Component } from 'react';
 import Modal from 'react-native-modal';
 import { Avatar, Button, Icon } from 'react-native-elements';
 import ImagePicker from 'react-native-image-picker';
 import Video from 'react-native-video';

 export default class VideoPickAndUpload extends Component {

 constructor(props) {
    super(props);
    this.state = {
        videoUri : null,
        paused : false,
        repeat : false,
        rate : 1,
        volume : 1,
        resizeMode : 'contain',
        duration : 0.0,
        currentTime : 0.0,
        rateText : 0.0,
        pausedText : 'Play',
        controls : true,
        playIcon : 'controller-paus'        
    };
}   


//video Select from camera or gallery
onSelectVideo = () => {
    ImagePicker.showImagePicker({title:'Select Video',
        takePhotoButtonTitle : 'Make Video',
        maxHeight:800,maxWidth:800,
        mediaType:'video',cropping:true},
        video => {
            if(video.didCancel){
                ToastAndroid.show('Video selecting   
 cancel',ToastAndroid.LONG);
            } else if(video.error){
                ToastAndroid.show('Video selecting error : 
 '+video.error,ToastAndroid.LONG);
            }else {
                ToastAndroid.show('Video path : 
 '+video.uri,ToastAndroid.LONG);
                this.setState({videoUri : video.uri})
            }
          }
        )
    }

//reset Video
onResetVideo = () => {
    this.setState({videoUri : null})
} 

onPress = () => {
    if(this.state.paused == true){
        this.setState({paused:false,playIcon:'controller-
 paus'})
    }else {
        this.setState({paused:true,playIcon:'controller-play'})
    }
}

//load video
onLoad = (data) => {
    this.setState({duration : data.duration})
}

//load current progress
onProgress = (data) => {
    this.setState({currentTime : data.currentTime})
    ToastAndroid.show("Progress : 
 "+data.currentTime,ToastAndroid.LONG);
    if(this.state.currentTime >= 15){
        for(let i=data.currentTime;i>=1;i--){
            this.video.seek(data.currentTime - i )
            ToastAndroid.show("decrease : 
 "+i,ToastAndroid.LONG);
        }
    }
} 

//when reach on end
onEnd = () => {
    this.setState({pausedText : 'Play' ,  playIcon:'controller-
 stop'})
    //this.video.seek(0)
    ToastAndroid.show("End : 
 "+this.state.currentTime,ToastAndroid.LONG);
}

//get current time percentage on progress bar
getCurrentTimePercentage() {
    if(this.state.currentTime > 0){
       return parseFloat(this.state.currentTime) / 
 parseFloat(this.state.duration)
    }
    return 0;
};

render() {

    const {modalVisible,modalClose} = this.props;

    return (
        <Modal 
            animationIn={"bounceInRight"}
            animationOut={"bounceOutRight"}
            animationInTiming={500}
            animationOutTiming={500}
            isVisible={modalVisible}
            onBackButtonPress={modalClose}
        >
            <View style={styles.container}>

                <TouchableWithoutFeedback
                    onPress={() => this.onPress()}
                    style={{borderWidth:2,borderColor:'grey'}}
                >
                    <Video
                        ref={ref => {this.video = ref}}
                        source={{uri: this.state.videoUri}}
                        style={{height:400,width:400}}
                        repeat={this.state.repeat}
                        rate={this.state.rate}
                        volume={this.state.volume}
                        resizeMode={this.state.resizeMode}
                        paused={this.state.paused}
                        onLoad={this.onLoad}
                        onProgress={this.onProgress}
                        onEnd={this.onEnd}
                        controls={this.state.controls} 
                        playWhenInactive={true} 
                    />
                </TouchableWithoutFeedback>
                <View style = 
 {{margin:16,flexDirection:'row'}}>
                    <Icon
                        name='controller-fast-backward'
                        type='entypo'
                        color='#fff'
                        size={36}
                        containerStyle={{padding:16}}
                        onPress={() => 
 {this.video.seek(this.state.currentTime-10)}}
                    />
                    <Icon
                        name={this.state.playIcon}
                        type='entypo'
                        color='#fff'
                        size={36}
                        containerStyle={{padding:16}}
                        onPress={() => this.onPress()}
                    />
                    <Icon
                        name='controller-fast-forward'
                        type='entypo'
                        color='#fff'
                        size={36}
                        containerStyle={{padding:16}}
                        onPress={() => 
 {this.video.seek(this.state.currentTime+10)}}
                    />
                </View>
                <View style = 
 {{margin:16,flexDirection:'row'}}>
                    <Button
                        title="Upload Video"
                        buttonStyle = 
      {{paddingHorizontal:16,paddingVertical:4}} 
                        containerStyle = {{marginRight:8}} 
                        onPress={()=>this.onSelectVideo()}                      
                    />
                    <Button
                        title="Reset Video"
                        buttonStyle = 
      {{paddingHorizontal:16,paddingVertical:4}} 
                        containerStyle = {{marginLeft:8}} 
                        onPress={() => this.onResetVideo()}                      
                    />
                </View>
            </View>
        </Modal>
    );
 }

 }

 const styles = StyleSheet.create({
     container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#212',
  },
 });

Answer 1

使用react-naitive-video-processing库处理飞旋镖视频。

如何使用react-native-video反向播放视频？

1 个答案: