小程序学习之旅----图片image媒体组件camera、audio、video、live-player、live-pusher

<!--pages/image/image.wxml-->
<text>这是一个image组件</text>
<!-- 
<image src='../../images/0.jpg'></image>
<image src='/images/0.jpg'></image> -->
 <view class="section section_gap" wx:for="{{list}}" wx:for-item="item">
    <view class="section__title">{{item.text}}</view>
    <view class="section__ctn">
      <image  bindtap="preview" style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" data-src="{{src}}" src="{{src}}"></image>
    </view>
  </view>

// pages/image/image.js
Page({

  /**
   * 页面的初始数据
 */
  data: {
    list: [{
      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: '/images/0.jpg'
  } ,


  preview(e){

    console.log(e.target.dataset.src);

    var current = e.target.dataset.src;

    wx.previewImage({
      current: current, // 当前显示图片的http链接
      urls: ['https://pic4.zhimg.com/80/v2-092ca55bea745e0af303e199fe9365a9_hd.jpg','https://pic2.zhimg.com/80/v2-41b41d2cec6dd5933760b42ee62e7d88_hd.jpg'] // 需要预览的图片http链接列表
    })
  }
})

<view class="page-body">
  <view class="page-body-wrapper">
    <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
    <view class="btn-area">
      <button type="primary" bindtap="takePhoto">拍照</button>
    </view>
    <view class="btn-area">
      <button type="primary" bindtap="startRecord">开始录像</button>
    </view>
    <view class="btn-area">
      <button type="primary" bindtap="stopRecord">结束录像</button>
    </view>
    <view class="preview-tips">预览</view>
    <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
    <video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
  </view>
</view>

Page({
  onLoad() {
    this.ctx = wx.createCameraContext()
  },
  takePhoto() {
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  startRecord() {
    this.ctx.startRecord({
      success: (res) => {
        console.log('startRecord')
      }
    })
  },
  stopRecord() {
    this.ctx.stopRecord({
      success: (res) => {
        this.setData({
          src: res.tempThumbPath,
          videoSrc: res.tempVideoPath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

<view class="page">
  
  <view class="page__bd">
    <view class="section section_gap">
      <audio src="{{current.src}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" bindplay="audioPlayed" bindtimeupdate="audioTimeUpdated" controls></audio>
    </view>
  </view>

  <view class="section section_gap">
    
    <view class="body-view">
      <button bindtap="playAudio">播放</button>
    </view>
  </view>

  <view class="section section_gap">
   
    <view class="body-view">
      <button bindtap="pauseAudio">暂停</button>
    </view>
  </view>

  <view class="section section_gap">
    <text class="section__title">进度</text>
    <view class="body-view">
      <slider bindchange="timeSliderChanged" left-icon="cancel" right-icon="success_no_circle"/>
    </view>
  </view>
  <view class="section section_gap">
    <text class="section__title">播放速率</text>
    <view class="body-view">
      <slider min="1" max="10" bindchange="playbackRateSliderChanged" left-icon="cancel" right-icon="success_no_circle"/>
    </view>
  </view>
</view>

Page({
  data: {
    current: {
      poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
      name: '此时此刻',
      author: '许巍',
      src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
    },
    audioAction: {
      method: 'pause'
    }
  },
  audioPlayed: function (e) {
    console.log('audio is played')
  },

  //获取音频播放的总时间
  audioTimeUpdated: function (e) {

    this.duration = e.detail.duration;     /*获取音频的播放时间  s*/
  },

  timeSliderChanged: function (e) {

    if (!this.duration)
      return;

    var time = this.duration * e.detail.value / 100;    //总时间诚意百分比

    this.setData({         //改变音频的播放时间
      audioAction: {
        method: 'setCurrentTime',
        data: time
      }
    });
  },
  playbackRateSliderChanged: function (e) {    /*改变音频播放的速率*/

    this.setData({
      audioAction: {
        method: 'setPlaybackRate',
        data: e.detail.value
      }
    })

  },

  playAudio: function () {
    this.setData({
      audioAction: {
        method: 'play'
      }
    });
  },
  pauseAudio: function () {
    this.setData({
      audioAction: {
        method: 'pause'
      }
    });
  }
})