HTML5实现视频弹幕功能html5视频媒体标签video的使用方法及完整参数说明详解Html5实现首页动态视频背景的示例代码HTML5 视频播放(video),JavaScript控制视频的实例代码HTML5视频播放插件 video.js介绍 HTML5自定义视频播放器源码

关闭弹幕开启静音

 *{ 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%; } }

 $(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) } }

点我查看演示效果点我下载源码