Home > php教程 > PHP开发 > WeChat applet vidao implements video playback and barrage functions

WeChat applet vidao implements video playback and barrage functions

高洛峰
Release: 2016-12-08 09:52:55
Original
3167 people have browsed it

Implementation of WeChat applet vidao video playback and barrage functions.

vidao

The official document I see now does not have the danmu (barrage) attribute. It existed before, but now this attribute can still take effect. To control the status of the video, you can get an object instance based on the unique id of the video tag. The video component does not have the action attribute and cannot be controlled through action.

.wxml

<view class="section tc">
 <video src="{{src}}"  controls ></video>
 <view class="btn-area">
  <button bindtap="bindButtonTap">获取视频</button>
 </view>
</view>
 
<!--
 danmu-list:弹幕列表
 enable-danmu:是否显示弹幕
 danmu-btn:弹幕按钮
 controls:是否显示视频控件,并没有什么用
 -->
<view class="section tc">
 <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
 <view class="btn-area">
  <button bindtap="bindButtonTap">获取视频</button>
  <input bindblur="bindInputBlur"/>
  <button bindtap="bindSendDanmu">发送弹幕</button>
 </view>
</view>
 
<!-- 现在的video就下面三个属性 -->
<video src="" binderror="" hidden></video>
Copy after login

.js

function getRandomColor () {
 let rgb = []
 for (let i = 0 ; i < 3; ++i){
  let color = Math.floor(Math.random() * 256).toString(16)
  color = color.length == 1 ? &#39;0&#39; + color : color
  rgb.push(color)
 }
 return &#39;#&#39; + rgb.join(&#39;&#39;)
}
 
Page({
 onReady: function (res) {
  this.videoContext = wx.createVideoContext(&#39;myVideo&#39;)
 },
 inputValue: &#39;&#39;,
  data: {
    src: &#39;&#39;,
  danmuList: [
   {
    text: &#39;第 1s 出现的弹幕&#39;,
    color: &#39;#ff0000&#39;,
    time: 1
   },
   {
    text: &#39;第 3s 出现的弹幕&#39;,
    color: &#39;#ff00ff&#39;,
    time: 3
   }
  ]
  },
 bindInputBlur: function(e) {
  this.inputValue = e.detail.value
 },
  bindButtonTap: function() { //视频下载
    var that = this
    wx.chooseVideo({
      sourceType: [&#39;album&#39;, &#39;camera&#39;],
      maxDuration: 60,
      camera: [&#39;front&#39;,&#39;back&#39;],
      success: function(res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },
 bindSendDanmu: function () {
  this.videoContext.sendDanmu({
   text: this.inputValue,
   color: getRandomColor()
  })
 },
  videoErrorCallback: function(e) {
   console.log(&#39;视频错误信息:&#39;);
   console.log(e.detail.errMsg);
  }
})
Copy after login

Effect

WeChat applet vidao implements video playback and barrage functions


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template