微信小程序添加视频video组件
         
          
        发表时间:2021-4-30
        发布人:葵宇科技
        浏览次数:106
       
          
		  - 小程序视频组件video标签 
  
 
<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>
Page({
 data: {
  src: ''
 },
 /**
  * 打开本地视频
  */
 bindButtonTap: function() {
  var that = this
  
  wx.chooseVideo({
   
   sourceType: ['album', 'camera'],
   
   maxDuration: 60,
   
   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)
 }
})
- 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