您的位置:首页 > Web前端 > > 正文

html5炫酷代码(HTML5实现视频弹幕功能)

更多 时间:2021-09-30 00:40:06 类别:Web前端 浏览量:1950

html5炫酷代码

HTML5实现视频弹幕功能

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

html5炫酷代码(HTML5实现视频弹幕功能)

2.代码展示

1>html代码展示
 

  • <li class="barrage">
            <video id="myvideo" autoplay loop width="100%" height="300px">
                <source src="video/1.mp4">
            </video>
            <li class="screen">
                <li class="content">
                    <!--内容在这里显示-->
                </li>
            </li>
            <!--发送对话框-->
            <li class="send">
                <input type="text" class="s_text" placeholder="使用回车可以快速发送弹幕"/>
                <input type="button" class="s_btn" value="发送" />
                 <!--关闭弹幕功能-->
                <span class="barrage_close">关闭弹幕</span>
                <!-- 静音功能  -->
                <span id="muted">开启静音</span>
            </li>
      </li>
    
  • 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 li {
        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 li{
        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 li").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 = $("<li style='right:20px;top:0px;opacity:1;color:" + getColor() + ";'class='content_text'>" + text + "</li>");
        $(".content").append(_lable.show());
        init_barrage();
        $(".s_text").val("");
    });
    //初始化弹幕技术
    function init_barrage() {
        var _top = 0;
        $(".content li").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,有哪位大神帮吗解决一下吧。以下为涉及的主要代码,可以上翻查看详细代码。

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

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

    标签:HTML5 视频 弹幕
    您可能感兴趣