小程序十：媒体组件

Posted 2020-08-21

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:

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="http://qqma.tingge123.com:823/mp3/2015-06-13/1434188181.mp3" action="{{action}}" controls loop></audio>  
  
<button type="primary" bindtap="audioPlay">播放</button>  
<button type="primary" bindtap="audioPause">暂停</button>  
<button type="primary" bindtap="audioPlaybackRateSpeedUp">调为2倍速</button>  
<button type="primary" bindtap="audioPlaybackRateNormal">调为1倍速</button>  
<button type="primary" bindtap="audioPlaybackRateSlowDown">调为0.5倍速</button>  
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>  
<button type="primary" bindtap="audiostart">回到开头</button>  

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:

<view class="page">  
  <view class="page__hd">  
    <text class="page__title">image</text>  
    <text class="page__desc">图片</text>  
  </view>  
  <view class="page__bd">  
    <view class="section section_gap" wx:for-items="{{array}}" wx:for-item="item">  
      <view class="section__title">{{item.text}}</view>  
      <view class="section__ctn">  
        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>  
      </view>  
    </view>  
  </view>  
</view>  

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:

<view class="section tc">  
    <video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback"></video>  
</view>  
  
<view class="section tc">  
    <video src="{{src}}"></video>  
    <view class="btn-area">  
        <button bindtap="bindButtonTap">获取视频</button>  
    </view>  
</view>  

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);  
    }  
})