微信小程序开发（十）小程序媒体组件audio、video、image

audio

Audio音频，通过单词意义就知道是用来破防音频内容的了，比如MP3等；当我们在使用的时候我们要知道audio组件的属性。

属性

id:String类型，作为audio组件的唯一标识。

src:String类型，设置audio组件的播放源。

loop:boolean类型，设置是否循环播放。

controls：boolean类型，是否显示audio的默认控件。

poster：String类型，设置播放资源的封面图，如果想要设置封面图controls必须设置为true。

name：String类型，设置audio上面的默认名称。

author：String类型，设置audio上面作者的名称。

binderror：当发生错误事件时响应。

bindplay：当开始播放或者继续播放触发时响应。

bindpause：当暂停播放触发时响应。

bindtimeupdate：当播放进度发生改变时触发。

bindended：当播放到末尾时触发。

更多audio组件属性可以查阅audio小程序官方文档

代码演示

1.js文件中添加数据源(这里使用官方例子)

data: {
    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',
},

2.注册audio组件

<!--
  poster="xxx" 封面
  name="xxx" 名称
  author="xxx" 作者
  src="xxx" 播放链接
  controls="true" 是否显示默认组件
  loop="false" 是否循环播放
-->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls="true" loop="false"></audio>

3.在模拟器上就可以看到我们的audio组件，并且点击可以进行播放

4.播放监听，我们在注册组件的时候给组件添加了一个id id=“myAudio”，现在我们通过这个id就可以实现对组件的监听操作。

5.在js文件的page中接收id

onReady: function (e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
},

6.添加监听方法

  /**
   * 播放
   */
  audioPlay: function () {
    this.audioCtx.play()
  },
  /**
   * 暂停
   */
  audioPause: function () {
    this.audioCtx.pause()
  },
  /**
   * 跳转到指定播放位置 seek(position)
   */
  audio14: function () {
    this.audioCtx.seek(14)
  },
  /**
   * 重新开始
   */
  audioStart: function () {
    this.audioCtx.seek(0)
  },

7.js文件代码

// miniprogram/pages/index/index.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    name: '此时此刻',
    author: '许巍',
    src: 'http://ws.stream.qqmusic.qq.com/C400003mAan70zUy5O.m4a?guid=3501944320&vkey=F6004C1A0E83E163B6837E623E905097190CFF8645252315854A3E8E478693C27515C6E31297B3F61DC1543300F83A876559D030DC3C9EE2&uin=4770&fromtag=3&r=24000464702044688'
  },
  /**
   * 播放
   */
  audioPlay: function () {
    this.audioCtx.play()
  },
  /**
   * 暂停
   */
  audioPause: function () {
    this.audioCtx.pause()
  },
  /**
   * 跳转到指定播放位置 seek(position)
   */
  audio14: function () {
    this.audioCtx.seek(14)
  },
  /**
   * 重新开始
   */
  audioStart: function () {
    this.audioCtx.seek(0)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("hide  监听页面隐藏....比如从一个页面跳转到另外一个页面");
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("unload  监听页面卸载....关闭当前页面");
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

8.效果图

点击头像的播放按钮可以进行播放，点击下方其他几个按钮则可以进行相关操作；因为演示要截的图太多了，会证明我有水的成分，这里就不截图进行演示了。。。

video

视频播放组件

属性

src：设置播放源

controls:是否显示默认控件

autoplay：是否自动播放

loop：是否循环播放

muted：是否静音播放

因为video的属性比较多，这里就不一一列举了，详情可以查阅小程序video组件官方文档

这里就通过一句简单的代码来进行演示，想要发掘很多的操作就可以按照官方文档来进行操作就行了

<video src="https://www.w3school.com.cn/i/movie.ogg" controls></video>

点击播放就可以进行播放了，如果想像audio一样实现跟多操作就可以查阅官方文档进行操作，这里就不进行过多的演示了。

image

图片显示组件，小程序image组件官方文档

由于图片组件的显示也是很简单粗暴，所以这里同样通过一句代码来进行演示，如果想要实现图片更多操作可以查阅小程序官方文档。

演示：

<!--
  ../ 第一层
  ../../ 第二次
  ../../images/code-cloud-callback-config.png
-->
<image lazy-load="true" src="../../images/code-cloud-callback-config.png"></image>

效果图：

这就是小程序三个媒体组件的简单介绍了~

更多媒体组件的详情查阅小程序官方文档地址