JavaScript 简单的弹幕功能的实现

叁歲伎倆 2023-03-14 08:23 20阅读 0赞

在视频网站看视频的时候，经常能看到弹幕，某个时间段弹幕数超级多，某个时间段几乎没有，我们可以实时新增弹幕并且能实时出现在弹幕群中。  
再次进入该视频后，会发现之前添加的弹幕还是在之前添加的时间点出现，当然还是可以再次添加弹幕。  
那这样的弹幕效果是怎么实现的呢？

###### 也是因为业务方向的原因，竟然从来没有做过弹幕功能，最近两天在复习，顺带就试着实现下弹幕功能。时间充裕的话会逐步完善优化弹幕效果 ######

#### 一、最最基础版 ####

##### 1、实现的效果： #####

*  总共4个弹幕轨道，在这4个弹幕轨道中展示所有的弹幕信息。
 *  每条弹幕随机添加字体大小、 颜色等。
 *  从右向左，只显示一遍。
 *  可以新增弹幕并实时展示出来，用黑框包裹新增的弹幕。

##### 2、思路： #####

*  在视频网站看视频时可以注意到，每条弹幕是在指定的时间出现的。由此，可以给弹幕添加一个时间字段，用于表示该弹幕是在什么时候发送的。
 *  写一个从右向左滚动的动画，动画的延迟时间就是弹幕出现的时间。
 *  新增弹幕，因为要立即展示出来，则，延迟时间为0

##### 3、效果图 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70 1]

##### 4、 整体代码如下： #####

<html>
    
    <head>
    
    </head>
    
    <body>
    
        <style type="text/css">
            #danmu-wrap { 
                width: 1200px;
                height: 520px;
                border: 1px solid #3c3c33;
                position: relative;
                overflow: hidden;
            }
    
            .danmu-area { 
                width: 100%;
                height: 50%;
                border: 1px solid cadetblue;
                position: absolute;
            }
    
            .danmu-area .line { 
                height: 40px;
                padding: 10px 0;
                line-height: 40px;
                position: absolute;
            }
    
            .danmu-area .line0 { 
                top: 0;
            }
    
            .danmu-area .line1 { 
                top: 60px;
            }
    
            .danmu-area .line2 { 
                top: 120px;
            }
    
            .danmu-area .line3 { 
                top: 180px;
            }
    
            .danmu-area .line .span { 
                margin: 0 15px;
                padding: 0 10px;
                display: inline-block;
                position: absolute;
                left: 1200px;
                width: max-content;
    
            }
            .add-area{ 
                position: absolute;
                top:280px;
            }
    
            @keyframes scrollRL { 
                0% { 
                    left: 1200px;
    
                }
    
                25% { 
                    left: 600px;
    
                }
    
                50% { 
                    left: 0;
    
                }
    
                75% { 
                    left: -600px;
    
                }
    
                100% { 
                    left: -1200px;
                }
            }
        </style>
        </head>
    
        <body>
            <div id="danmu-wrap">
                <div class="danmu-area" id="danmu-area">
                </div>
                <div class="add-area">
                    <input id="input" placeholder="在此输入弹幕"> <button id="send">点击发送</button>
                </div>
            </div>
            <script>
                var data = [{ 
                    value: "今天天气不错",
                    time: 2
                }, { 
                    value: "男主演技好差劲，是机器人吗，只有嘴巴在动",
                    time: 4
                },
                { 
                    value: "于妈妈，想你o(╥﹏╥)oo(╥﹏╥)oo(╥﹏╥)o",
                    time: 5
                },
                { 
                    value: "男主演技好差劲，是机器人吗，只有嘴巴在动",
                    time: 4
                },
                { 
                    value: "于妈妈，想你o(╥﹏╥)oo(╥﹏╥)oo(╥﹏╥)o",
                    time: 7
                },
                { 
                    value: "男主演技好差劲，是机器人吗，只有嘴巴在动",
                    time: 11
                },
                { 
                    value: "于妈妈，想你o(╥﹏╥)oo(╥﹏╥)oo(╥﹏╥)o",
                    time: 10
                },
                { 
                    value: "哈哈哈，笑死",
                    time: 13
                }, { 
                    value: "辣眼睛啊，这演技",
                    time: 23
                }, { 
                    value: "哇撒，男儿好帅，我爱了",
                    time: 24
                }, { 
                    value: "啊啊啊啊啊啊，天哪，怎么会这样",
                    time: 40
                },
                { 
                    value: "刚才煮玉米，结果水烧干了，锅底都烧红了，o(╥﹏╥)o",
                    time: 30
                },
                { 
                    value: "啊啊啊啊啊啊，天哪，怎么会这样",
                    time: 44
                }
                    , { 
                    value: "啊啊啊啊啊啊，天哪，怎么会这样",
                    time: 49
                }]
    
                var area = document.getElementById("danmu-area");
                var fontColor = ['red', 'blue', 'orange', 'dark', 'pink'];// 字体颜色
                var fontSize = [14, 16, 22, 14, 20, 18];
                var fontWeight = ['bold', 'bolder', 'normal', "900", '500', "400"]
    
                // 4个弹幕轨道，所有的数据按顺序随机出现在某一个轨道上
                for (var i = 0; i < 4; i++) { 
                    var div = document.createElement("div");
                    div.setAttribute("class", "line" + i + " line");
                    area.appendChild(div);
                }
    
                for (var i = 0; i < data.length; i++) { 
                    // 将弹幕信息按顺序随机放在弹幕轨道上
                   
                    createNewInfo(data[i].value,data[i].time)
                }
    
                function createNewInfo(val,time,add){ 
                    var infoSpan = document.createElement("span");
                    infoSpan.setAttribute("class", "span");
                    infoSpan.innerText = val;
                    infoSpan.style.color = fontColor[Math.floor(Math.random() * 10) % 5];
                    infoSpan.style.fontSize = fontSize[Math.floor(Math.random() * 10) % 6];
                    infoSpan.style.fontWeight = fontWeight[Math.floor(Math.random() * 10) % 6];
                    infoSpan.style.webkitAnimationName = "scrollRL";
                    infoSpan.style.webkitAnimationDelay =time + "s";
                    infoSpan.style.webkitAnimationDuration = "12s";
                    infoSpan.style.webkitAnimationTimingFunction = "linear";
                    if(add){ 
                        infoSpan.style.border="2px solid black";
    
                    }
                    document.getElementsByClassName("line" + Math.floor(Math.random() * 10) % 4)[0].appendChild(infoSpan);
                }
    
                document.getElementById("send").onclick=function(){ 
                    var value=document.getElementById("input").value;
                    if(!value){ 
                        alert("不能为空！");
                    }else{ 
                        createNewInfo(value,0,'add');
                    }
                }
    
            </script>
        </body>
    
    </html>

##### 5、存在的问题 #####

1.  因为是提前将所有弹幕信息添加到span标签内，放入对应的弹幕轨道，若是弹幕是很多（上千，上万），那就会添加对应个数的span标签，过于冗余了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70]: /images/20230312/e8e1a103817e46a489ce23439e103cca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70 1]: /images/20230312/bea984d5f2b649cfaaa38db0617b5dc6.png