web前端中视频弹幕如何实现

今天小编给大家分享一下web前端中视频弹幕如何实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

代码展示

1>html代码展示

<div class="barrage">         <video id="myvideo" autoplay loop width="100%" height="300px">             <source src="video/1.mp4">         </video>         <div class="screen">             <div class="content">                 <!--内容在这里显示-->             </div>         </div>         <!--发送对话框-->         <div 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>         </div>   </div>

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>

以上就是“web前端中视频弹幕如何实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。