JS弹幕实现

susheng 发布于2019-08-21 17:12 / 1981人阅读

摘要：原文链接实现原理设置展示弹幕元素位置属性为动态创建弹幕元素，位置属性设置，为展示宽度随机设置弹幕元素值随机产生弹幕元素移动速率，修改值随机颜色第一种实现第二种实现第三种实现随机速率代码发送弹幕前端框架测试弹幕效果效果

基于直播平台的流行，利用原生实现一下弹幕效果。

原文链接

实现原理

1、设置展示弹幕元素位置属性为relative
2、动态创建弹幕元素，位置属性设置absolute，left为展示宽度
3、随机设置弹幕元素top值
4、随机产生弹幕元素移动速率，修改left值

随机颜色

第一种实现
let color = "#" + Math.floor(Math.random() * 0xffffff).toString(16);

第二种实现
let color = "#" + Math.floor(Math.random() * 256).toString(10);

第三种实现
let r = Math.floor(Math.random()*256);
let g = Math.floor(Math.random()*256);
let b = Math.floor(Math.random()*256);
let color = `rgb(${r},${g},${b})`;

随机速率

50 * +Math.random().toFixed(2)

代码

//html

    
    
        
        
            
            
        
    


//css
* {
    box-sizing: border-box;
    outline: none;
}

p {
    margin: .5em;
    word-break: break-all;
}

.container {
    position: relative;
    width: 700px;
    height: 500px;
    margin: auto;
    padding-right: 200px;
}

.content {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
}

.content-opt {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
}

.content-text {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    border: 1px solid #ccc;
    overflow: auto;
}

.content-input {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    border: 1px solid #ccc;
}

.content-input input {
    width: 70%;
    padding: 2px;
    border-radius: 5px;
}

.content-input button {
    padding: 3px 10px;
    border: none;
    border-radius: 5px;
    background: rgb(90, 154, 214);
}

//js
(function () {
    class Barrage {
        constructor(id) {
            this.domList = [];
            this.dom = document.querySelector("#" + id);
            if (this.dom.style.position == "" || this.dom.style.position == "static") {
                this.dom.style.position = "relative";
            }
            this.dom.style.overflow = "hidden";
            let rect = this.dom.getBoundingClientRect();
            this.domWidth = rect.right - rect.left;
            this.domHeight = rect.bottom - rect.top;
        }

        shoot(text) {
            let div = document.createElement("div");
            div.style.position = "absolute";
            div.style.left = this.domWidth + "px";
            div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + "px";
            div.style.whiteSpace = "nowrap";
            div.style.color = "#" + Math.floor(Math.random() * 256).toString(10);
            div.innerText = text;
            this.dom.appendChild(div);

            let roll = (timer) => {
                let now = +new Date();
                roll.last = roll.last || now;
                roll.timer = roll.timer || timer;
                let left = div.offsetLeft;
                let rect = div.getBoundingClientRect();
                if (left < (rect.left - rect.right)) {
                    this.dom.removeChild(div);
                } else {
                    if (now - roll.last >= roll.timer) {
                        roll.last = now;
                        left -= 3;
                        div.style.left = left + "px";
                    }
                    requestAnimationFrame(roll);
                }
            }
            roll(50 * +Math.random().toFixed(2));
        }

    }

    let barage = new Barrage("content");

    function appendList(text) {
        let p = document.createElement("p");
        p.innerText = text;
        document.querySelector("#content-text").appendChild(p);
    }

    document.querySelector("#send").onclick = () => {
        let text = document.querySelector("#text").value;
        barage.shoot(text);

        appendList(text);
    };

    const textList = ["弹幕", "666", "233333333", "javascript", "html", "css", "前端框架", "Vue", "React", "Angular",
        "测试弹幕效果"
    ];
    textList.forEach((s) => {
        barage.shoot(s);
        appendList(s);
    })
})()

效果

GPU云服务器云服务器弹幕实现 js直播评论发弹幕 js弹幕视频播放器 js 实现画布

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89254.html

Canvas + WebSocket + Redis 实现一个视频弹幕

摘要：创建弹幕功能的类及基本参数处理布局时需要注意的默认宽为，高为，我们要保证完全覆盖整个视频，需要让与宽高相等。因为我们不确定每一个使用该功能的视频的宽高都是一样的，所以画布的宽高并没有通过来设置，而是通过在类创建实例初始化属性的时候动态设置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 阅读原文页面布...

WelliJhon 2019-08-29 16:55 评论0 收藏0
Canvas + WebSocket + Redis 实现一个视频弹幕

摘要：创建弹幕功能的类及基本参数处理布局时需要注意的默认宽为，高为，我们要保证完全覆盖整个视频，需要让与宽高相等。因为我们不确定每一个使用该功能的视频的宽高都是一样的，所以画布的宽高并没有通过来设置，而是通过在类创建实例初始化属性的时候动态设置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 阅读原文页面布...

gekylin 2019-08-02 11:41 评论0 收藏0
Canvas + WebSocket + Redis 实现一个视频弹幕

摘要：创建弹幕功能的类及基本参数处理布局时需要注意的默认宽为，高为，我们要保证完全覆盖整个视频，需要让与宽高相等。因为我们不确定每一个使用该功能的视频的宽高都是一样的，所以画布的宽高并没有通过来设置，而是通过在类创建实例初始化属性的时候动态设置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 阅读原文页面布...

wangdai 2019-08-23 12:19 评论0 收藏0
弹幕，是怎样练成的？

showImg(https://segmentfault.com/img/bVbk1Nl?w=1080&h=602); 说起弹幕看过视频的都不会陌生，那满屏充满着飘逸评论的效果，让人如痴如醉，无法自拔最近也是因为在学习关于 canvas 的知识，所以今天就想和大家分享一个关于弹幕的故事那么究竟弹幕是怎样炼成的呢？我们且往下看(look) 看什么？看效果 showImg(https://s...

lwx12525 2019-08-23 14:02 评论0 收藏0
50行代码搞定弹幕效果

摘要：根据指定内容生成弹幕，并初始化其位置以及其样式，插入中。最终完整版代码弹幕定时器控制弹幕显隐变量监听发送按钮创建弹幕添加定时任务监听关闭弹幕按钮新建一个弹幕为弹幕添加定时任务最终效果图快给自己刷波吧前言就在最近这几年，弹幕这个东西慢慢地流行了起来。我们在网上看视频或者看直播都能见到弹幕的身影，有时候弹幕的内容甚至比视频本身内容还要精彩。本人也是很喜欢弹幕这个东西，看到精彩处刷个弹幕...

sixgo 2019-08-20 17:35 评论0 收藏0