html5炫酷代码(HTML5实现视频弹幕功能)
类别:Web前端 浏览量:1950
时间:2021-09-30 00:40:06 html5炫酷代码
HTML5实现视频弹幕功能1.首先展示一下弹幕视频弹幕原图,事实说话
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 拍照上传(Html5在手机端调用相机的方法实现)
- html5视频播放(使用HTML5加载音频和视频的实现代码)
- html5单选项怎么调选项间距(html5实现输入框fixed定位在屏幕最底部兼容性)
- html5创作(HTML5录音实践总结Preact)
- html5页面强制刷新(移动端html5判断是否滚动到底部并且下拉加载)
- ih5如何点击按钮跳转至网页(HTML5跳转小程序wx-open-launch-weapp的示例代码)
- html5应用的几个建议
- webgl api 源码(基于 HTML5 WebGL 实现的医疗物流系统)
- html5 canvas 特效(JavaScript canvas实现流星特效)
- html5如何控制内容(html5拖拽应用记录及注意点)
- html5div怎样居中(HTML5+CSS设置浮动却没有动反而在中间且错行的问题)
- html5新的表单元素新的特性(HTML5表单验证特性知识点小结)
- h5制作支付功能(基于HTML5+tracking.js实现刷脸支付功能)
- html5列表与布局(HTML5逐步分析实现拖放功能的方法)
- html5移动app开发实战(html5启动原生APP总结)
- html5的canvas图形绘制技术(详解HTML5 Canvas标签及基本使用)
- 挑战新国标电自天花板,九号机械师MMAX 110P深度体验(挑战新国标电自天花板)
- 《满江红》不要只当电影看,学生应该这样做(满江红不要只当电影看)
- 电影《民间怪谈录之走阴人》定档8月5日,开启一场中式惊悚之旅(电影民间怪谈录之走阴人定档8月5日)
- 原创图画书,以儿童视角讲述中国故事(以儿童视角讲述中国故事)
- 八月再见 愿你岁月不扰,余生静好(八月再见愿你岁月不扰)
- 赏读 八月再见,九月你好(赏读八月再见九月你好)
热门推荐
- 阿里云虚拟主机带公网地址吗(阿里云虚拟主机被搜索引擎爬虫访问耗费大量流量解决方法)
- python表白神器教程(python浪漫表白源码)
- css怎么给背景颜色设置模糊(CSS设置背景图片模糊内容不模糊的解决方法)
- linux内核设备树(解析Linux内核与设备树的编译和烧写)
- docker安装详细教程linux(linux中docker的安装教程)
- 在html代码如何添加php代码(php生成HTML文件的类方法)
- dedecms搜索功能怎么设置详细(删除dedecms 5.7里面烦人的织梦链的方法)
- 查询按照部门分组的mysql语句(Mysql根据某层部门ID查询所有下级多层子部门的示例)
- dedecms地址优化(加快DedeCMS文章页显示速度的两个小技巧分享)
- docker镜像无法删除 Error:No such image:xxxxxx解决(docker镜像无法删除 Error:No such image:xxxxxx解决)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9