小程序视频播放与弹幕发送

下面为大家整理了自己写的小项目，视频的播放与暂停以及弹幕的相关操作。

video.wxml

<!--pages/video/video.wxml-->
<view class="video_container">
<video id="myvideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls='true' danmu-btn='true' enable-danmu='true' danmu-list='{{danmulist}}'></video>
<button class="btn" bindtap='playVideo'>播放视频</button>
<button class="btn" bindtap='stopVideo'>暂停视频</button>
<button class="btn" bindtap='seekVideo'>跳转到一百秒</button>
</view>
<form>
<view class="danmuGrop">
  <input type="text" class="danmuinput" placeholder='说点什么吧~~~' bindblur='getInput'></input>
  <button class="sendDanmu" bindtap='sendDanmu' form-type='reset'>发送</button>
</view>
</form>

video.wxss

/* pages/video/video.wxss */
.video_container{
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 20px 0;
}

.btn{
  width: 90%;
  margin-top:20rpx;
}

.danmuGrop{
  margin-top:0rpx;
  display: flex;
}

.danmuinput{
  border: solid 1px #ccc;
  margin-left: 20rpx;
  height: 85rpx;
  line-height: 80rpx;
  font-size: 35rpx;
  padding-left: 20rpx;
  border-radius: 10rpx;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  width: 70%;
}

.sendDanmu{
  width: 20%;
  margin:0px;
  background-color: #0f0;
  color: white;
  border-top-left-radius:0px;
  border-bottom-left-radius: 0px; 
  height: 88rpx;
}

video.js

// pages/video/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 ? ('0' + color) : color;
    rgb.push(color)
  }
  return "#" + rgb.join("");
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    danmulist:[{
      text:"这是第一条弹幕",
      time:1,
      color:"#f00"
    },{
        text: "这是第二条弹幕",
        time:6,
        color: "#0f0"
    },{
        text: "这是第三条弹幕",
        time:3,
        color: "#00f"
    }],
    danmu:"default"
  },
  onReady:function(){
    this.videoContext = wx.createVideoContext("myvideo");
    console.log(this.videoContext);
  },
  playVideo:function(){
     this.videoContext.play();
  },
  stopVideo:function(){
    this.videoContext.pause();
  },

  // 发送弹幕
  sendDanmu:function(){
     this.videoContext.sendDanmu({
        text:this.data.danmu,
        color: getRandomColor()
     })
  },
  seekVideo:function(){
    this.videoContext.seek(100);
  },

  getInput:function(e){
     console.log(e.detail.value)
     this.setData({
       danmu: e.detail.value
     });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

效果图