当前位置: 首页 > ai >正文

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

http://www.xdnf.cn/news/2931.html

相关文章:

  • 【免费下载】1985-2023年全国土地利用数据
  • 《算法笔记》10.5小节——图算法专题->最小生成树 问题 B: Freckles
  • 当前HPLC载波无法满足全量数据分钟级采集需求的主要原因
  • STM32 SPI通信协议
  • 从整体上把握操作系统的作用,以及理解进程状态是什么
  • EtherCAT转Profinet网关,包装产线的“语言翻译器”
  • python:练习:2
  • 查看Mysql版本
  • c/c++之信号处理<signal.h>
  • 【vue3】黑马程序员前端Vue3小兔鲜电商项目【五】
  • 问题排查:calss extends 后页面加载不出来(忘记加super),打包后不报错;遇到问题可以适当出去走一下,让脑子休息一下
  • AimRT 从零到一:官方示例精讲 —— 五、Parameter示例.md
  • WPF(Windows Presentation Foundation)的内容模型
  • 可视化图解算法: 判断是不是二叉搜索树(验证二叉搜索树)
  • SEO优化指南与实战技巧
  • centos安装部署配置kafka
  • Vue常用的修饰符有哪些有什么应用场景(含deep seek讲解)
  • 通用事件库IO多路复用技术选型与设计
  • 常见位运算总结
  • 塑料材料工程师简历模板
  • C#进阶学习(十七)PriorityQueue<TElement, TPriority>优先级队列的介绍
  • 阿里云服务器 篇十二:加入 Project Honey Pot 和使用 http:BL
  • 万象生鲜配送系统代码2025年4月29日更新日志
  • Java练习3
  • c语言的常用的预处理指令和条件编译
  • __proto__与prototype
  • 误在非开发分支上开发解决方案
  • LabVIEW实验室项目中使用类模块与仿真
  • Linux 怎么安装 Oracle Java 8
  • 通过logrotate和cronolog对日志进行切割