<view class="page-body">
  <view class="page-section tc">
    <video id="myVideo" src="https://bmxy.ofilm.com/userfiles/erweima/mp4/xinxi720P/xinxi.m3u8" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>


    <view class="weui-cells">
      <view class="weui-cell weui-cell_input">
        <view class="weui-cell__hd">
          <view class="weui-label">弹幕内容</view>
        </view>
        <view class="weui-cell__bd">
          <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
        </view>
      </view>
    </view>
    <view class="btn-area">
      <button bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button>
      <button bindtap="bindPlay" class="page-body-button" type="primary">播放</button>
      <button bindtap="bindPause" class="page-body-button" type="primary">暂停</button>
    </view>
  </view>
</view>

function getRandomColor () {

  const 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({

  onReady: function (res) {

    this.videoContext = wx.createVideoContext('myVideo')

  },

  inputValue: '',

    data: {

    src: '',

    danmuList:

      [{

        text: '第 1s 出现的弹幕',

        color: '#ff0000',

        time: 1

      },

      {

        text: '第 3s 出现的弹幕',

        color: '#ff00ff',

        time: 3

      }]

    },

  bindInputBlur: function(e) {

    this.inputValue = e.detail.value

  },

  bindSendDanmu: function () {

    this.videoContext.sendDanmu({

      text: this.inputValue,

      color: getRandomColor()

    })

  },

  bindPlay: function() {

    this.videoContext.play()

  },

  bindPause: function() {

    this.videoContext.pause()

  },

  videoErrorCallback: function(e) {

    console.log('视频错误信息:')

    console.log(e.detail.errMsg)

  }

})

@import "../lib/weui.wxss";

.weui-cells{

  margin-top: 80rpx;

  text-align: left;

}

.weui-label{

  width: 5em;

}

.page-body-button {

  margin-bottom: 30rpx;

}