当前位置:主页 > 小程序开发 > API >

微信小程序视频接口 wx.chooseVideo

栏目:API 来源: 微信小程序开发网 阅读: 2017-03-23
  在微信小程序里面用到视频的小程序其实不多,但是,有很多专业的小程序也会用到视频,因为,视频相比其它媒介对用户来说更吸引人,更能体会出小程序的专业性来,有的小程序甚至还提供了上传视频的功能,当然,这样的小程序不多。

  本教程主要介绍视频接口wx.chooseVideo的使用,我们的实例是:

  要求:在前端视图层要有一个上传视频的按扭,如果下图所示。

添加视频

  当用户上传完视频后,就会在上传的这个按扭(类似一个div模型盒子)里面显示这个视频。

要求分析:

  上面这个上传视频的按扭,在没有视频时显示上传视频按扭,但是,当有视频时显示上传的视频,也就是在视图层有用一个判断就可以实现。

  判断如果没有视频就显示一个上传视频的按扭,如果有视频则显示视频。
 
       <block wx:if="{{src === ''}}">
          <view class="image-plus image-plus-nb" bindtap="chooseVideo">
            <view class="image-plus-horizontal"></view>
            <view class="image-plus-vertical"></view>
          </view>
          <view class="image-plus-text">添加视频</view>
        </block>
        <block wx:if="{{src != ''}}">
          <video src="{{src}}" class="video"></video>
        </block>


  上面的代码是判断的是src也就是视频路径是不是空,如果是空则提示上传视频,否则,调用视频组件<video src="{{src}}"><video/>来显示视频。

  这里的src是在video.js里面定义的:

   chooseVideo: function () {
    var that = this
    wx.chooseVideo({
      success: function (res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  }

  也就是在点击上传视频后在这个js文件里面获取一个对象res在这个对象面就保存了上传的视频文件临时路径tempFilePath,这个对象如下所示:

  Object {errMsg: "chooseVideo:ok", tempFilePath: "wxfile://tmp_791024835o6zAJs2BTXY6_JZ5VemhWIHdiQaA1490249969898.mp4"}

  这个非常类似上传图片接口wx.chooseImage媒体获取到的临时图片路径一样。

  然后,通过函数setData({})设置上传后的视频文件,这样在前端视图层就可以显示上传的视频了,这跟选择图片原理完全一样,只是上传格式不同。