RN 获取视频封面,获取视频第一帧
严格的说,没有解决这个问题,实际上是绕过了这个问题,严格的说获取的也不是第一帧。
RN的video 视频应用,大多是这样的
1、安装
yarn add react-native-video
2、导入
import Video from 'react-native-video';
3、使用
<Video
ref='video'
source={{uri:'https://video.699pic.com/videos/73/92/43/b_mPEcRsUxTkE91597739243.mp4'}} //url或本地文件
volume={5} //放大声音倍数
paused={false} //是否暂停
rate={this.state.rate} //0/1,0暂停,1正常
muted={false} //静音
resizeMode='contain' //视频适应方式
repeat={true} //是否重复播放
controls={true} //显示控制按钮
onLoadStart={this.onLoadStart}
onLoad={this.onLoad}
参数:currentPosition 当前播放时间
duration 视频总时间
onProgress={this.onProgress} //视频播放每隔250毫秒触发,并携带当前已播放时间
参数:currentTime 当前播放时间
playableDuration 视频总时间
onEnd={this.onEnd}
onError={this.onError}
style={styles.video}
/>
4、方法
ref对象.seek(n秒); 跳转到视频多少秒
以上都是在别的博客复制过来的,但是获取视频封面却很麻烦。网上很多获取封面的方法实在 麻烦,垃圾组件又不能自动获取。今天在这里记录一下,实际上做到的效果和获取到封面差不多。实际上没有解决这个问题,只是绕过了这个问题。现在看答案:
<Videosource={source1}paused={this.state.paused} // true 代表暂停,默认为 false// muted={true} // true代表静音,默认为false.playInBackground={false} onProgress={({currentTime}) => {this.setState({paused:true})}}onLoad={({duration}) => {}}onEnd={() => {this.setState({showVideoIma:true})}}resizeMode="cover"style={{width:imgWidth,height:imgWidth,margin:5,borderRadius:20}} />
this.state = {paused:false};//默认false就是一开始就播放。 一开始就让他默认播放,只要播放了就走onProgress,就给我停下。然后停下来的页面就是封面。