视频的本机图像选择持续时间

时间:2019-01-02 07:12:13

标签: reactjs react-native react-native-video react-native-image-picker

我正在使用react-native-image-picker库进行视频录制,并使用react-native-video播放视频,其中给出了onLoad回调函数中的视频时长,但是如何在代码中使用它可以有人请引导我吗?我已经在函数中编写了durationLimit,但是它不起作用。如何录制时长为30秒的视频?我尝试了this 也是,但是失败了。

我的代码

import ImagePicker from 'react-native-image-picker';   
import Video from 'react-native-video';

constructor(props){
   super(props);
   this.state = {
      video: '',
      isVideo: true
   };
};
_handleVideoUpload = () => {
   const options = {
      mediaType: 'video',
      videoQuality: 'medium',
      durationLimit: 30000,
      thumbnail: true,
      allowsEditing: true,
   };

   ImagePicker.launchCamera(options, (response) => {
      if (response.didCancel) {
        // console.warn('User cancelled video picker');
        return true;
      } else if (response.error) {
         // console.warn('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
          console.warn('User tapped custom button: ', response.customButton);
      } else {
         this.setState({video: response.uri});
      } 
   });
 }

render() {
   return(
     <View>
     {
      this.state.video != '' ?
         <View>                     
           <Video
              ref={ref => this._video = ref}
              source={{ uri: this.state.video }}
              resizeMode={'cover'}
              repeat={true}
              paused = {true}
              onLoad={() => { this._video.seek(2);}} 
           />
       </View>
     : 
       <TouchableOpacity 
          onPress={() => this._handleVideoUpload()}
       >
         <Text>Upload Video</Text>
      </TouchableOpacity>
    }
   </View>
);}

谢谢。

1 个答案:

答案 0 :(得分:0)

如果要录制30秒的视频,则需要将30放到durationLimit中,而不是30000

`const options = {
   mediaType: 'video',
   videoQuality: 'medium',
   durationLimit: 30,
   thumbnail: true,
   allowsEditing: true,
};`

如果您想知道<Video />上的视频的持续时间,可以这样做:

`_onLoad(data){
    let durationVideo = data.duration
}
...
<Video
   ref={ref => this._video = ref}
   source={{ uri: this.state.video }}
   resizeMode={'cover'}
   repeat={true}
   paused = {true}
   onLoad={() => this._onLoad()}
/>`

希望这对您有所帮助。