评论

video & audio组件

小程序教程系列第五篇--video组件,请大家多多指教哇,嘻嘻

前言

上一篇是讲的<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😝希望什么时候能入精选,哈哈哈。还是希望大家给我一点指教,或者反馈啦!

最后一次编辑于  08-04  
点赞 6
收藏
评论

2 个评论

  • H.
    H.
    03-22

    为什么没有人抢麦?哦,走错房间了

    03-22
    赞同
    回复 1
    • x_Qiang
      x_Qiang
      03-22

      皮?

      03-22
      回复
  • x_Qiang
    x_Qiang
    03-20

    ~~~~~

    03-20
    赞同
    回复