1. 程式人生 > >微信小程式新增視訊video元件

微信小程式新增視訊video元件

  • 小程式視訊元件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.播放本地視訊</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) } })

來自 指令碼之家