Introduction aux fonctions de lecture vidéo et de barrage de vidao dans le mini programme WeChat

Cet article présente principalement les informations pertinentes sur le mini programme WeChat vidao pour implémenter les fonctions de lecture vidéo et de barrage. Le code d'implémentation et les rendus d'implémentation sont fournis ici. Les amis dans le besoin peuvent se référer à

WeChat mini. programme vidao Implémentation des fonctions de lecture vidéo et de barrage.

vidao

Le document officiel que je vois maintenant n'a pas l'attribut danmu. Il existait auparavant, mais maintenant cet attribut peut toujours prendre effet. Pour contrôler l'état de la vidéo, vous pouvez obtenir une instance d'objet basée sur l'identifiant unique de la balise vidéo. Le composant vidéo n'a pas d'attribut d'action et ne peut pas être contrôlé par une 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>

.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);
  }
})

Effet

Ce qui précède est tout le contenu de cet article, je J'espère que cela sera utile à tout le monde. L'apprentissage est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Mise en œuvre des boutons de saisie et de réglage dynamique dans le mini-programme WeChat

Roman dans le mini-programme WeChat Implémentation de l'applet de lecture

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!