我的想法:我要用 danmu-list 做一个动态的视频弹幕
思路:我通过 bindtimeupdate 这个事件,一直在监听当前视频的进度,来获取弹幕的发送时间,从而把弹幕显示在视频上,我中间给了2s的延迟,在我监听到当前视频进度秒的时候,会向上取整,并且加2s作为弹幕在视频上的显示时间。让用户输入文字后,点击发送,我会构建一个数组,对 danmu-list 进行setdata,重新渲染页面。
问题:这样的写法在模拟器上没有任何问题,但是在手机端会出先失效、混乱的问题
手机设备:Android 华为 V9
手机端出现的问题:
1:当这个视频之前没有任何弹幕的时候,在手机端进行操作,可以把输入的弹幕显示在视频上,但是每次显示最新一条的时候,会把上一条的弹幕内容带上。
2:当这个视频存在弹幕的时候,也就是本身具有弹幕列表了,然后再进行操作,这个时候手机端输入文字,不能显示到视频列表中,只要把视频暂停后,然后拖回之前的时间,再进行一次播放,方可显示出来。
猜想:
我自己调试了很长时间,做了好几种假设,比如是否是我延迟时间给的太短,是否是数组的顺序不对。但是我发现都不是这些问题,最后,我再想,是否是setdata后 setdata进行页面渲染的时候,在手机端因为计算能力没电脑那么强,所以渲染的时间比较长,会让我错过弹幕该显示的时间点。如果是这个样子,我想请求官方告诉我,微信小程序setdata后 在自己渲染页面的时候会使用多久的时间才能完全渲染完,这样我就知道我改如何去控制用户在一定的时间范围内,才能发送弹幕。
代码:
wxml
{{item.name}}-{{item.time}}:
{{item.text}}
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;
本文网址:http://www.91bianli.com/kaifazhinan/66657.html