小程序十：媒体组件

audio

MediaError.code

Action

示例代码：

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

注：image标签认宽度300px、高度225px

mode有12种模式，其中3中是缩放模式，9种是裁剪模式。

缩放模式：

裁剪模式：

示例：

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

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