我的想法：我要用 danmu-list 做一个动态的视频弹幕

思路：我通过 bindtimeupdate 这个事件，一直在监听当前视频的进度，来获取弹幕的发送时间，从而把弹幕显示在视频上，我中间给了2s的延迟，在我监听到当前视频进度秒的时候，会向上取整，并且加2s作为弹幕在视频上的显示时间。让用户输入文字后，点击发送，我会构建一个数组，对 danmu-list 进行setdata，重新渲染页面。

问题：这样的写法在模拟器上没有任何问题，但是在手机端会出先失效、混乱的问题

手机设备：Android 华为 V9

手机端出现的问题：

1：当这个视频之前没有任何弹幕的时候，在手机端进行操作，可以把输入的弹幕显示在视频上，但是每次显示最新一条的时候，会把上一条的弹幕内容带上。

2：当这个视频存在弹幕的时候，也就是本身具有弹幕列表了，然后再进行操作，这个时候手机端输入文字，不能显示到视频列表中，只要把视频暂停后，然后拖回之前的时间，再进行一次播放，方可显示出来。

猜想：

我自己调试了很长时间，做了好几种假设，比如是否是我延迟时间给的太短，是否是数组的顺序不对。但是我发现都不是这些问题，最后，我再想，是否是setdata后 setdata进行页面渲染的时候，在手机端因为计算能力没电脑那么强，所以渲染的时间比较长，会让我错过弹幕该显示的时间点。如果是这个样子，我想请求官方告诉我，小程序setdata后 在自己渲染页面的时候会使用多久的时间才能完全渲染完，这样我就知道我改如何去控制用户在一定的时间范围内，才能发送弹幕。

代码：

wxml

<view class="vid">

<video class='videos' id="myVideo" src='{{ImageServiceUrl+param.url}}' controls='controls' autoplay="true" poster="{{ImageServiceUrl+param.pic}}" objectFit="fill" danmu-list="{{danmu_list}}" danmu-btn="true" enable-danmu="true" bindtimeupdate="VideoChange"></video>

</view>

<scroll-view scroll-y="true" class='list' style='height:{{windowHeight-260}}px;' scroll-into-view="{{Toview}}">

<view class='list1' id='ID-{{index}}' wx:for="{{danmu_list}}" wx:key="itme">

<text style='color:#9b9b9b;'>{{item.name}}-{{item.time}}:</text>

<text style='color:#000;'>{{item.text}}</text>

</view>

</scroll-view>

<view class='inps'>

<form bindreset="formReset">

<input class='skl' id='DanMuContentID' placeholder='说点什么吧。。' adjust-position="false" bindinput="CompleteContent" confirm-type="发送" ></input>

<button class='send' wx:if="{{!user_info}}" bindgetuserinfo='SendContentH' open-type="getUserInfo" form-type='reset'>发送</button>

<button class='send' wx:if="{{user_info}}" bindtap='SendContentQ' form-type='reset' >发送</button>

</form>

</view>

JS：

// pages/video/play_video.js

const app = getApp()

Page({

    /**

       * 页面的初始数据

       */

    data: {

    ImageServiceUrl: app.globalService.ImageServiceUrl,

    MaxCount:1,

    ContentTime: 0,

    },

    /**

       * 生命周期函数--监听页面加载

       */

    onLoad: function (options) {

    var that = this;

    console.log(options);

    var pt_user = wx.getStorageSync('pt_user');

    var user_info = wx.getStorageSync('user_info');

    wx.setNavigationBarTitle({

    title: pt_user.hospital_title,

    });

    var CurrentTime = Date.parse(new Date());

    var CurrentContentTime = CurrentTime / 1000;

    wx.getSystemInfo({

    success(Winres) {

    wx.request({

    url: app.globalApiList.SelectDanMu,

    data:{'id':options.id,'type':options.type},

    success:function(res){

    that.setData({

    windowHeight: Winres.windowHeight,

    param: options,

    user_info: user_info,

    Toview: 'ID-' + res.data.data.MaxCount,

    MaxCount: res.data.data.MaxCount,

    ContentTime: CurrentContentTime,

    danmu_list: res.data.data.list,

    })

    }

    })

    }

    })

    var videoContext = wx.createVideoContext('myVideo');

    //videoContext.requestFullScreen();

    },

    /**

         * 发送弹幕-获取信息

         */

    SendContentH:function(e){

    app.SetUserInfo(e.detail.userInfo);

    this.SendContentApi(e.detail.userInfo);

    },

    SendContentQ:function(){

    this.SendContentApi(this.data.user_info);

    },

    /**

         * 发送内容与后台交互

         */

    SendContentApi:function(userinfo){

    if (this.globalData.user_text){

    var ContentTime = this.data.ContentTime;

    var CurrentTime = Date.parse(new Date()) / 1000;

    var DiffentTime = CurrentTime - ContentTime;

    if (DiffentTime > 3){

    var pt_user = wx.getStorageSync('pt_user');

    var MaxTime = this.globalData.MaxTime;

    var color_key = Math.floor(Math.random() * app.globalData.color.length);

    var danmu_list = this.data.danmu_list;

    var MaxCount = this.data.MaxCount + 1;

    var danmu = {

    text: this.globalData.user_text,

    color: app.globalData.color[color_key].number,

    time: MaxTime,

    name: userinfo.nickName

    };

    danmu_list.push(danmu);

    this.setData({

    user_info: userinfo,

    danmu_list: danmu_list,

    Toview: 'ID-' + MaxCount,

    MaxCount: MaxCount,

    });

    app.HideNoticeMessage(MaxTime.toString());

    console.log(this.data.danmu_list);

    wx.request({

    url: app.globalApiList.SaveDanMu,

    data:{

    text: this.globalData.user_text,

    name: userinfo.nickName,

    type:this.data.param.type,

    userid:pt_user.user_id,

    id:this.data.param.id,

    color: app.globalData.color[color_key].number,

    time: MaxTime,

    },

    success:function(res){

    }

    })

    }else{

    app.HideNoticeMessage('请'+DiffentTime+'秒后再进行发言');

    }

    }else{

    app.HideNoticeMessage('说点什么嘛~');

    }

    },

    /**

         * 文字输入完毕的时候

         */

    CompleteContent:function(res){

    this.globalData.user_text=res.detail.value;

    },

    globalData: {

    user_text:null,

    videoObject:null,

    MaxTime:0,

    },

    /**

         * 视频播放进度变化时出发

         * 间隔 250ms

         */

    VideoChange:function(res){

    this.globalData.MaxTime = Math.ceil(res.detail.currentTime) + 3;

    },

    /**

         * 重置表单

         * 其实我搞不懂什么都不需要写

         * 为什么不可以用JS直接调用某个方法呢？

         * 很尴尬

         * 感觉像是要去某一个地方，但是我必须要绕一个圈子才能到达

         * 或许这是因为某些机制

         * 但是希望微信可以尽快让开发者别再绕来绕去

         * 其实我本意只是想清空input里面的值

         * 但是走这么多的步骤。

         */

    formReset:function(res){

    }

})