本章主要介绍微信小程序的camera、audio、video等控件及API使用
Camera相机组件
常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| mode | String | 有效值为 normal, scanCode |
| device-position | String | 前置或后置，值为front, back |
| flash | String | 闪光灯，值为auto, on, off |
| bindstop | EventHandle | 摄像头在非正常终止时触发，如退出后台等情况 |
| binderror | EventHandle | 用户不允许使用摄像头时触发 |
| bindscancode | EventHandle | 在成功识别到一维码时触发，仅在 mode="scanCode" 时生效 |
注意：一个页面只能有唯一一个camera组件
可以通过获取上下文wx.createCameraContext来获取camera,然后调用API的方式来进行拍照，录像操作。
| API | 说明 |
|---|---|
| CameraContext.takePhoto(Object object) | 拍摄照片 |
| CameraContext.startRecord(Object object) | 开始录像 |
| CameraContext.stopRecord(Object object) | 结束录像 |
Audio音频组件
常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| audio | String | 组件唯一标识符 |
| src | String | 要播放音频的资源地址 |
| loop | Boolean | 是否循环播放 |
| controls | Boolean | 是否显示默认控件 |
| poster | String | 控件上的音频封面的图片资源地址 |
| name | String | 默认控件上的音频名字 |
| author | String | 默认控件上的作者名字 |
| binderror | EventHandle | 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code} |
| bindplay | EventHandle | 当开始/继续播放时触发play事件 |
| bindpause | EventHandle | 当暂停播放时触发 pause 事件 |
| bindtimeupdate | EventHandle | 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration} |
| bindended | EventHandle | 当播放到末尾时触发 ended 事件 |
audio默认样式
在1.6.0以后可以通过获取上下文wx.createInnerAudioContext然后调用API的方式来进行Audio音频组件的控制
| API | 说明 |
|---|---|
| InnerAudioContext.play() | 播放 |
| InnerAudioContext.pause() | 暂停。暂停后的音频再播放会从暂停处开始播放 |
| InnerAudioContext.stop() | 停止。停止后的音频再播放会从头开始播放。 |
| InnerAudioContext.seek(number position) | 跳转到指定位置（单位：秒） |
| InnerAudioContext.onCanplay(function callback) | 监听音频进入可以播放状态的事件，但不保证后面可以流畅播放 |
| InnerAudioContext.onPlay(function callback) | 监听音频播放事件 |
| InnerAudioContext.offPlay(function callback) | 取消监听音频播放事件 |
| InnerAudioContext.onPause(function callback) | 监听音频暂停事件 |
| InnerAudioContext.offPause(function callback) | 取消监听音频暂停事件 |
| InnerAudioContext.onStop(function callback) | 监听音频停止事件 |
| InnerAudioContext.offSeeked(function callback) | 取消监听音频完成跳转操作的事件 |
Video视频组件
常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| src | String | 要播放视频的资源地址 |
| initial-time | Number | 指定视频初始播放位置 |
| duration | Number | 指定视频时长 |
| controls | Boolean | 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） |
| autoplay | Boolean | 是否自动播放 |
| loop | Boolean | 是否循环播放 |
| muted | Boolean | 是否静音播放 |
| page-gesture | Boolean | 在非全屏模式下，是否开启亮度与音量调节手势 |
| direction | Number | 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度） |
| show-progress | Boolean | 若不设置，宽度大于240时才会显示 |
| show-fullscreen-btn | Boolean | 是否显示全屏按钮 |
| show-play-btn | Boolean | 是否显示视频底部控制栏的播放按钮 |
| show-center-play-btn | Boolean | 是否显示视频中间的播放按钮 |
| enable-progress-gesture | Boolean | 是否开启控制进度的手势 |
| objectFit | String | 当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖 |
| poster | String | 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效 |
| bindplay | EventHandle | 当开始/继续播放时触发play事件 |
| bindpause | EventHandle | 当暂停播放时触发 pause 事件 |
| bindended | EventHandle | 当播放到末尾时触发 ended 事件 |
| bindtimeupdate | EventHandle | 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次 |
| bindfullscreenchange | EventHandle | 视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal |
| bindwaiting | EventHandle | 视频出现缓冲时触发 |
| binderror | EventHandle | 视频播放出错时触发 |
video默认样式
可以通过获取上下文wx.createVideoContext(‘idName’,’Object this’)然后调用API的方式来进行Video视频组件的控制
1.保存视频需要用户授权：wx.saveVideoToPhotosAlbum
//Video.js文件
wx.saveVideoToPhotosAlbum({
filePath: ’视频的路径’,
success: funcation(res){
//成功保存
},
fail: funcation(err){
//失败 err为失败原因
},
complete: function(){
//完成，对错都会跑到这个函数
}
})
2.拍摄视频或选择视频：wx.chooseVideo
//Video.js文件
wx.chooseVideo({
//album为相册选取，camera为相机拍摄
sourceType: [‘album’,’camera’],
//1.6.0以上才可以使用是否压缩选择的视频文件
compressed: ‘true’,
//最长拍摄时间，单位为秒
maxDuration: ‘60’,
//调用前置摄像头(front)还是后置摄像头(back)
camera: ‘back’,
success: funcation(res){
//拍摄成功
//res.tempFilePath 视频的临时文件路径
//res.duration 视频的时间长度
//res.size 视频的大小
//res.height 视频的高度
//res.width 视频的宽度
},
fail: funcation(err){
//失败 err为失败原因
},
complete: function(){
//完成，对错都会跑到这个函数
}
})
| API | 说明 |
|---|---|
| VideoContext.play() | 播放视频 |
| VideoContext.pause() | 暂停视频 |
| VideoContext.stop() | 停止视频 |
| VideoContext.seek(number position) | 跳转到指定位置（单位：秒） |
| VideoContext.playbackRate(number rate) | 设置倍速播放 |
| VideoContext.requestFullScreen(Object object) | 进入全屏 |
| VideoContext.exitFullScreen() | 退出全屏 |
| VideoContext.showStatusBar() | 显示状态栏，仅在iOS全屏下有效 |
| VideoContext.hideStatusBar() | 隐藏状态栏，仅在iOS全屏下有效 |
持续更新中...
