当前位置:主页 > 小程序开发 > API >

微信小程序发送弹幕完全实例

栏目:API 来源: 微信小程序开发网 阅读: 2017-03-23
  我们现在会看到很多视频网站上面有很多的发送弹幕功能的网站,例如,b站上面每个视频都可以发送弹幕,所谓弹幕就是在用户在看视频时,向幕屏幕发送自己的评论,这些评论会在您发布的那一刻就在视频上面显示用户的评论,这样的好处是用户可以跟其它用户在看视频时进行交流,但是,坏处就是想独自看视频时被一大堆弹幕给挡住了,有时候看到这些评论就会烦感,我是非常不喜欢用弹幕的,除非就是在娱乐时不是真心在看这个视频时可以发一发弹幕跟用户交流交流,当然,本教程不是在讨论弹幕的好坏,而是如何在微信小程序里面实现弹幕。

  随着微信小程序不断的普通,弹幕必将会成为视频小程序中的一个重要功能,以下是通过接创建视频背景上下文本的接口wx.createVideoContext和视频组件来实现一个弹幕功能。

最终效果是:

弹幕视频

实现代码:

//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"   enable-danmu danmu-btn controls></video>
  <view class="btn-area">
    <input bindblur="bindInputBlur"/>
    <button bindtap="bindSendDanmu">发送弹幕</button>
  </view>
</view>

//video.js
Page({
  onReady: function (res) {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  inputValue: '',
  bindInputBlur: function(e) {
    this.inputValue = e.detail.value
  },
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: "red"
    })
  }
})

代码解释:

  这里使用了腾讯给我们提供的一个视频,如果在实际的开发微信小程序时,可以使用一个上传视频按扭,让用户上传视频(如果需要的话),这个在“视频接口”教程里面有详细的讲解。

发弹幕实现原理:

  在前端定义一个视频组件<video id="myVideo" src="" />,注意这里面的定义的veideoid,即id="myVideo"。

  然后,通过接口wx.createVideoContext("myVideo")创建视频上下文videoContext 对象,也就是用这个接口通过id(myVideo)邦定这个视频组件,即在接口定义的内容就跟视频组件帮定在一起了,因为,这个视频组件上面是一个视频,相当接口里面的内容与视频邦定在一起了,这样在接口里面的内容,通过videoContext对象里面的方法,就可以把文本信息发送到视频上面。

  就像一根水管(类似接口wx.createVideoContext)连接到了水池(水池类似视频),这样水(水类似我们发的弹幕内容)就可以通过水管把水引流到水池道理完全一样。

   <input bindblur="bindInputBlur"/> :这个是输入的内容框,只是在微信小程序里面使用了邦定输入事件来处理输入的内容。

  通过函数bindInputBlur就可以获取到用户在输入框输入的弹幕内容e.detail.value。

  然后,通过<button bindtap="bindSendDanmu">发送弹幕</button>按扭,绑定的事件bindSendDanmu来发送用户办入的内容e.detail.value。

  在对象videoContext里面,有一个发送弹幕的方法sendDanmu,个方法里面有两个属性 text, color。

  text:发送的弹幕内容

  color:弹幕的颜色

  这样当点击按扭后就把一个弹幕发送到了视频上面。