html怎么实现弹幕效果,html 视频的弹幕用什么做的

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

　　2.代码展示

　　1html代码展示

　　div class=弹幕视频id=我的视频自动播放循环宽度=100% 高度= 300 px 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=弹幕_关闭关闭弹幕/span！-静音功能- span id=静音开启静音/span /div /div2css代码展示

　　*{填充：0;边距：0;}输入{大纲：无；}.弹幕{位置：相对；宽度：100%;高度：250px}#myvideo{位置：绝对；/*宽度：100%;高度：300 px */top:-50px；左：0;z索引：-1;}.弹幕。屏幕{位置：绝对；top:0px；右：0px宽度：100%;高度：300px}。弹幕。屏幕。内容{位置：相对；宽度：100%;高度：250像素背景：# 000;不透明度：0.5;/*滤镜：阿尔法(不透明度=100);*//***针对ie8以上或者更早的浏览器****/背景色：透明；z指数：1;}.弹幕。屏幕。内容部门{位置：绝对；字体大小：20px字体粗细：粗体；空白：nowrap行高：40pxz指数：40;}.弹幕。发送{位置：绝对；底部：0px宽度：100%;高度：55像素行高：55pxz指数：1;/*背景：# 000;*/背景：rgba(0，0，0，0.5)；文本对齐：居中；/*显示：无；*/}.弹幕：悬停。发送{显示：块；}.弹幕。发送s_text {。宽度：60%;高度：35px行高：35px字体大小：16px字体系列：微软雅黑；边框半径：20px不透明度：0.8;}.弹幕。发送s _ BTN {宽度：105 px高度：35px行高：35px背景：# 22B14C颜色：# fff边框半径：10px不透明度：0.8;}.弹幕_关闭，#静音{宽度：80px高度：30px行高：30px边框半径：10px文本对齐：居中；颜色：# 22B14C背景：# fff光标：指针；不透明度：0.8;} #静音{背景：黄色；}.弹幕_关闭1 { color:# fff；背景：# fff}/* css动画*/.内容部门{动画：文字15s无限正常；} @关键帧文本{ 0% {左：100%；} 20%{左：75%;} 80%{左：0%;} 100%{左：-30%;}}3js代码展示

　　$(function () { $( .弹幕_关闭)。单击(function(){ $( .内容div’).移除();});init _ barrage()；});//将弹幕内容放进数组贮存起来var arr=[]；var h=arr。push()；//监听发送，按进入发送文档。o nkeyd down=函数(事件){ var e=事件窗口。事件；if(e . e . key code==13){//控制台。日志(11111)；$(.发送BTN南部).单击();} };//提交评论$(.发送BTN南部).单击(function () { var text=$( .s _ text’).val()；if (text==) { alert(你的内容为空，请填写评论在再发送);返回false } var _ lable=$( div style= right:20px；top:0px；不透明度：1;color: getColor()；class= content _ text text /div )；$(.内容)。追加(_标签。show())；init _ barrage()；$(.s _ text’).val(" ")；});//初始化弹幕技术函数init _ barrage(){ var _ top=0；$(.内容div’).显示()。each(function () { var _left=$( .弹幕)。width()；//浏器览最大宽度（也是浏览器的高度),作为定位左边的的值控制台。log(_ left)；var _height=$( .弹幕)。height()；//视频窗口的最大高度控制台。log(_ height)；_ top=35if(_ top=(_ height-150)){ _ top=0；} $(这个)。css({ left: _left，top: _top，color:getColor()})；//定时弹出文字//var time=10000；//if ($(this).index()% 2==0){//time=15000；//} //$(这个)。animate({ left: - _left px }，time，function () { //$(this).移除();//});});}//获取随机颜色函数getColor(){ return # (function(h){ return new Array(7h . length).join( 0 )h })((数学。random()*0x 1000000 0).toString(16))} var video=文档。getelementbyid(“我的视频”)；var mute=文档。getelementbyid( muted )；console.log(静音);//设置视频播放速度//视频。回放速率=0.5；//视频静音video . muted=false mute .on click=function(){ if(video。静音){视频。静音=假；静音。innertext=mute.innerText=开启静音；//控制台。log(1111)} else { video。静音=真；静音。innertext=mute.innerText=关闭静音；//console.log(2222) }}3 .代码效果演示

　　a title=查看演示效果href= https://领导755。github。io/视频-弹幕/ target= _ blank 点我查看演示效果/aa title=下载源码href= https://。com/leader 755/视频-弹幕。git target= _ blank 点我下载源码/a4 .最重要的一点别忘了

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

　　div class=弹幕视频id=我的视频自动播放循环宽度=100% 高度= 300像素来源src= video/1。MP4 /视频/div风格.弹幕{位置：相对；宽度：100%;高度：250px}#myvideo{位置：绝对；/*宽度：100%;高度：300 px */top:-50px；左：0;z索引：-1;}/style总结

　　以上所述是小编给大家介绍的HTML5实现视频弹幕功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

　　如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读