获取视频文件第一帧图片

+ (UIImage*) thumbnailImageForVideo:(NSString *)videoPath

{

    

    if(videoPath.length == 0)

    {

        return nil;

    }

    

    NSURL *videoURL = [NSURL

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值