uniapp(全端兼容) - 最新详细实现视频播放器用第一帧当封面功能，uniapp如何在全平台实现截取视频第一帧作为视频封面，获取视频组件video第一帧作为图片当封面教程（详细示例代码，一键复制）

最新推荐文章于 2024-06-21 10:05:18 发布
最新推荐文章于 2024-06-21 10:05:18 发布
阅读量4k 收藏 5
点赞数 4
分类专栏： 前端组件与功能(开箱即用) 文章标签： uni-app 获取视频第一帧作为封面图展示 uniapp全部端都兼容 视频播放器组件video 在视频中截取第一秒并生成封面 video获取第一帧图像教程 uniapp详细带运行示例代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/138964532
版权

效果图

在uniapp微信小程序/手机h5网页网站/安卓app/苹果app/支付宝小程序/nvue等（全平台完美兼容）开发中，实现uniApp各端都兼容的 “截取视频第一帧，作为视频播放的封面图展示”，详解如何获取视频的第一秒截图当视频封面图教程，支持用户上传视频后显示预览展示视频第一帧的需求，只需要你传入视频地址或本地视频即可自动截取并设置封面！

uniapp Vue3和Vue2都能用，详细示例代码，一键复制运行后稍微改下就能用了！

在这里插入图片描述

准备起步

