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

96
遛遛食
2018.10.16 15:12 字数 207

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

持续更新中...

微信小程序