前言

上一篇是讲的<image>组件，使的我们的小程序中可以添加图片了，这离我们做一个完整的小程序又进了一点（虽然还有很远…），也是非常的好玩，但是需求总是很多的，仅仅有了图片远远不够啊！有时候还需要一些视频，音乐等等，所以今天要讲的就是 <video> 和 <audio> 组件，它们两兄弟可以帮我们实现如上的需求。

video介绍

<video>组件是一个原生组件，原生组件是什么？？这里引一句文档的话：小程序中的部分组件是由客户端创建的原生组件。🆗，因为原生组件的特殊性，所以使用起来要注意一些限制，有哪些限制请见 文档。它的作用就不用多说，可以说是见名只意啊！就是用来插入视频嘛。但是不要小看了它，它真的很强大，微信小程序赋予了它很多的属性，还提供了弹幕哦，只需要一个属性就可以完成弹幕的实现，真的非常走心了！

video使用

对于标签怎么用上一篇已经讲过了！<video>组件也是有默认宽高的，宽度为300px、高度为225px，但是可通过wxss设置宽高。看代码，它基本上支持咱们常用的视频格式，MP4、avi、mov等等。文档很详细哦

wxml代码

<!--代码引用文档，做了一点改动-->
<view class="section tc">
  <video
    id="myVideo"
    src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
    controls  <!--是否显示默认播放控件-->
  ></video>
 </view>

还是放上效果图吧！

我设置了wxss样式的，将宽度变成了100%，所以才有这么大。用起来是不是很简单呢，vdeio的属性这里就不说了，真的太多了，而且都很实用哦，所以还是看文档吧！现在我们的页面有视频了，那来一点音乐吧！

audio介绍

关于这个组件这里只做一个简单的介绍，因为这个组件是个即将被抛弃的孩子，微信小程序官方已经在1.6.0之后不再维护它了，emmm，但是还是可以用，它的作用就是可以帮我们在页面里插入音频，在使用上需要配合js来实现播放和暂停操作。参考文档

audio使用

audio和video的使用差不多，它也是使用src来获取音频的资源信息，只不过它有一些配合js使用的属性，bindplay 当开始/继续播放时触发play事件，bindpause 当暂停播放时触发 pause 事件，当然我们也可以自定义一些方法，然后再通过按钮的点击事件（bindtap）来完成这些操作，引一段官方的实例代码

wxml代码

<audio
  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"
  id="myAudio"
  controls
></audio>

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>

js代码

Page({
  onReady(e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  data: {
  },
  audioPlay() {
    this.audioCtx.play()
  },
  audioPause() {
    this.audioCtx.pause()
  },
  audio14() {
    this.audioCtx.seek(14)
  },
  audioStart() {
    this.audioCtx.seek(0)
  }
})

运行结果

其实还是很不错的，是吧，但是微信小程序团队带来了更加强大的一个接口wx.createInnerAudioContext 。

wx.createInnerAudioContext 接口

这个接口，按照我的理解就是，它没有了<aduio>的外观形式，它提供了很多的js方法，开发者可以高度定制自己的播放器样式，然后使用微信提供的方法来实现播放功能，和其他一些复杂的功能，这是它对于<aduio>一大亮点，就是功能更加强大。关于它的方法参考文档，非常的详细。下面给一段官方的代码

const innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.autoplay = true
innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
innerAudioContext.onPlay(() => {
  console.log('开始播放')
})
innerAudioContext.onError((res) => {
  console.log(res.errMsg)
  console.log(res.errCode)
})

运行后是没有任何的外部形态的，就直接播放，这样的用途，我想的是我们可以做出更多更美观，更符合我们需求的播放器外观来播放。还是很人性化哦

结语

第五篇啦，很开心，这篇其实很多东西其实是文档的搬运工，刚开始嘛，往后一定要写好的文章，立个flag😝希望什么时候能入精选，哈哈哈。还是希望大家给我一点指教，或者反馈啦！