成都网站建设设计

将想法与焦点和您一起共享

怎么在HTML5中实现一个视频弹幕功能

这篇文章给大家介绍怎么在HTML5中实现一个视频弹幕功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

专注于为中小企业提供网站建设、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业资溪免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

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 = $("" + text + "
");     $(".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.代码效果演示

点我查看演示效果

点我下载源码

4.最重要的一点别忘了

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


            
                
            

关于怎么在HTML5中实现一个视频弹幕功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享名称:怎么在HTML5中实现一个视频弹幕功能
转载源于:http://chengdu.cdxwcx.cn/article/pdjcjp.html

其他资讯