首页 > 编程 > JavaScript > 正文

微信小程序 video组件详解

2019-11-20 08:40:16
字体:
来源:转载
供稿:网友

主要属性:

效果图:

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) }})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表