微信小程序添加視頻video組件

發表時(shí)間：2021-4-30

發布人(rén)：融晨科技

浏覽次數：69

小程序視頻組件video标簽

wxml

<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.播放本地(dì / de)視頻</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">打開本地(dì / de)視頻</button>
 </view>
</view>1
2
3
4
5
6
7
8
9
10
11

Page({
 data: {
  src: ''
 },
 /**
  * 打開本地(dì / de)視頻
  */
 bindButtonTap: function() {
  var that = this
  //拍攝視頻或從手機相冊中選視頻
  wx.chooseVideo({
   //album 從相冊選視頻，camera 使用相機拍攝，默認爲(wéi / wèi)：['album', 'camera']
   sourceType: ['album', 'camera'],
   //拍攝視頻最長拍攝時(shí)間，單位秒。最長支持60秒
   maxDuration: 60,
   //前置或者後置攝像頭，默認爲(wéi / wèi)前後都有，即：['front', 'back']
   camera: ['front','back'],
   //接口調用成功，返回視頻文件的(de)臨時(shí)文件路徑，詳見返回參數說(shuō)明
   success: function(res) {
    console.log(res.tempFilePaths[0])
    that.setData({
     src: res.tempFilePaths[0]
    })
   }
  })
 },
 /**
  * 當發生錯誤時(shí)觸發error事件，event.detail = {errMsg: 'something wrong'}
  */
 videoErrorCallback: function(e) {
  console.log('視頻錯誤信息:')
  console.log(e.detail.errMsg)
 }
})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34