原生JS弹幕

<style>
    .box {
        width: 800px;
        height: 800px;
        margin: 0 auto;
    }

    .tops {
        width: 800px;
        height: 60px;
        background-color: #FA5E88;
    }

    .tops img {
        height: 60px;
    }

    .top2 {
        width: 800px;
        height: 500px;
        margin-top: 10px;
    }

    .left {
        width: 500px;
        height: 400px;
        float: left;
        position: relative;
    }

    .dm {
        width: 500px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 50px;
        overflow: hidden;
    }

    .fs {
        width: 500px;
        height: 80px;
        position: absolute;
        top: 400px;
    }

    .sp {
        display: inline-block;
        position: absolute;
    }

    .set {
        width: 200px;
        height: 150px;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        position: absolute;
        top: 45%;
        left: 65%;
    }

    .dm video {
        z-index: 1;
    }

    .ziti {
        color: pink;
    }

    .zi {
        width: 30px;
    }

    .right {
        width: 200px;
        float: right;
    }

    .right video {
        width: 140px;
        height: 100px;
    }

    .p2 span {
        display: inline-block;
        width: 50px;
        height: 30px;
        border-radius: 20px;
        text-align: center;
        line-height: 30px;
        margin-top: 15px;
        margin-left: 15px;
    }

    .mm {
        background-color: orange;
    }

    .p1 span {
        float: left;
        width: 50px;
        text-align: center;
        color: white;
    }
</style>

 <div class="box">
        <div class="tops">
            <img src="https://sf3-scmcdn2-tos.pstatp.com/ppx/mp/static/media/dark.19b695a7.svg" alt="">
        </div>
        <div class="top2">
            <div class="left">
                <video src="./长图/5917a77f0eed4084a2dd32fc3ee34fd9.mp4" controls loop height="400" class="video"
                    width="550"></video>
                    
                <div class="dm">

                </div>
                <div class="fs">
                    <input type="text" placeholder="请输入发送内容" class="inp">
                    <button class="btn">发送</button>
                    <button class="op">关闭</button>
                </div>
                <div class="set">
                    <div class="p1"><span>颜色</span><span>字体</span><span>速度</span><span>透明度</span></div>
                    <div class="p2">

                        <span style="color: red;border: 1px solid red;" xxx='red' class="col">红色</span>
                        <span style="color: blue;border: 1px solid blue;" xxx='blue' class="col">蓝色</span>
                        <span style="color: pink;border: 1px solid pink;" xxx='pink' class="col">粉色</span>
                        <span style="color: yellow;border: 1px solid yellow;" xxx='yellow' class="col">黄色</span>
                    </div>
                </div>
            </div>
            <div class="right">
                <video src="./长图/5917a77f0eed4084a2dd32fc3ee34fd9.mp4" class="vs"></video><br>
                <span>大数据</span><br>
                <video src="./长图/018127ea9b1c4451b6d5df6a426bf8b0.mp4" class="vs"></video><br>
                <span>风景一</span><br>
                <video src="./长图/d4948285abab4d579166390ff95c9a5a.mp4" class="vs"></video><br>
                <span>风景二</span>
            </div>
        </div>

    </div>

 <script src="./velocity.js"></script>
    <script>
        var dm = document.querySelector(".dm")
        var left = document.querySelector(".left")
        var inp = document.querySelector(".inp")
        var btn = document.querySelector(".btn")
        var vs = document.querySelectorAll(".right video")
        var video = document.querySelector(".video")
        var op = document.querySelector(".op")
        var off = true
        var fz = 14
        var lsp = document.querySelectorAll(".p2 span")

        var ziyanse = 'black'
        console.log(lsp);
        dm.fontSize = `${fz}+"px"`
        console.log(video);
        // console.log(vs);

        lsp.forEach(function (v, i) {
            v.onclick = function (a, b) {
                lsp.forEach(function (v, i) {
                    v.classList.remove('mm')
                })
                lsp[i].classList.add("mm")
                f = lsp[i].getAttribute('xxx')
                ziyanse = f
            }
        })
        btn.onclick = function () {
            var w1 = inp.value;
            sp = document.createElement("span")
            dm.appendChild(sp)
            sp.innerHTML = w1
            sp.className = 'sp'
            sp.style.top = Math.random() * 80 + 'px';
            sp.style.left = 450 + "px"
            sp.style.color = ziyanse
            // sp.style.fontSize=Math.floor(Math.random()*(20-10+1)+10)+"px"
            // sp.style.color='#' + Math.random().toString(16).substr(2, 6)
            Velocity(sp, { "left": "-450px" }, { duration: 6000, complete: function () { dm.removeChild(sp) } })
        }
        vs.forEach(function (v, i) {
            v.onclick = function () {
                video.src = v.src
            }
        })
        op.onclick = function () {
            if (off == true) {
                dm.style.display = 'none'
                off = false
                op.innerHTML = '开启'
            }
            else {
                dm.style.display = 'block'
                off = true
                op.innerHTML = '关闭'
            }
        }


    </script>

注意引用velocity