1. First, show the original picture of the barrage video, the facts speak for themselves.
2.Code display
1>html code display
<div class=barrage> <video id=myvideo autoplay loop width=100% height=300px> <source src=video/1.mp4> </video> <div class=screen> <div class=content> <!- -Content is displayed here--> </div> </div> <!--Send dialog box--> <div class=send> <input type=text class=s_text placeholder=Use Enter to quickly send barrage/> <input type=button class=s_btn value=Send/> <!--Close barrage function--> <span class=barrage_close>Close barrage</span> < !-- Mute function--> <span id=muted>Turn on mute</span> </div> </div>
2>css code display
*{ 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); *//***For browsers ie8 or above or earlier****/ 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: Microsoft Yahei; 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 animation*/.content div{ animation:Text 15s infinite normal;}@keyframes Text{ 0%{ left:100%; } 20%{ left:75%; } 80 %{ left:0%; } 100%{ left:-30%; }}3>js code display
$(function () { $(.barrage_close).click(function(){ $(.content div).remove(); }); init_barrage();});//Put the barrage content into an array to store it var arr=[];var h=arr.push();// Monitor sending, press enter to send document.οnkeydοwn=function(event){ var e = event || window.event; if(e && e.keyCode==13){ // console.log(11111); $(.send .s_btn).click(); } };//Submit comment $(.send .s_btn ).click(function () { var text = $(.s_text).val(); if (text == ) { alert('Your content is empty, please fill in the comments before sending'); 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();});//Initialize barrage technology function init_barrage() { var _top = 0; $(.content div).show().each(function () { var _left =$ (.barrage).width();//The maximum width of the browser (also the height of the browser), as the value of positioning left console.log(_left); var _height =$(.barrage).height();//Maximum height of the video window console.log(_height); _top += 35; if (_top >= (_height - 150)) { _top = 0; } $(this ).css({ left: _left, top: _top, color: getColor() }); // Pop up text regularly // var time = 10000; // if ($(this).index() % 2 == 0) { // time = 15000; // } // $(this).animate({ left: - + _left + px }, time, function () { // $(this).remove(); // }); });}//Get a random color 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);//Set the video playback speed//video.playbackRate = 0.5;//Video mute video.muted = false;mute.οnclick=function(){ if(video.muted){ video.muted = false; mute.innerText=''; mute.innerText = 'Turn on mute'; / / console.log(1111) }else{ video.muted = true; mute.innerText=''; mute.innerText = 'Turn off mute'; // console.log(2222) }}3. Code effect demonstration
<a style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, Microsoft YaHei;"><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>SummarizeThe above is the video barrage function implemented in HTML5 introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!
If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!