微信小程序 video组件详解


Posted in Javascript onOctober 25, 2016

主要属性:

微信小程序 video组件详解

效果图:

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

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

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

Javascript 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
微信小程序 form组件详解
Oct 25 #Javascript
微信小程序 icon组件详细及实例代码
Oct 25 #Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 #Javascript
微信小程序  网络请求API详解
Oct 25 #Javascript
微信小程序 progress组件详解及实例代码
Oct 25 #Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 #Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 #Javascript
You might like
php实现购物车功能(上)
2020/07/23 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
js轮播图代码分享
2016/07/14 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
vue兄弟组件传递数据的实例
2018/09/06 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
js编写简易的计算器
2020/07/29 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
Python代码的打包与发布详解
2014/07/30 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
大学生简历的个人自我评价
2013/12/04 职场文书
艺术设计专业个人求职信范文
2013/12/11 职场文书
销售顾问岗位职责
2014/02/25 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
学校食堂标语
2014/10/06 职场文书
班主任培训研修日志
2015/11/13 职场文书