在uni-app中截取视频中的某一帧画面作为图片在页面中显示

最新推荐文章于 2024-01-12 09:12:48 发布
最新推荐文章于 2024-01-12 09:12:48 发布
阅读量1.4k 收藏 2
点赞数 2
文章标签： uni-app 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dzry_lr/article/details/127993972
版权

当时在网上找到js的函数方法去实现这个问题，但是发现浏览器上可以实现，模拟器上却无法实现的问题

 最后找到原因是在js中操作了dom，使用了document.createElement( ),在uni打包成apk的时候是没有dom的，所以在模拟器上不生效

解决：

<img :src="`${videoSrc}?x-oss-process=video/snapshot,t_${seek},f_jpg`" alt="" >

上边所传的videoSrc代表的是视频的路径，seek代表的是指定桢的毫秒数（这里传值必须为Number类型）

dzry_lr
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp(全端兼容) - 最新详细实现视频播放器用第一帧当封面功能，uniapp如何在全平台实现截取视频第一帧作为视频封面，获取视频组件video第一帧作为图片当封面教程（详细示例代码，一键复制）
高级前端工程师
05-16 3694
uni-app，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，视频封面，video，uniapp video视频组件封面，截取第一帧为视频封面图，如何获取视频的第一帧并转为图片，uniApp截取视频第一帧的图片,获取视频的第一帧作为封面图，uni-app App和H5平台上传视频截取视频第一帧生成图片，如何拿到视频的第一帧图片，视频播放器中怎么截图第一秒的图片当作封面，nvue获取视频第一帧做封面，renderjs，从本地上传视频展示第一帧
通过视频地址获取视频缩略图
12-21
只用视频地址就能获取缩略图了，非常方便，分享给大家
video-cover:视频获取首帧图片
05-01
video-cover 视频获取首帧图片
uniapp （截取视频第一帧图片）
weixin_45881304的博客
03-09 1551
【代码】uniapp （截取视频第一帧图片）
uniapp自动获取视频第一帧作为视频封面
qq_44473483的博客
08-01 3239
很多时候我们都需要使用视频的第一帧当作视频的封面，今天我们从uni-app的安卓app这个环境来实现下这个需求。
uniapp获取视频第一帧展示，及视频的层级问题，亲测有效
m0_55595611的博客
02-23 7091
上传视频等，默认为黑色，无法用视频的第一帧作为封面，以及视频的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 1572
uniapp 获取视频第一帧
uniapp截取视频第一帧的图片，或者任意一帧
bpluoxong的博客
05-26 3032
【代码】uniapp截取视频第一帧的图片，或者任意一帧。
uni-app利用renderjs实现截取视频第一帧画面作为封面图
最新发布
qq_44910894的博客
01-12 1831
本文讲述了如何动态捕获视频第一帧画面作为视频封面，主要利用了 renderjs 和 canvas 技术
uni-app 自定义组件展示html富文本内容，可实现富文本html内容中 图片展示、视频播放、音频播放。
06-10
uni-app 富文本内容利用html2json转换成对应类似控件 rich-text 对应的数组资源格式后进行展示的自定义组件、可以进行富文本html内容中 图片展示、视频播放、音频播放。
UNI-APP 中sqlite demo 增删查改
06-24
本demo包含 自己封装的sqlite.js 页面功能 打开关闭数据库 创建表、删除表 新增表数据、删除表数据 查询表数据、编辑表数据 可按条件操作，删除、查询表数据
uni-app录制视频插件，视频压缩，支持设置分辨率和视频名称
09-10
uni-app在Android平台上录制视频，支持设置分辨率和视频名称，有取消、重录和完成功能 视频录制 视频设置分辨率 Android录制视频 资源包中有demo源码和相关操作文档
uni-app实战在线教育类app开发-视频教程网盘链接提取码下载.txt
11-07
本季度基于uni-app实战开发在线教育类app和小程序，课程包括：图文，音频，视频，电子书、会员、直播、问答、考试、拼团秒杀、优惠券。一次开发，同时搞定Android、iOS、微信小程序、H5端。非常适合具有...
在uni-app中使用pdf.js实现在手机上打开pdf
11-04
在uni-app中使用pdf.js实现在手机上打开pdf
uniapp的video使用image获取视频第一帧来替代video的展示
qq_39147047的博客
12-24 1万+
uniapp的video使用image获取视频第一帧来替代video的展示 在uniapp里video的层级过高，虽然我们可以使用原生组件来提高层级，但还是会遇到video不能在swiper使用，会脱离文档流，在面对这样的问题，可以使用image来展示视频地址的第一帧，自定义播放按钮来代替video的播放按钮，再使用web-view来播放视频； <view> <image :src="url + videoFile+'?vframe/jpg/offset/0'" mode="" styl
uni-app从后端返回的mp4链接视频截取一帧为封面
yuanqi3131的博客
12-06 3306
后端返回包含视频链接的数组对象，格式如下： 从上面的mp4视频中截取一帧设置为封面，如下图，下面的封面图从视频中截取而来。 按照上面的代码，其中posterList就是对应的每一个视频的封面base64数组，一切看起来都挺好，在H5正常运行，但是在APP端使用，明显是不可以的，因为在app端，document为undefined，那么怎么弄呢，查阅了资料，发现使用renderjs即可以识别。 1）当 videoLists变化时，通过 :change:videoLists="renderScript.cre
uni-app 多个视频同时播放问题（h5和app）及获取视频第一帧 亲测有用
m0_49578914的博客
06-15 2282
我们要的是只允许同时播放一个视频 一句话：除当前操作的视频外全部 pause() html： <video :src="item.picUrl" @play="playVideo" :id="'video'+item.broadcastId" :poster="item.picUrl" controls :show-center-play-btn="false" auto-pause-if-navigate></video> js： playVideo (e) { //获取自定
uniapp播放视频截图2(APP可以用，小程序勿进)
abs625的博客
03-22 1059
uniapp video组件截图
uniappvideo避坑指南（H5、小程序、app）
热门推荐
weixin_64974600的博客
07-16 1万+
video避坑指南，解决闪退问题
在uni-app中如何实现加载超长图片
05-24
在uni-app中实现加载超长图片可以使用 `uni.scaleImage` 方法，该方法可以将图片等比例缩放，并返回缩放后的图片信息。以下是一个简单的示例代码： ```html <template> <view class="container"> <image :src="imageSrc" :style="{ height: imageHeight + 'px' }"></image> </view> </template> <script> export default { data() { return { imageSrc: '/static/long-image.jpg', // 超长图片的路径 imageWidth: 0, // 图片的宽度 imageHeight: 0, // 图片的高度 } }, mounted() { this.loadImage() }, methods: { loadImage() { // 获取屏幕宽度 const screenWidth = uni.getSystemInfoSync().screenWidth // 加载图片并获取图片信息 uni.getImageInfo({ src: this.imageSrc, success: (res) => { // 计算图片高度 const { width, height } = uni.scaleImage({ src: res.path, width: screenWidth, height: res.height, }) this.imageWidth = width this.imageHeight = height }, }) }, }, } </script> ``` 在上面的代码中，我们首先使用 `uni.getImageInfo` 方法获取图片信息，然后通过 `uni.scaleImage` 方法计算出等比例缩放后的图片高度，并将其设置为 `imageHeight` 的值，最终在模板中将 `imageHeight` 应用到图片的样式中。这样就可以在 uni-app 中实现加载超长图片了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值