微信小程序 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 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
详解ES6中class的实现原理
Oct 03 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python之PyMongo使用总结
2017/05/26 Python
python生成excel的实例代码
2017/11/08 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
趣味运动会策划方案
2014/06/02 职场文书
接收函
2019/04/22 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
讨论nginx location 顺序问题
2022/05/30 Servers