我的编程空间,编程开发者的网络收藏夹
学习永远不晚

微信小程序实现上传视频功能

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

微信小程序实现上传视频功能

本文实例为大家分享了微信小程序上传视频,供大家参考,具体内容如下

微信开发者工具需要安装ffmpeg环境才能正常使用下面的官方方法。

1、调用官方提供的方法(wx.chooseMedia)

choosevideo(){
    let that=this
    console.log("上传视频的方法")
    wx.chooseMedia({
      count: 1,  //上传视频的个数
      mediaType:['video'],  //限制上传的类型为video
      sourceType:['album', 'camera'], //视频选择来源
      maxDuration: 58, //拍摄限制时间
      camera: 'back',  //采用后置摄像头
      success:function(res){
        //获取临时存放的视频资源
        let tempFilePath=res.tempFiles[0].tempFilePath
        //获取该视频的播放时间
        let duration=res.tempFiles[0].duration
        console.log("视频播放时间为"+duration)
        //获取视频的大小(MB单位)
        let size=parseFloat(res.tempFiles[0].size/1024/1024).toFixed(1)
        console.log("视频大小为"+size)
        //获取视频的高度
        let height=res.tempFiles[0].height
        console.log("视频高度为"+height)
        //获取视频的宽度
        let width=res.tempFiles[0].width
        console.log("视频宽度为"+width)
        //校验大小后,符合进行上传
        if(size>20){
            let beyongSize=size-20 //获取视频超出限制大小的数量
            Toast("上传的视频大小超限,超出"+beyongSize+"MB,请重新上传!")
            return
        }else{
          //符合大小限制,进行上传
          console.log("开始上传!!!")
          that.uploadvideo({
            url: api.uploadfiletofastdfs, //视频上传的接口
            path: tempFilePath, //选取的视频资源临时地址
          });
        }
      },
    })
  },


 //视频上传
    uploadvideo: function (data) {
      wx.showLoading({
        title: '上传中...',
        mask: true,
      })
      var that = this
      //    视频压缩
      wx.compressVideo({
        quality: 'high',
        class="lazy" data-src: data.path,
        success:function(res){
          let size=parseFloat(res.size/1024/1024).toFixed(1)
          console.log("压缩后视频大小为"+size)
          that.setData({
            sptemp:res.tempFilePath
          })
          //上传视频
          wx.uploadFile({
            url: data.url,
            filePath: res.tempFilePath,
            name: 'uploadFile',
            header: {
              "X-Access-Token":wx.getStorageSync('token')
            },
            success: (resp) => {
              wx.hideLoading();
              //获取fastDFS返回的存储路径
              console.log(resp)
            },
          });
        },
      })   
    },

2、页面中用标签将上传的视频显示出来

<video  class="lazy" data-src="{{sptemp}}" ></video>

3、效果展示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

微信小程序实现上传视频功能

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

微信小程序实现图片上传功能

微信小程序实现图片上传功能随着移动互联网的发展,微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景,还支持开发者自定义功能,其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能,并提供具体的代码
微信小程序实现图片上传功能
2023-11-21

微信小程序图片上传功能怎么实现

这篇文章主要介绍“微信小程序图片上传功能怎么实现”,在日常操作中,相信很多人在微信小程序图片上传功能怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序图片上传功能怎么实现”的疑惑有所帮助!接下来
2023-06-30

使用微信小程序实现文件上传功能

标题:使用微信小程序实现文件上传功能随着微信小程序的兴起,越来越多的企业和开发者开始利用微信小程序为用户提供便捷的服务。在很多情况下,用户需要上传文件。如果能够在微信小程序中实现文件上传功能,将会极大地提升用户体验。本文将介绍如何使用微信小
使用微信小程序实现文件上传功能
2023-11-21

微信小程序实现音频录制功能

微信小程序实现音频录制功能近年来,随着移动互联网的发展,微信小程序的普及越来越广泛。微信小程序作为一种轻量级、易于使用的应用,在帮助企业拓展市场和提升用户体验方面发挥着重要的作用。而在实现音频录制功能方面,微信小程序同样提供了简单易用的接口
微信小程序实现音频录制功能
2023-11-21

如何使用PHP实现微信小程序的音视频功能?

如何使用PHP实现微信小程序的音视频功能?随着时代的发展,人们对于移动应用的需求也日益增长。微信小程序作为一种轻量级的应用开发模式,正逐渐受到用户的欢迎。而其中的音视频功能在社交和娱乐领域有着广泛的应用。本文将介绍如何使用PHP实现微信小程
2023-10-26

微信小程序实现图片裁剪并上传功能

微信小程序实现图片裁剪并上传功能随着微信小程序的快速发展,越来越多的开发者开始关注微信小程序的开发技巧和功能实现。其中,图片裁剪并上传功能是一个常见的需求,本文将介绍如何在微信小程序中实现图片裁剪并上传的功能,并提供具体的代码示例。一、功能
微信小程序实现图片裁剪并上传功能
2023-11-21

微信小程序开发文件上传功能怎么实现

这篇文章主要介绍了微信小程序开发文件上传功能怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序开发文件上传功能怎么实现文章都会有所收获,下面我们一起来看看吧。保存图片,我认为有两处需要保存 1、选
2023-06-26

实现微信小程序中的音频播放功能

标题:实现微信小程序中的音频播放功能微信小程序作为一种快速便捷的应用开发平台,为开发者提供了众多丰富的功能。在小程序中,音频播放功能是非常常见且重要的需求之一。本文将介绍如何在微信小程序中实现音频播放功能,并提供具体的代码示例。一、准备工作
实现微信小程序中的音频播放功能
2023-11-21

微信小程序中视频的显示与隐藏功能

这篇文章主要介绍了微信小程序中视频的显示与隐藏,思路大概是定义一个标记变量,控制视频的播放与暂停,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-11-13

编程热搜

目录