uniapp获取视频第一帧作为封面图

uniapp获取视频第一帧作为封面图,前提是在oss里面存储的

视频路径 + ‘?x-oss-process=video/snapshot,t_0,f_jpg’
	<image :src="item.video_url + '?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill">
    </image>
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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绘制完成后再播放视频
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值