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

发布于:2025-05-01 ⋅ 阅读:(14) ⋅ 点赞:(0)

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

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,就给我停下。然后停下来的页面就是封面。