1、案例描述

使用video组件调用视频，并且可以发送弹幕

2、实现过程

2.1、代码展示

• wxml

<!--pages/kj/demo111-template/index.wxml-->
<view class="box">
  <view class="title">视频展示</view>
  <view class="video_box">
  <video id="video_1" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="true" danmu-list="{{danmuList}}" enable-danmu="true" danmu-btn="true"></video>
  </view>
  <view class="danmu_box">
    <text>弹幕内容</text>
    <input class="input_danmu" type="text" placeholder="在这里输入你想要发送的弹幕内容" bindblur="input_danmuneirong"/>
    <button type="primary" bindtap="send_Mydanmu">发送自己写的弹幕</button>
    <button type="primary" bindtap="send_Navydanmu">发送水军写的弹幕</button>
  </view> 
</view>

• wxss

/* pages/kj/demo111-template/index.wxss */
.video_box{
    display:flex;
    flex-direction: column;
    align-items: center;
}
.danmu_box{
    margin: 20px auto;
    border: 1px solid black;
    padding: 5px 5px;
}
.input_danmu{
    margin: 3px 0px;
    border: 1px solid rgb(219, 217, 217);
    background-color: white;
}

• js

// pages/kj/demo111-template/index.js
function getRandomColor() { //获取随机颜色函数
  let rgb = [] //定义存放RGB三种颜色值分量的数组
  for (let i = 0; i < 3; ++i) { //创建3个2位16进制随机数（1种随机颜色）
    let color = Math.floor(Math.random() * 256).toString(16) //产生0-255之间的16进制随机数
    color = color.length == 1 ? '0' + color : color //将1位16进制数变为2位
    rgb.push(color) //将2位16进制随机数加入数组
  }
  return '#' + rgb.join('') //将3个数组元素连接成颜色值字符串并返回
}
var danmuList = [
  {
    text:"第一条弹幕",
    color:"red"
  },
  {
    text:"第二条弹幕",
    color:"green"
  },
  {
    text:"第三条弹幕",
    color:"#0fff00"
  }
]

Page({
  data: {
    danmuList: danmuList
  },
  onLoad: function(options){
    this.videoCtx = wx.createVideoContext('video_1');
  },
  input_danmuneirong: function(e){
    this.inputValue = e.detail.value;
  },
  send_Mydanmu:function(){
    this.videoCtx.sendDanmu({
      text : this.inputValue,
      color : getRandomColor()
    })
    console.log(getRandomColor())
  },
  send_Navydanmu:function(){
    var i = 0;
    while(danmuList[i] != ''){
        this.videoCtx.sendDanmu(danmuList[i]);
        i++;
    }
  }
})

2.2、结果展示

结果展示.png

3、知识汇总

知识要点.png video视频组件的属性.png video视频组件的属性续表.png 创建视频上下文的api函数.png 视频上下文对象的方法.png 视频上下文对象的方法续表.png 发送弹幕api函数.png 创建随机颜色的方法.png

4、踩坑说明

• 天坑：

//报错信息：
[渲染层网络层错误] Failed to load media https://vkceyugu.cdn.bspapp.com/VKCEYUGU-imgbed/d044a0fb-ae98-4c86-bbdb-1386d044765f.MP4
net::ERR_FAILED 
From server 116.177.243.232(env: Windows,mp,1.05.2108150; lib: 2.7.3)

解决方案：无
论坛就该问题讨论：https://developers.weixin.qq.com/community/develop/doc/000a06db9ac238178d398454356c00

• 产生随机颜色的函数书写
  1、全局函数的格式

function 函数名(){
  函数体；
}

2、join() 方法用于把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的。

arrayObject.join("分隔符号")

3、toString(16)：作用是将十进制数字转换成16进制

• 视频上下文对象ideoContext的主要方法发送弹幕sendDanmu(Object data)中对象有两个值，text（内容），color（颜色）；