HTML5实现视频弹幕功能

1.首先展示一下弹幕视频弹幕原图，事实说话

2.代码展示

1> htML代码展示
 

2> css代码展示

*{
        padding: 0;
        margin: 0;
}
input{
        outline: none;
}
.barrage {
        posITion: relative;
        width: 100%;
        height:250px;
}
#myvideo{
        position: absolute;
        /* width: 100%;
        height:300px;
     */    top: -50px;
        left: 0;
        z-index: -1;
}
.barrage .screen {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 100%;
        height: 300px;
}
.barrage .screen .content {
        position: relative;
        width: 100%;
        height: 250px;
        background: #000;
        opacity:0.5;
        /* filter: alpha(opacity=100);
     *//***针对ie8以上或者更早的浏览器****/    background-color: transparent;
        z-index: 1;
}
.barrage .screen .content div {
        position: absolute;
        font-Size: 20px;
        font-weight: bold;
        white-space: nowrap;
        line-height: 40px;
        z-index: 40;
}
.barrage .send {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 55px;
        line-height: 55px;
        z-index: 1;
        /*background: #000;
    */    background: rgba(0,0,0,0.5);
        text-align: center;
        /*display: none;
*/}
.barrage:hover .send{
        display: block;
}
.barrage .send .s_text {
        width: 60%;
        height: 35px;
        line-height:35px;
        font-size: 16px;
        font-family: "微软雅黑";
        border-radius:20px;
        opacity: 0.8;
}
.barrage .send .s_btn {
        width: 105px;
        height: 35px;
        line-height: 35px;
        background: #22B14C;
        color: #fff;
        border-radius: 10px;
        opacity: 0.8;
}
.barrage_close,#muted {
        width: 80px;
        height: 30px;
        line-height: 30px;
        border-radius: 10px;
        text-align: center;
        color: #22B14C;
        background:#fff;
        cursor: pointer;
        opacity: 0.8;
}
#muted{
        background:yellow;
}
.barrage_close1{
        color: #fff;
        background: #fff;
}
/* css动画 */.content div{
        animation:Text 15s infinite normal;
}
@keyframes Text{
    0%{
            left:100%;
    }
    20%{
            left:75%;
    }
    80%{
            left:0%;
    }
    100%{
            left:-30%;
    }
}
    

3> js代码展示
 

$(function () {
     $(".barrage_close").click(function(){
             $(".content div").remove();
     }
    );
        init_barrage();
}
    );
    //将弹幕内容放进数组贮存起来VAR arr=[];
    var h=arr.push();
// 监听发送，按enter发送document.οnkeydοwn=function(event){
        var e = event || window.event;
        if(e &
    &
 e.keyCode==13){
         //    console.LOG(11111);
            $(".send .s_btn").click();
    }
                }
    ;
//提交评论$(".send .s_btn").click(function () {
        var text = $(".s_text").val();
    if (text == "") {
            alert('你的内容为空，请填写评论在再发送');
            return false;
    }
        var _lable = $("div style='right:20px;
    top:0px;
    opacity:1;
    color:" + getColor() + ";
    'class='content_text'>
    " + text + "/div>
    ");
        $(".content").append(_lable.show());
        init_barrage();
        $(".s_text").val("");
}
    );
//初始化弹幕技术function init_barrage() {
        var _top = 0;
    $(".content div").show().each(function () {
            var _left =$(".barrage").width();
    //浏器览最大宽度（也是浏览器的高度），作为定位left的值        console.log(_left);
            var _height =$(".barrage").height();
    //视频窗口的最大高度        console.log(_height);
            _top += 35;
            if (_top >
= (_height - 150)) {
                _top = 0;
        }
        $(this).css({
 left: _left, top: _top, color: getColor() }
    );
            //定时弹出文字        // var time = 10000;
        // if ($(this).index() % 2 == 0) {
            //     time = 15000;
        // }
        // $(this).aniMATE({
 left: "-" + _left + "px" }
, time, function () {
            //     $(this).remove();
        // }
    );
    }
    );
}
//获取随机颜色function getColor() {
    return '#' + (function (h) {
        return new Array(7 - h.length).join("0") + h    }
)    ((Math.random() * 0X1000000  0).toString(16))}
    var video=document.getElementById("myvideo");
    var mute=document.getElementById("muted");
    console.log(muted);
    //设置视频播放速度// video.playbackRate = 0.5;
    //视频静音video.muted = false;
mute.οnclick=function(){
    if(video.muted){
                    video.muted = false;
                       mute.innerText='';
                    mute.innerText = '开启静音';
                // console.log(1111)            }
else{
                    video.muted = true;
                       mute.innerText='';
                    mute.innerText = '关闭静音';
                // console.log(2222)            }
}
    

3.代码效果演示

a title="查看演示效果" href="https://leader755.github.io/Video-barrage/" target="_blank" >
    点我查看演示效果/a>
    a title="下载源码" href="https://github.COM/Leader755/Video-barrage.git" target="_blank">
    点我下载源码/a>
    

4.最重要的一点别忘了

问题：视频宽度不能100%,高度我定死了300px，有哪位大神帮吗解决一下吧。以下为涉及的主要代码，可以上翻查看详细代码。

div class="barrage">
                video id="myvideo" autoplay loop width="100%" height="300px">
                    source src="video/1.mp4">
                /video>
    /div>
    style>
   .barrage {
        position: relative;
        width: 100%;
        height:250px;
}
#myvideo{
        position: absolute;
        /* width: 100%;
        height:300px;
     */    top: -50px;
        left: 0;
        z-index: -1;
}
    /style>
    

总结

以上所述是小编给大家介绍的HTML5实现视频弹幕功能 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！