小程序教学十一（媒体组件）

本章主要介绍微信小程序的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全屏下有效

持续更新中...