首先，先了解下

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
通过视频地址获取视频缩略图
12-21
只用视频地址就能获取缩略图了，非常方便，分享给大家
video-cover:视频获取首帧图片
05-01
video-cover 视频获取首帧图片
uniapp获取视频第一帧作为封面图
最新发布
资深Bug开发大师
06-21 343
【代码】uniapp获取视频第一帧作为封面图。
uniapp自动获取视频第一帧作为视频封面
qq_44473483的博客
08-01 3990
很多时候我们都需要使用视频的第一帧当作视频的封面，今天我们从uni-app的安卓app这个环境来实现下这个需求。
uniapp截取视频画面帧
m0_59281691的博客
04-16 1920
最近开发中遇到这么一个需求，上传视频文件的时候需要截取视频的一部分画面来供选择，作为视频的封面，截取画面可以使用canvas来实现，将视频画面画进canvas里，再通过canvas来生成文件对象和一个预览的url。
uni-app App和H5平台上传视频截取视频第一帧生成图片
qying的博客
07-12 7206
uni-app App和H5平台使用renderjs上传视频截取视频第一帧生成图片
uniapp获取视频第一帧展示，及视频的层级问题，亲测有效
m0_55595611的博客
02-23 7172
上传视频等，默认为黑色，无法用视频的第一帧作为封面，以及视频的video为原生组件，层级很高无法覆盖问题，虽然有cover-view，但很多场景还是不灵活， 方法： 视频组件video <video :src="item.url" :poster="" controls :show-center-play-btn="false" auto-pause-if-navigate></video> 重点 将video组件更换为image组件，地址仍写video的地址，在地址后面加上 '
uniapp 获取视频第一帧
weixin_53620610的博客
11-29 1604
uniapp 获取视频第一帧
uniapp （截取视频第一帧图片）
weixin_45881304的博客
03-09 1600
【代码】uniapp （截取视频第一帧图片）
uniapp video（倍速功能、层级过高、视频第一帧做封面 等问题）
tengyuxin的博客
05-23 6845
逻辑上就是再url后面，添加?出现上下出现黑边的原因是： object-fit ：contain；需要修改为 fill 就可以了。我想要在video视频上面显示内容，可是无论怎么在view中使用定位，都无法盖住视频。后来使用cover-view就可以了。
上传视频自动获取第一帧
03-29
上传视频， 获取视频的第一帧生成一张图片
uniapp全端《智能取名》源码
09-03
总的来说，【uniapp全端《智能取名》源码】是一个可定制、跨平台的命名工具，它利用uniapp的强大功能和智能算法，为用户提供了一站式的取名解决方案。无论你是希望创建自己的命名应用，还是寻找一个可以嵌入现有项目...
仿抖音短视频小程序APP开源前后端源码，UNIAPP前端即时通讯源码学习分享前端下载源码
05-26
这些源码不仅能够帮助开发者快速搭建起一个功能完善的短视频平台，还能通过学习和实践，提升开发者的技术水平和项目经验。 首先，我们来谈谈仿抖音短视频小程序APP开源前后端源码的价值。这类源码通常包含了完整的...
全端云uniapp小程序源码，百搜全端云多端小程序DIY制作开源系统
11-01
百搜全端云小程序多端制作系统开源源码，集成一个小程序实现:外卖餐饮 商城 电影购票 玉石拍卖 同城 旅游 视频语音付费 文章 预约万能表单 入驻商家手机管理功能 首页音乐播放 秒杀 拼团 可以一端支持全部功能对接...
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
在uni-app框架中，`scroll-view`组件是一个非常实用的工具，它允许开发者实现横向和纵向的滚动，并且可以添加滚动回调功能，以便在用户滚动时执行特定的操作。下面将详细讲解uni-app的`scroll-view`组件及其相关的...
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
09-23
自定义tabbar底部导航栏，简洁，方便，二开 使用教程 将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>
uni-app利用renderjs实现截取视频第一帧画面作为封面图
qq_44910894的博客
01-12 1970
本文讲述了如何动态捕获视频第一帧画面作为视频封面，主要利用了 renderjs 和 canvas 技术
uniapp全屏播放视频以及获取第一帧作为封面图
weixin_47568895的博客
04-18 1245
uniapp全屏播放视频以及获取第一帧作为封面图。
uniapp 获取视频第一帧 当作图片
05-31
在uniapp中，可以使用uni-app官方提供的uni.media.chooseVideo API选择本地视频文件，并通过video标签播放视频。同时，我们可以通过video标签提供的canvas截取视频的第一帧作为图片。 具体实现步骤如下： 1. 使用uni.media.chooseVideo API选择本地视频文件，并通过video标签播放视频。 ```js uni.media.chooseVideo({ sourceType: ['album'], success: function(res) { var videoPath = res.tempFilePath; // 将视频路径绑定到video标签 uni.createVideoContext('myVideo').src = videoPath; } }) ``` 2. 在video标签的loadedmetadata事件中获取视频时长、宽高等信息，并将视频的第一帧渲染到canvas上。 ```html <template> <view> <video id="myVideo" :bindloadedmetadata="onLoadedMetadata"></video> <canvas id="myCanvas"></canvas> </view> </template> <script> export default { methods: { onLoadedMetadata(e) { // 获取视频时长、宽高 const duration = e.duration; const width = e.videoWidth; const height = e.videoHeight; // 将canvas的宽高设置为视频的宽高 const canvas = uni.createCanvasContext('myCanvas'); canvas.canvas.width = width; canvas.canvas.height = height; // 绘制视频的第一帧到canvas上 canvas.drawImage('myVideo', 0, 0, width, height); canvas.draw(); // 将canvas转换为图片 const that = this; setTimeout(function() { uni.canvasToTempFilePath({ canvasId: 'myCanvas', success: function(res) { const imagePath = res.tempFilePath; // 将图片路径保存到data中 that.imagePath = imagePath; } }) }, 1000) } } } </script> ``` 在上述代码中，我们通过video标签的loadedmetadata事件获取视频的宽高等信息，并将canvas的宽高设置为视频的宽高。接着，我们通过canvas的drawImage方法绘制视频的第一帧到canvas上，并将canvas转换为图片，最后将图片路径保存到data中。 需要注意的是，由于canvas绘图是异步的，我们需要在setTimeout中等待一定时间，确保canvas已经绘制完成。同时，为了避免视频播放过程中截取到不正确的图片，我们可以在视频播放前暂停视频，并在canvas绘制完成后再播放视频。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值