网页弹幕展示

前言

目前视频播放平台弹幕几乎都是使用js操作dom的方式实现，由于篇幅的原因这次只展示js操作dom的实现方案。

下文代码展示使用的是react 16.2版本库。

大家可以在npm中安装page-construct-template_component_barrage这个插件来直接使用。

正文

功能

弹幕文字各种样式：字体大小、字体类型、字体颜色（字体透明度）

弹幕展示速度

弹幕行高度

弹幕事件：鼠标左右点击事件、鼠标滑入滑出事件

调用方式如下：

const div = document.createElement('div');
const div.innerText = 'hello word';
div.style.color = 'orange';
div.syle.fontSize = '20px';

<Barrage
  data={[
    {
    	text: 'hello'
    },
    {
    	text: 'word',
    	// 控制单个弹幕元素的样式
    	color: 'rgba(255, 255, 255, 0.7)',
    	speed: [3, 4]
    },
    div
  ]}
  fontSize={25} // 弹幕字体大小
  lineHeight={40} // 弹幕行高
  speed={[1, 2]} // 控制弹幕速度
  onMouseOver={}
  onMouseOut={}
/>

js+dom实现方案

在开始正式代码开发之前需要弄清楚这种方法实现的逻辑：

1. 首先我们需要创建一个容器来承载弹幕元素，将监听函数写到这个容器上面
2. 初始化弹幕信息（弹幕内容、样式、速度，同时判断对象是否是dom节点）、初始弹幕容器能够显示多少行
3. 创建弹幕dom，设置属性，插入页面
4. transition动画结束，删除弹幕dom

基本流程就是上面这几步了，下面我们进入每一步的程序编写。

初始项目

这一步要做的事情有：

• 创建弹幕容器
• 向弹幕容器添加监听器，我们将所有弹幕节点的监听事件都委托到弹幕容器节点上面，减少内存占用
• 弹幕容器宽高存入state

import React, { Component } from 'react';

// 弹幕之间的最小距离
const barrageAway = 30;

export default class extends Component {
	// 容器宽高
  state = {
      width: 0,
      height: 0
  }
  barrageList = [] // 弹幕元素信息
  rowArr = [] // 容器可以展示弹幕的行
  timer = null // 存放定时器
  
  componentDidMount() {
      this.setSize(() =>