Detailed explanation of video component of WeChat applet-Mini Program Development-php.cn

Detailed explanation of video component of WeChat applet

高洛峰

Release： 2017-02-20 14:09:47

Original

2160 people have browsed it

This article mainly introduces the relevant information about the detailed explanation of the video component of the WeChat applet. Friends who need it can refer to the

Main attributes:

微信小程序 video组件详解

Effect Picture:

微信小程序 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>

Copy after login

js：

Page({
 data: {
  src: &#39;&#39;
 },
 /**
  * 打开本地视频
  */
 bindButtonTap: function() {
  var that = this
  //拍摄视频或从手机相册中选视频
  wx.chooseVideo({
   //album 从相册选视频，camera 使用相机拍摄，默认为：[&#39;album&#39;, &#39;camera&#39;]
   sourceType: [&#39;album&#39;, &#39;camera&#39;],
   //拍摄视频最长拍摄时间，单位秒。最长支持60秒
   maxDuration: 60,
   //前置或者后置摄像头，默认为前后都有，即：[&#39;front&#39;, &#39;back&#39;]
   camera: [&#39;front&#39;,&#39;back&#39;],
   //接口调用成功，返回视频文件的临时文件路径，详见返回参数说明
   success: function(res) {
    console.log(res.tempFilePaths[0])
    that.setData({
     src: res.tempFilePaths[0]
    })
   }
  })
 },
 /**
  * 当发生错误时触发error事件，event.detail = {errMsg: &#39;something wrong&#39;}
  */
 videoErrorCallback: function(e) {
  console.log(&#39;视频错误信息:&#39;)
  console.log(e.detail.errMsg)
 }
})

Copy after login

Thank you for reading, I hope it can help everyone, thank you for your support of this site!

For more detailed explanations of WeChat applet video components and related articles, please pay attention to the PHP Chinese website!