Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to achieve video on-screen comment effect in JS". The content is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how to achieve video on-screen effect in JS".

It is realized by using the modular development of ES6 and the observer pattern. The Observer pattern comes in many forms, and here it is in the form of "registration-notification-deregistration". The TimeManager class can return a singleton, and each barrage, as an observer, is registered in the set table of the singleton of the TimeManager class. When there is data in the set of the singleton, the state of the observed is changed, the animation is performed, and all observers are notified to update the update status. Log out of TimeManager when the on-screen comment moves beyond the video width. When all observed on-screen comments in the set table of the TimeManager singleton are logged out, the setInterval stops execution.

1 、 Bullet.js:

Observer: implement the on-screen comment style, and self-status update update () method.

2 、 TimeManager.js

Observer and Subject: you can add and delete observer objects, notify all observers when the state changes and update the status.

3 、 Player.js

Player components: simple player styles, control buttons, etc. are all default styles.

4. Realize the effect:

5. Specific implementation:

Import TimeManager from'. / TimeManager.js'; export default class Bullet {elem; x; speedX=2; width; constructor (txt) {this.elem = this.createElem (txt);} createElem (txt) {if (this.elem) return let div = document.createElement ("div") Object.assign (div.style, {position: "absolute", whiteSpace: "nowrap", fontSize: "16px", / / color: "# 000", color: "# e00",}) div.textContent = txt; return div} appendTo (parent) {if (typeof parent = = "string") parent = document.querySelector (parent) Parent.appendChild (this.elem); let rect = parent.getBoundingClientRect (); this.elem.style.top = Math.random () * rect.height/4 + "px"; this.width = this.elem.offsetWidth; this.x = rect.width; this.elem.style.left = this.x + "px"; TimeManager.instance.add (this) } update () {if (! this.elem) return; this.x-= this.speedX; this.elem.style.left = this.x + "px"; if (this.x {this.update ();}, 16);} remove (elem) {if (! elem) return this.list.delete (elem) If (this.list.size===0 & & this.ids) {clearInterval (this.ids); this.ids=0;}} update () {this.list.forEach (item= > {item.update ();})}} import Bullet from'. / Bullet.js'; export default class Player extends EventTarget {static WIDTH=638; static HEIGHT=493; elem; input Constructor (path) {super (); this.elem = this.createElem (path); document.addEventListener ("keyup", e = > this.keyHandler (e));} keyHandler (e) {if (e.keyCode! = = 13) return; if (this.input.value.trim () .length===0) return; let b = new Bullet (this.input.value); b.appendTo (this.elem) This.input.value = ";} appendTo (parent) {if (typeof parent===" string ") parent= document.querySelector (parent); parent.appendChild (this.elem);} createElem (path) {/ / player outermost container let player = document.createElement (" div "); player.className =" player " Object.assign (player.style, {width:Player.WIDTH+ "px", height:Player.HEIGHT+ "px", userSelect: "none", overflow: "hidden", position: "relative", verticalAlign: "baseline" }) / / player video playback section: should include the top author and feedback bar, video status button, video display section. Let videoWrap = document.createElement ("div") Object.assign (videoWrap.style, {width: "100%", height: "447px", backgroundColor: "# 000", position: "relative", top:0, display: "flex", flexDirection: "column",}) / / create the upper layer of the player: including title, author Feedback and reports, etc. Let videoTop = document.createElement ("div") Object.assign (videoTop.style, {width: "100%", height: "42px", position: "relative", top: "0px", left: "0px", opacity: "0", color: "# fff", pointerEvents: "none" / / transition: "all .2s ease-in-out", transition: "all .2s",}) / / Video playback status switch / / let videoState = document.createElement ("div") / / let videoContent = document.createElement ("div"); Object.assign (videoContent.style, {width: "100%", / / height: "100%", height: "361px", position: "relative", userSelect: "none",}) let video = document.createElement ("video") Video.src = path; video.controls = "controls"; video.preload = "auto"; Object.assign (video.style, {/ / Video Center: the progress bar is lengthened, but the video is not stretched, directly centered: height: "100%", width: "100%",}) videoContent.appendChild (video) / / Video playback and on-screen scrolling control bar: definition / double speed / loop / mirror / wide screen / web full screen / progress bar, let videoControlWrap = document.createElement ("div") Object.assign (videoControlWrap.style, {width: "100%", height: "44px", opacity: "0", position: "relative", bottom: "0",}) / / send on-screen comment at the bottom and set the style of sending on-screen, such as on-screen color / font size / scroll / hover / speed / font / mask, etc. Let bottomArea = document.createElement ("div"); Object.assign (bottomArea.style, {width: "100%", height: "46px",}) this.input = document.createElement ("input") Object.assign (this.input.style, {width: "130px", height: "30px", color: "# 212121", / / border: "0px", lineHeight: "30px", boxSizing: "border-box", minWidth: "115px", padding: "0 5px", fontSize: "12px" Border: "1px solid # e7e7e7", / / frame style: backgroundColor: "# f4f4f4",}) bottomArea.appendChild (this.input) VideoWrap.appendChild (videoTop); videoWrap.appendChild (videoContent); videoWrap.appendChild (videoControlWrap); player.appendChild (videoWrap); player.appendChild (bottomArea); return player;}} Document import Player from'. / js/Player.js'; import TimeManager from'. / js/TimeManager.js'; import Bullet from'. / js/Bullet.js' / / the player uses let player = new Player (". / test3.mp4"); player.appendTo ("body"). The above is all the content of the article "how to achieve video barrage effect in JS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.