评论

video & audio组件

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

前言

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

video介绍

video使用

对于标签怎么用上一篇已经讲过了!

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代码

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 接口

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

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

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

2 个评论

  • H.
    H.
    2019-03-22

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

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

      皮?

      2019-03-22
      回复
  • x_Qiang
    x_Qiang
    2019-03-20

    ~~~~~

    2019-03-20
    赞同
    回复
登录 后发表内容