如何使用小程序媒体组件

<view><audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio></view>
<button type="primary" bindtap="audioPlay" size="mini">播放</button>
<button type="primary" bindtap="audioPause" size="mini">暂停</button>
<button type="primary" bindtap="audio30" size="mini">设置当前播放时间为30秒</button>
<button type="primary" bindtap="audioStart" size="mini" type='warn'>回到开头</button>

Page({
  onReady: function (e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  data: {
    poster: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000001SnFff46yErZ.jpg?max_age=2592000',
    name: 'Wake up!',
    author: 'AAA',
    src: 'http://isure.stream.qqmusic.qq.com/C400000CeOtG4A2fVk.m4a?guid=8598236233&vkey=244CBD2B8FB54437CEEA6EE55F6376D829BF6670E763662CB00F2258EC7E47C521C31C67C761DF114023E637662C5CB2108BFFE7EF41782E&uin=1589&fromtag=66',
  },
  audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
  },
  audio30: function () {
    this.audioCtx.seek(30)
  },
  audioStart: function () {
    this.audioCtx.seek(0)
  }
})

<image src="https://source.unsplash.com/random/1600x900"></image>

<view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
<view class="section__title">{{item.text}}</view>
<image mode="{{item.mode}}" src="https://source.unsplash.com/random/1600x900"></image>
</view>

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：不缩放图片，只显示图片的右下边区域'
    }]
  },
})

<view class="section tc">
  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" enable-danmu danmu-btn controls></video>
  <view class="btn-area">
    <input bindblur="bindInputBlur"/>
    <button bindtap="bindSendDanmu">发送弹幕</button>
  </view>
</view>

function getRandomColor () {
  let rgb = []
  for (let i = 0 ; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}

Page({
  onReady (res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  inputValue: '',
  bindInputBlur (e) {
    this.inputValue = e.detail.value
  },
  bindSendDanmu () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  }
})

<view class="page-body">
    <view class="page-body-wrapper">
      <camera
        flash="{{flash}}"
        device-position="{{position}}"
        binderror="error"
      >
      </camera>
      <text>当前闪光灯状态：{{flash}}</text>
      <view class="btn-area first-btn">
      <view class="btn-area">
        <button type="primary" bindtap="toggleflash">切换闪光灯状态</button>
      </view>
      <button type="primary" bindtap="togglePosition">切换摄像头</button>
      </view>
      <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" class="photo" src="{{src}}"></image>
      <video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
    </view>
</view>

Page({
  onShareAppMessage() {
  },
  data: {
    src: '',
    videoSrc: '',
    position: 'back',
    mode: 'scanCode',
    result: {},
    flash : 'on'
  },
  onLoad() {
    this.ctx = wx.createCameraContext()
  },
  takePhoto() {
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  startRecord() {
    this.ctx.startRecord({
      success: () => {
        console.log('startRecord')
      }
    })
  },
  stopRecord() {
    this.ctx.stopRecord({
      success: (res) => {
        this.setData({
          src: res.tempThumbPath,
          videoSrc: res.tempVideoPath
        })
      }
    })
  },
  togglePosition() {
    this.setData({
      position: this.data.position === 'front'
        ? 'back' : 'front'
    })
  },
  toggleflash() {
    this.setData({
      flash: this.data.flash === 'off'
        ? 'on' : 'off'
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

<view class="btn-area">
  <button type="primary" bindtap="scanCode">扫码</button>
</view>

Page({
  scanCode(){
    wx.scanCode({
      success(res) {
        console.log(res)
      }
    })
  }
})

{result: "https://www.techeek.cn/wx-navigator", charSet: "UTF-8", errMsg: "scanCode:ok", scanType: "QR_CODE", rawData: "aHR0cHM6Ly93d3cudGVjaGVlay5jbi93eC1uYXZpZ2F0b3I="}