第七篇、微信小程序-video組件

主要屬性：

效果圖：

 

ml:

<View>1.播放網絡視頻</View>
<view >
  <video style="width: 100%;height=400px;margin:1px;" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback"></video>
</view>
<View>2.播放本地視頻</View>
<view  style="display: flex;flex-direction: column;">
  <video  style="width: 100%;height=400px;margin:1px;" src="{{src}}"></video>
  <view class="btn-area">
    <button bindtap="bindButtonTap">打開本地視頻</button>
  </view>
</view>

 

js：

Page({
    data: {
        src: ''
    },
    /**
     * 打開本地視頻
     */
    bindButtonTap: function() {
        var that = this
        //拍攝視頻或從手機相冊中選視頻
        wx.chooseVideo({
           //album 從相冊選視頻，camera 使用相機拍攝，默認為：['album', 'camera']
            sourceType: ['album', 'camera'],
            //拍攝視頻最長拍攝時間，單位秒。最長支持60秒
            maxDuration: 60,
            //前置或者后置攝像頭，默認為前后都有，即：['front', 'back']
            camera: ['front','back'],
            //接口調用成功，返回視頻文件的臨時文件路徑，詳見返回參數說明
            success: function(res) {
              console.log(res.tempFilePaths[0])
                that.setData({
                    src: res.tempFilePaths[0]
                })
            }
        })
    },
    /**
     * 當發生錯誤時觸發error事件，event.detail = {errMsg: 'something wrong'}
     */
    videoErrorCallback: function(e) {
      console.log('視頻錯誤信息:')
      console.log(e.detail.errMsg)
    }
})