微信小程序 - 发送视频弹幕

微信小程序 - 发送视频弹幕

 

微信小程序官方文档提供了发送视频弹幕的功能，参照其功能做了一些改动，实现可发送用户自定义颜色的弹幕。

 

function getRandomColor() {
    var rgb = [];
    for (var i = 0; i < 3; ++i) {
        var color = Math.floor(Math.random() * 256).toString(16);
        color = color.length == 1 ? '0' + color : color;
        rgb.push(color);
    }
    return '#' + rgb.join('');
}
Page({
    inputValue: '',
    data: {
        isRandomColor: true,
        src: '',
        numberColor: "#ff0000",
        danmuList: [{
            text: '第 1s 出现的红色弹幕',
            color: '#ff0000',
            time: 1
        }, {
            text: '第 2s 出现的绿色弹幕',
            color: '#00ff00',
            time: 2
        }]
    },
    onLoad: function onLoad() {
        var _this = this;
        wx.getSystemInfo({
            success: function success(res) {
                // video标签默认宽度300px、高度225px
                var windowWidth = res.windowWidth;                
                var videoHeight = 225 / 300 * windowWidth;
                _this.setData({
                    videoWidth: windowWidth,
                    videoHeight: videoHeight
                });
            }
        });
    },
    onReady: function onReady(res) {
        this.videoContext = wx.createVideoContext('myVideo');
    },
    onShow: function onShow() {
        var _this = this;
        wx.getStorage({
            key: 'numberColor',
            success: function success(res) {
                _this.setData({
                    numberColor: res.data
                });
            }
        });
    },
    bindInputBlur: function(e) {
        this.inputValue = e.detail.value;
    },
    bindSendDanmu: function() {
        if (this.data.isRandomColor) {
            var color = getRandomColor();
        } else {
            var color = this.data.numberColor;
        }
        this.videoContext.sendDanmu({
            text: this.inputValue,
            color: color
        });
    },
    videoErrorCallback: function(e) {
        console.log('视频错误信息:');
        console.log(e.detail.errMsg);
    },
    switchChange: function(e) {
        this.setData({
            isRandomColor: e.detail.value
        }