微信小程序 媒体组件

附上官方开放文档：https://developers.weixin.qq.com/miniprogram/dev/component/audio.html

1. audio音频组件
   audio组件需要拥有唯一的id，根据id使用wx.createAudioContext(‘AudioID’)创建音频播放环境
   

audio组件返回错误码

示例：

//WXML文件
<!--audio-->
<audio id="myAudio" src="{{src}}" poster="{{poster}}" name="{{name}}" author="{{author}}" controls ></audio>
<view class="btn">
  <button type="primary" size="default" bindtap="audioPlay" class="btn1">播放</button>
  <button type="primary" size="default" bindtap="audioPause" class="btn2">暂停</button>
  <button type="primary" size="default" bindtap="audioRestart" class="btn3">重播</button>
</view>

//JS文件
const app = getApp()
Page({
  onReady:function(e){
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  data: {
    poster:'../shouhou.jpg',
    name:'守候',
    author:'船长',
    src:'../shouhou.mp3',
  },
  audioPlay:function(){
    this.audioCtx.play()
  },
  audioPause:function(){
    this.audioCtx.pause()
  },
  audioRestart:function(){
    this.audioCtx.seek(0)
  }
})

//WXSS文件
.btn{
  display: flex;
  flex-direction: row;
  align-items: center;
}

效果图：

2. image图片组件
   支持jpg、png、SVG格式
   
   
   示例：

//WXML文件
<!--image-->
<view>
  <text>image</text>
  <text>图片</text>
</view>
<view>
  <view wx:for="{{array}}" wx:for-item="item">
    <view class="section_text">{{item.text}}</view>
    <view class="section_img">
      <image style=" backgroup-color:#eeeeee;" mode="{{item.mode}}" src="{{imgsrc}}"></image>
    </view>
  </view>
</view>

//JS文件
const app = getApp()
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 right',
      text: 'top right：不缩放图片，只显示图片的右上边区域'
    }, {
      mode: 'bottom right',
      text: 'bottom right：不缩放图片，只显示图片的右下边区域'
    }],
    imgsrc: '../flower.jpg',
  },
})

3. video视频组件
   和audio组件一样根据id使用wx.createVideoContext(‘VideoID’)创建视频播放环境
   
   示例：

//WXML文件
<!--video-->
<view class="video">
  <video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" id="myVideo" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
</view>
<button bindtap="bindBtnTap">获取视频</button>
<input bindblur="bindInputBlur" placeholder="在此输入弹幕内容"></input>
<button bindtap="bindSendDanmu">发送弹幕</button>

//JS文件
const app = getApp()
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:function(e){
    this.videoContext = wx.createVideoContext('myVideo')
  },
  data: {   
    danmuList:[
      {text:'这是第一条弹幕',color:'#ff0000',time:1},
      { text: '这是第二条弹幕', color: '#ff00ff', time: 3}
    ]
  },
  bindInputBlur:function(e){
    this.inputValue = e.detail.value
  },
  bindSendDanmu:function(){
    this.videoContext.sendDanmu({
      text:this.inputValue,
      color:getRandomColor()
    })
  },
  bindBtnTap: function () {
    var that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: ['front', 'back'],
      success: function (res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  }
})

//WXSS文件
.video{
  display: flex;
  flex-direction: column;
  align-items: center;
}

效果如下，可以发弹幕哦