微信小程序 video组件详解
网络编程 2021-07-04 20:01www.168986.cn编程入门
这篇文章主要介绍了微信小程序 video组件详解的相关资料,需要的朋友可以参考下
主要属性
效果图
ml:
<View>1.播放网络视频</View> <view > <video style="width: 100%;height=400px;margin:1px;" src="http://wxsnsdy.tc.qq./105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&id=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'], //接口调用成功,返回视频文件的临时文件路径,详见返回参数说明 suess: 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) } })
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程