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,就给我停下。然后停下来的页面就是封面。
相关推荐
ALex_zry14 分钟前
程序运行报错分析文档
android·c++
投笔丶从戎1 小时前
Kotlin Multiplatform--04:经验总结(持续更新)
android·开发语言·kotlin
stevenzqzq1 小时前
kotlin flow的写法
android·kotlin·flow
悠哉清闲1 小时前
Kotlin 协程 (三)
android·开发语言·kotlin
androidwork1 小时前
在 Android 中实现支持多手势交互的自定义 View(Kotlin 完整指南)
android·kotlin·交互
悠哉清闲1 小时前
Kotlin 协程 (二)
android·开发语言·kotlin
androidwork1 小时前
使用 ARCore 和 Kotlin 开发 Android 增强现实应用入门指南
android·kotlin
Ryannn_NN3 小时前
avalonia android连接模拟器时报错adb cannot run as root in production builds,没有权限
android·adb·wpf·xamarin
ii_best3 小时前
按键精灵ios/安卓辅助工具高级函数OcrEx文字识别(增强版)脚本开发介绍
android·ios
_龙小鱼_3 小时前
Android日活(DAU)检测的四大实现方案详解
android