RN 获取视频封面，获取视频第一帧

西楚曹长卿2025-05-01 13:19

严格的说，没有解决这个问题，实际上是绕过了这个问题，严格的说获取的也不是第一帧。

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秒); 跳转到视频多少秒

以上都是在别的博客复制过来的，但是获取视频封面却很麻烦。网上很多获取封面的方法实在麻烦，垃圾组件又不能自动获取。今天在这里记录一下，实际上做到的效果和获取到封面差不多。实际上没有解决这个问题，只是绕过了这个问题。现在看答案：

复制代码

<Video
    source={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，就给我停下。然后停下来的页面就是封面。