Vue实现弹幕功能

写在前：这个功能不是常规视频弹幕，是音频与图片配合；一个课时对应一个弹幕包，一个课时多张图片，弹幕包里包含与各音频与图片相对应的弹幕，且页面切换比较频繁，所以也相对繁琐。

效果图

发送时间间隔限制：

大致流程图：

一、弹幕组件

写一个弹幕组件，方便维护；
组件负责弹幕的过渡动画效果，弹幕样式，开始/暂停等；

1.弹幕位置；
暂定弹幕最多三行，在页面顶部；
那么要获取父页面的宽高，弹幕区域用绝对定位定位在顶部；
父页面获取宽高：

	  this.rootHeight = document.documentElement.clientHeight;
      this.rootWidth  = document.documentElement.clientWidth;

<Barrage
                @click="onBarrage"
                v-if="showBarrage"
                :rootHeight="rootHeight"
                :rootWidth="rootWidth"
                :barrageContent="barrageContent"
                :barrageData="barrageData"
                ref="barrage"
></Barrage>

子组件接收：

props: ['rootHeight','rootWidth','content','barrageData'],

<div class="barrage-root" :style="barrageRootStyle" @click="onBarrage"></div>

//created()中
      this.barrageRootStyle= `height:${this.rootHeight}px;width:${this.rootWidth}px`;
    

<div class="barrage-area"> </div>
<div :class=" stopBarrage?'barrageRoll pause':'barrageRoll ' "
                 :style="barrageAreaStyle"
                 v-for="item in dataList">
                {{ item.content }}
</div>

.barrage-area{
        width:100%;
        height:180px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 15px 0;
    }
    .barrageRoll{
        width:280px;
        height:55px;
        position:relative;
        color: #fff;
        text-shadow: 2px 1px #ccc;
        animation: danmuSimple 14s linear 0.1s 1 normal;
    }

2.动画
位置确定好了，下一步做过渡动画
最开始将弹幕div放在页面右侧，再用css3动画将div滑至左侧
页面宽度刚才已经从父页面获取了，那么刚开始的时候根据rootWidth定位：

this.barrageAreaStyle = `left:${this.rootWidth}px`;

@keyframes danmuSimple{
        100% {left:-2000px;}
    }

3.按时滚动

后端传来两个主要字段，content和timstamp（这两个字段内容是发送弹幕时传到服务器的），用timstamp来指定弹幕延时滚动的时间
通过定时器控制弹幕出来的时间；
数据结构例子：

barrageData:[
        {
            content:'弹幕一号',
            time_stamp:1000 * 1,
        },
        {
            content:'弹幕二号',
            time_stamp:1000 * 1.8,
        },
        {
            content:'弹幕三号',
            time_stamp:1000 * 3.4,
        }]

在组件内定义 dataChange事件，当主页面数据切换，触发此事件；
事件主要动作为清除定时器和添加定时器；

//切换页面时，弹幕数据改变
      dataChange(data){
        console.log('弹幕组件 数据改变data',data);
        this.timeArr.length = 0;
        for(let j = 0;j<this.timeArr.length;j++){
          clearTimeout(this.timeArr[j]);
        }
        for(let j = 0;j<this.timeArr2.length;j++){
          clearTimeout(this.timeArr2[j]);
        }
        for(let i = 0;i<data.length;i++){
         this.timeArr2[i] = setTimeout(
            ()=>{
              this.dataList.push( {content: data[i].content} )
            },
            data[i].timestamp
          )
        }
      },

VUE是数据驱动，dataList变量变化时，页面弹幕也会变化

<div class="barrage-area">
            <div :class=" stopBarrage?'barrageRoll pause':'barrageRoll ' "
                 :style="barrageAreaStyle"
                 v-for="item in dataList">
                {{ item.content }}
            </div>
        </div>

当切换数据时在主页面调用：

this.$refs.barrage.dataChange(this.barrageDataList.data[i].barrage);

4.控制弹幕 暂停/开始

通过动态增减class来控制弹幕暂停：

:class=" stopBarrage?'barrageRoll pause':'barrageRoll ' "

二，确定弹幕延时发送时间

发送弹幕时，用媒体标签的timeupdata事件来获取弹幕当前位置；
timeupdata事件会传来currentTime属性，是当前播放的时间位置，发送弹幕时拿到这个属性的值，发送到服务器；

三，细节优化
再加上时间限制，Toast提示，开始关闭弹幕这些细节，简单的弹幕功能就可以了；