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

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

复制代码
<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,就给我停下。然后停下来的页面就是封面。
相关推荐
橙子199110161 小时前
请简述一下什么是 Kotlin?它有哪些特性?
android·开发语言·kotlin
贫道绝缘子2 小时前
【Android】四大组件之Service
android
weixin_472339462 小时前
Android Studio下载安装教程
android·ide·android studio
EasyGBS2 小时前
哪些因素会影响远程视频监控的质量?浅述EasyCVR视频智能诊断技术
大数据·网络·人工智能·音视频
tangweiguo030519873 小时前
Android Kotlin 依赖注入全解:Koin appModule 配置与多 ViewModel 数据共享实战指南
android·kotlin
建群新人小猿4 小时前
CRMEB-PRO系统定时任务扩展开发指南
android·java·开发语言·前端
百流4 小时前
ES使用之查询方式
android·大数据·elasticsearch
每次的天空6 小时前
Android学习总结之自定义view设计模式理解
android·学习·设计模式
流星雨在线6 小时前
解决 RN Switch 组件在安卓端样式很丑的问题
react native