audio
| 属性名 | 类型 | 默认值 | 说明 |
| action | Object | 控制音频的播放、暂停，播放速率、播放进度的对象，有method和data两个参数 | |
| src | String | 要播放音频的资源地址 | |
| loop | Boolean | false | 是否循环播放 |
| controls | Boolean | true | 是否显示默认控件 |
| poster | String | 默认控件上的音频封面的图片资源地址，如果controls属性值为false则设置poster无效 | |
| name | String | 未知音频 | 默认控件上的音频名字，如果controls属性值为false则设置name无效 |
| author | String | 未知作者 | 默认控件上的作者名字，如果controls属性值为false则设置author无效 |
| binderror | EventHandle | 当发生错误时触发error事件，detail = {errMsg: MediaError.code} | |
| bindplay | EventHandle | 当开始/继续播放时触发play事件 | |
| bindpause | EventHandle | 当暂停播放时触发pause事件 | |
| bindratechange | EventHandle | 当播放速率改变时触发ratechange事件 | |
| bindtimeupdate | EventHandle | 当播放进度改变时触发timeupdate事件，detail = {currentTime, duration} | |
| bindended | EventHandle | 当播放到末尾时触发ended事件 |
MediaError.code
| 返回错误码 | 描述 |
| MEDIA_ERR_ABORTED | 获取资源被用户禁止 |
| MEDIA_ERR_NETWORD | 网络错误 |
| MEDIA_ERR_DECODE | 解码错误 |
| MEDIA_ERR_SRC_NOT_SUPPOERTED | 不合适资源 |
Action
| method | 描述 | data |
| play | 播放 | |
| pause | 暂停 | |
| setPlaybackRate | 调整速度 | 倍速 |
| setCurrentTime | 设置当前时间 | 播放时间 |
示例代码：
action的method属性只能是play、pause、setPlaybackRate、setCurrentTime，用法如下：
index.wxml:
index.js:
Page({
data: {
poster: 'http://pic.pimg.tw/pam86591/1408719752-3322564110_n.jpg',
name: 'Sugar'
author: 'Maroon 5'
},
audioPlay: function () {
this.setData({
action: {
method: 'play'
}
});
},
audioPause: function () {
this.setData({
action: {
method: 'pause'
}
});
},
audioPlaybackRateSpeedUp: function () {
this.setData({
action: {
method: 'setPlaybackRate',
data: 2
}
});
},
audioPlaybackRateNormal: function () {
this.setData({
action: {
method: 'setPlaybackRate',
data: 1
}
});
},
audioPlaybackRateSlowDown: function () {
this.setData({
action: {
method: 'setPlaybackRate',
data: 0.5
}
});
},
audio14: function () {
this.setData({
action: {
method: 'setCurrentTime',
data: 14
}
});
},
audioStart: function () {
this.setData({
action: {
method: 'setCurrentTime',
data: 0
}
});
}
})
image
图片资源
| 属性名 | 类型 | 默认值 | 说明 |
| src | String | 图片资源地址 | |
| mode | String | 'scaleToFill' | 图片裁剪、缩放的模式 |
| binderror | HandleEvent | 当错误发生时，发布到AppService的事件名，事件对象event.detail = { errMsg: 'something wrong' } | |
| bindload | HandleEvent | 当图片载入完毕时，发布到AppService的事件名，事件对象event.detail = {} |
注：image标签认宽度300px、高度225px
mode有12种模式，其中3中是缩放模式，9种是裁剪模式。
缩放模式：
| 模式 | 说明 |
| scaleToFill | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素 |
| aspectFit | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
| aspectFill | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
裁剪模式：
| 模式 | 说明 |
| top | 不缩放图片，只显示图片的顶部区域 |
| bottom | 不缩放图片，只显示图片的底部区域 |
| center | 不缩放图片，只显示图片的中间区域 |
| left | 不缩放图片，只显示图片的左边区域 |
| right | 不缩放图片，只显示图片的右边区域 |
| top left | 不缩放图片，只显示图片的左上边区域 |
| top right | 不缩放图片，只显示图片的右上边区域 |
| bottom left | 不缩放图片，只显示图片的左下边区域 |
| bottom right | 不缩放图片，只显示图片的右下边区域 |
示例：
index.wxml:
index.js:
Page({
data: {
array: [{
mode: 'scaleToFill',
text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
},
{
mode: 'aspectFit',
text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
},
{
mode: 'aspectFill',
text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
},
{
mode: 'top',
text: 'top：不缩放图片，只显示图片的顶部区域'
},
{
mode: 'bottom',
text: 'bottom：不缩放图片，只显示图片的底部区域'
},
{
mode: 'center',
text: 'center：不缩放图片，只显示图片的中间区域'
},
{
mode: 'left',
text: 'left：不缩放图片，只显示图片的左边区域'
},
{
mode: 'right',
text: 'right：不缩放图片，只显示图片的右边边区域'
},
{
mode: 'top left',
text: 'top left：不缩放图片，只显示图片的左上边区域'
},
{
mode: 'top right',
text: 'top right：不缩放图片，只显示图片的右上边区域'
},
{
mode: 'bottom left',
text: 'bottom left：不缩放图片，只显示图片的左下边区域'
},
{
mode: 'bottom right',
text: 'bottom right：不缩放图片，只显示图片的右下边区域'
}],
src: '../../resources/cat.jpg'
},
imageError: function(e) {
console.log('image3发生error事件，携带值为', e.detail.errMsg)
}
})
video
视频播放器
| 属性名 | 类型 | 默认值 | 说明 |
| hidden | Boolean | false | 设置视频的显示/隐藏，hidden值为true表示隐藏，值为false表示显示 |
| src | String | 要播放视频的资源地址 | |
| binderror | EventHandle | 当发生错误时触发error事件，event.detail = { errMsg: 'something wrong' } |
video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。
示例代码：
index.wxml:
index.js:
Page({
data:{
src:""
},
bindButtonTap:function(){
var that = this;
wx.chooseVideo({
sourceType:['album','camera'],
maxDuration:60,
camera:['front','back'],
success:function(res){
that.setData({
src:res.tempFilePath
})
}
})
},
videoErrorCallback: function (e) {
console.log('视频错误信息:');
console.log(e.detail.errMsg);
}
})
登录 | 立即注册