How to realize video on-screen comment in web front-end

Today, the editor will share with you the relevant knowledge points about how to realize the video on-screen comment in the front end of web. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's learn about it.

Code presentation

1 > html code display

Close the barrage and turn on mute.

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 above ie8 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 z-index: rgba; 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 Acer"; 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 contents of the barrage into an array and store them in var arr= []; var h=arr.push (); / / listen to send, press enter to send document.documnkeydnewwn = function (event) {var e = event | | window.event If (e & & e.keyCode==13) {/ / console.log (11111); $(".send .s _ btn") .click ();}}; / / submit comments $(".send .s _ btn") .click (function () {var text = $(".s _ text") .val () If (text = "") {alert ('your content is empty, please fill in the comment before sending'); return false;} var _ lable = $("" + text + "); $(" .content "). Append (_ lable.show ()); init_barrage (); $(" .s _ text "). Val (");}) / / initialize the on-screen comment technology function init_barrage () {var _ top = 0; $(".content div") .show () .each (function () {var _ left = $(".barrage") .width (); / / the maximum width of the browser view (also the height of the browser) as the value console.log (_ left) for locating the left; var _ height = $(".barrage"). Height () / / the 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 ()}); / / timed pop-up text / / var time = 10000 / / if ($(this). Index ()% 2 = 0) {/ / time = 15000; / /} / / $(this) .animate ({left: "-" + _ left + "px"}, time, function () {/ / $(this). Remove (); /});}) } / / get random color function getColor () {return'#'+ (function (h) {return new Array (7-h.length) .join ("0") + h}) ((Math.random () * 0x1000000)