美文网首页小程序
微信小程序video组件

微信小程序video组件

作者: 小码哥教育520it | 来源:发表于2016-10-17 16:05 被阅读2444次

23.video 组件
视频
常用属性:


效果图(压缩过):

注意:1.电脑端不能测试拍摄功能只能测试选择视频功能,现在只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tempFilePath,文档写的有点问题。
2.video标签认宽度300px、高度225px,设置宽高需要通过wxss设置width和height。

video.wxml添加代码:

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

video.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)

 }

})

来源:
http://bbs.520it.com/forum.php?mod=viewthread&tid=2496

相关文章

  • 微信小程序video组件

    23.video 组件视频常用属性: video.wxml添加代码: video.js添加代码: 来源:http:...

  • 微信小程序-video组件

    1.基本用法 2.常用属性 duration:指定视频时长(本来视频有5分钟,可以通过这个属性指定为1分钟)单位 ...

  • 微信小程序创建动画

    微信小程序创建动画 本文说下微信小程序的动画创建先看效果图 [video(video-ahQoAtNe-15889...

  • 小程序好文集合

    组件篇 微信小程序:组件实践 整体梳理 微信小程序开发深入解读

  • 微信小程序-canvas压缩图片使用入门

    微信小程序canvas组件官方文档 微信小程序canvas组件官方文档canvas API canvas组件介绍 ...

  • 微信小程序日历组件开发

    # 微信小程序日历组件开发 微信小程序基础知识 微信小程序 框架介绍 组件文档 上述是开发小程序的基本知识。 今天...

  • 小程序教学十一(媒体组件)

    本章主要介绍微信小程序的camera、audio、video等控件及API使用 Camera相机组件 常用属性 注...

  • 微信小程序基础

    微信小程序介绍微信小程序开发工具的使用微信小程序框架文件微信小程序逻辑层微信小程序视图层微信小程序组件介绍微信小程...

  • 微信小程序组件探究和应用

    把玩微信小程序组件 微信小程序把玩《二》:页面生命周期,模块化,数据绑定,view组件 微信小程序把玩《三》:sc...

  • 微信小程序性能优化实践

    历史回顾: 微信小程序自定义组件 - 表格组件来啦 通过微信小程序来实现 “钉钉打卡” 记一次微信小程序项目分包,...

网友评论

    本文标题:微信小程序video组件

    本文链接:https://www.haomeiwen.com/subject/ikfzyttx.html