Récemment, j'ai commencé à développer des sites Web vidéo de barrage et j'ai atteint la fonction du barrage via la toile dans HTML5.
Alors ne parlez pas de potins, parlons d'abord de penser.
Idée: Depuis la disposition de la page, il couvre une toile sur la fenêtre vidéo générée par la balise vidéo, et elle peut être réalisée avec un positionnement absolu. La chose la plus importante est l'affichage du barrage sur la toile de contrôle JS. Et le barrage est le barrage. L'objet de barrage a des méthodes comprennent: Définir les coordonnées verticales horizontales du barrage, le mouvement du barrage. Le principe de la mise en œuvre est l'événement où la vidéo d'écoute commence à jouer, et une minuterie est générée lorsque la vidéo commence. Code du barrage, la minuterie a également le code de mise à jour du tableau des balles.
L'image ci-dessous est une capture d'écran de l'effet de barrage
Puis démarrez directement le code:
(Function () {window.onLoad = function () {var video = document.getElementsByTagName (video) [0] var cav = document.getElementsByTagName (canvas) [0] // définir la hauteur et la largeur de la canevas constante var cavwidth = 800 var cavheight = 420 cav.width = cavwidth cav.height = cavheight var ctx = cav.getContext (2d) // le tableau de l'objet de barrage de stockage var capoBjs = [] var Lasitemtime var huit = 20 var inputEle = document.getElementsByClassName (Légende -input-text) [0] var Sendele = document.getElementsByClassName (Légende-SendButton) [0] var Colorm = document.getElementsByClassName (ColorItems) [0] ar isMoveInPutele = Document.getElementsByClassName (Sé façon 0k // le tableau de polyvalents au Canada dans le canitoBjs = [{vierge: true, valeur: 20, index: 0}, {vierge: true, valeur: 50, index: 1}, {vierge: true, valeur: 80, index: 2}, {vierge: true, valeur: 110, index: 3}, {blanc: true, valeur: 140, index: 4}, {vierge: true, valeur: 170, index: 5}, { Blank: true, valeur: 200, index: 6}, {blanc: true, valeur: 230, index: 7}, {vierge: true, valeur: 260, index: 8}, {blank: true, valeur: 290, Index: 9}, {blanc: true, valeur: 320, index: 10}, {blanc: true, valeur: 350, index: 11}, {blank: true, valeur: 380, index: 12}, {{{{{{{{{{{{{{{{{ Blank: true, valeur: 410, index: 13}] // Test Data Test Data Var TestArray = [{Content: ABCDEFGHIJKLMNOPQRSTUVWXYZ, Time: 1, Ismove: False, ColorIndex: 0}, {Conne, Tent: 23333333333333, temps: 2, Ismove: True, ColorIndex: 0}, {Content: Dry, Hahaha ~~~~~~, Time: 2, Ismove: True, ColorIndex: 5}, {Content: Dry, Hahaha ~~~~~ Time: 2, Ismove: True, ColorIndex: 4}, {Content: Dry Toast, Hahaha ~~~~~~, Time: 2, Ismove: True, ColorIndex: 4}, {Content: Dry Toast, Hahaha ~~~ ~~ ~, Temps: 2, ismove: true, colorindex: 0}, {contenu: toast sec, hahaha ~~~~~, temps: 2, ismove: true, colorindex: 0}, {contenu: 2333333333333, temps: 3, Ismove: True, ColorIndex: 0}, {Content: 233333333333333, Time: 3, Ismove: True, ColorIndex: 0}, {Content: 233333333333333, Time: 3, Ismove: T: T Rue, ColorIndex: 0}, {contenu: : 2333333333333333, temps: 3, Ismove: true, colorIndex: 0}, {contenu: 2333333333, temps: 3, ismove: true, coloridex: 0}, {contenu: 23333333333333333333, temps: 3, ismove: true, coloridex: 0}, {Contenu: 2333333333333333, Time: 4, Ismove: False, ColorIndex: 0}, {Co ntent: 23333333333333, Time: 5, Ismove: Truex: 4}, {Conference: {Conference: 23333333333333, temps: 6, 6 Ismove: true, colorindex: 2}, {contenu: 233333333333333, temps: 7, Ismove: true, coloridex: 2}, {contenu: 23333333333333, temps: 7, ismove: true, coloririndex: 2}, {contenu: 233333333333333, 2}, {contenu: 233333333333333, Temps: 7, Ismove: True, ColorIndex: 2}, {Content: 233333333333333, Time: 7, Ismov e: True, ColorIndex: 2}, {Content: 2333333333333, Time: 7, Ismove: True: True: ColorIndex: 2 }, {Content: 233333333333333, Time: 7, Ismove: true, ColorIndex: 2}, {Content: 23333333333333, Time: 8, Ismove: True, ColorIndex: 0}, {Content: 23333333333333,, temps: 9, ism ove: VRAI, ColorIndex: 0}, {Content: 233333333333333, Time: 10, Ismove: true, ColorIndex: 0}, {Content: le professeur a très bien dit, je veux étudier dur "," ", est: 12, Ismove: Vrai, ColorIndex: 0}, {Content: 老师说的非常好 ， 我要好好学习了》》》》, Temps: 13, Ismove: true, ColorIndex: 0}, {Content: 老师说的非常好 ， 我要好好学习了》》》》, Temps: 14, Ismove: True, ColorIndex: 2}, {Content: Le professeur a très bien dit, je veux étudier dur "" "" "", est: 15, Ismove: False, ColorIndex: 0}, {Contenu: enseignant: l'enseignant a très bien dit, je veux étudier dur "" "" "" "", 16, Ismove: true, colorindex: 2}, {Content: le professeur a très bien dit, je veux Pour étudier "" "" ", Ismove: True, ColorIndex: 3}, {Content: Le professeur a très bien dit, je veux étudier dur" "" "", temps: 18, Ismove: True, ColorIndex: 2}, {Contenu: l'enseignant a très bien dit, je veux étudier dur "" "" ", Time: 19, Ismove: true, colorIndex: 0}, {Content: le professeur a très bien dit, je veux bien étudier" "" "", 20, Ismove: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: : true: true, colorindex: 3}, {contenu: le professeur a très bien dit, je veux étudier dur "" "" "", temps: 21, Ismove: true, colorindex: 0}, {conférence: le professeur a dit Très bien, je veux être bon, je veux être bon. La petite fusée est brossée =========, Temps: 23, Ismove: True, ColorIndex: 0}, {Content: Old Iron, les petits cadeaux ont pris une vague, les petites roquettes sont brossées ==== ==============: TRUE, ColorIndex: 0}, {Contenu: le vieux fer, les petits cadeaux ont pris une vague, les petites fusées de voiture Brosset Up =======, temps: 25, Ismove: True, ColorIndex: 3: 3}, {Content: Old Iron, les petits cadeaux ont pris une vague, les petites roquettes sont brossées ========, Temps: 26, Ismove: True, ColorIndex: 0}, {Content: Old: Old Fer, les petits cadeaux ont pris une vague, les petites roquettes de la voiture sont brossées ========, Temps: 27, Ismove: True, ColorIndex: 5} , {Contenu: le vieux fer, les petits cadeaux vont c'est une vague, la petite fusée de voiture Brosse ============================================ ==============================================. ==============================================. ==============, Ismove: False: 5}, {Content: Old Fer, les petits cadeaux ont pris une vague, la voiture est la voiture, la voiture est la voiture, la voiture est la voiture, la voiture est la voiture, la voiture est la voiture de petites fusées à brosser ============================= ==============================================. ==============================================. ================================. =, heure: 30, ismove: true, colorindex: 5}, {contenu: immédiatement après classe, varo lan monte ~~~, temps: 31, ismove: true, colorIndex: 5}, {contenu: je suis Aller à la classe tout de suite, Varo Blue Continent se lève ~~~, Time: 32, Ismove: true, ColorIndex: 2}, {Content: Immédiatement après la classe, Varo Blue Continent monte et se lève. Temps: 33, Ismove: true, colorindex: 2}, {Content: Immédiatement après classe, Varo Blue Continental se lève ~~~, Time: 33, Ismove: true, ColorIndex: 5}, {Content: il est hors de classe droit à droite Away, et Varo Lan a disparu. Ismove: true, colorIndex: 2}, {Content: immédiatement: immédiatement après le cours, le Varo Lan continental est venu ~~~, temps: 37, Ismove: true, colorindex: 2}] // en arrière les données de test (TestArray , TestarayCopy) / * objets Barbite, paramètres, paramètres, paramètres ce sont: 1.Sismo: si le barrage est le barrage mobile, 2.spe: la vitesse de mouvement du barrage, 3.col: la couleur du barrage, 4 .Text: Le texte du barrage * / / * Prototype Chain Method SettoPValue Définit les coordonnées verticales, le SetLeftValue définit les coordonnées horizontales, le mouvement complète la modification des coordonnées, Setid complète le paramètre de valeur d'ID * / fonction Capption (Ismove, SPE, Col, texte) {this.ismove = ismove this. .topindex = 0 this.occupypos = true this.top = 300 this.left = 0 this .setValue () this.setTopValue ()} légende.prototype.setTopValue = function () {for (var i = 0, len = topobjs .Length; i <len; i ++) {if (topo bjs [i] .blank) {this.top = topobjs [i]. .prototype.setLeftValue = function () {if (this.is.is.is.is move) {this.left = cavwidth} else {var contentLength = this.content.length var nowiteMleft = 420 -ContentLength * 9 this.left = NowiteMleft}} légende. topIndex] .Blank = true}} time + = 1 if (this.LaSestTime> 450) {topobjs [this.topindex] .blank = true}}} cappion.prototype.setid = function () {this.id = capoBJid capoBjid ++} var cap1 = new Capting (F. Alse, 1, 0, les petits cadeaux prennent une vague, double-clique 6666. Essence Essence Essence ) CapoBjs.push (Cap1) Cap1.setid () // Entourez le tableau et dessinez la fonction DrawallText () {ctx.Clearrect (0, 0, cavheighth, cavheight) en fonction des attributs de l'objet. (pour (pour (pour var i = 0, len = capoBjs. longueur; i <len; i ++) {ctx.fillStyle = capoBjs [i] .color ctx.font = bold 20px courrier new CTX.FillText (capoBjs [ I] .Content, ca Pobjs [i] .left, capoBjs [i] .top) ctx.closepath () capoBjs [i] .moving () // if (capoBjs [i] .left <- cavwidth) {// CapObjs.Splice (i, 1) / / If Excute cette instruction, Will a défaut parce que l'élément dans le tableau est null // La solution est: écrivez une nouvelle fonction pour actualiser le tableau //}} // Mettez à jour le tableau, l'objet est déjà super super Super Supprimer ceci d'un tableau quand il sort la fonction d'objet RefreshObjs (objs) {for (var i = objshlength -1; i> = 0; i-) {if (ibjs [i] .tlet < -cavwidth || objs [i] .laStTime> 450) {objs.splice (i, 1)}}} // Mettez à jour le tableau du tableau de la fonction d'objet de la barre,; [i] .time) if (nowitemtime == maintenant) {// La première hauteur de contrôle du contrôle n'était pas suffisante, puis le chemin de l'espace dans setOpValue // var nowiteMleft = getleftValue (TestArray [i]) // var Difftime = math.abs (nowitemtime -Lastitemtime) // if (difftime <6) {// capheight + = 30 // caph huit = capheight> 400? 20: capheight / /} var temcolor = couleurs [testaRay [i]. ColorIndex] varge temcap = new Légende (TestArray [i] .smove, temcolor, TestArray [i] .Content)) CapObjs [capoBjs.length- 1] .setid () temcap = null TestArray.splice (i, 1)}} // Lorsque l'utilisateur clique sur la fonction de rappel de Send SendCaption (argument) {var inputEletxt = inputEle.Value var w = paSeInt (vidéo .CurrentTime) var inputSisMominue = IsmoveInutele.checked var temobj = {contenu: inputEletxt, time: maintenant, Ismovele : InputSismovalue, ColororIndex: S eletsColOrindex} TestArray.push (temObj) inputle.value =} // function getleftValue (obj) {// if (obj.ismove) {// return 0 //} // else {// var ContactLength = Obj.Content.length // var NotheMleft = 420 -ContentLength * 9 // return Nowite , TestArray) CAPHEIGHT = 0 0 0 ClearInterval (Canvastimer) canvastimer = null initCanvas ()} var canvastimer = null // Initialize Canvas, lorsque vous commencez à jouer, la fonction initiée initCanvas () {if (canvastimer == null) {canvastimer = SetInterVal (argument) {drawallText () updateArrr Ay () refreshObjs (capoBjs)}, 10)}} // Fonction finale initCanvas // Copie la fonction du tableau CopyArray (Arr1, Arr2) {for (var i = 0, len = arr1 .Length; i <len; i ++) {arr2 [i] = arr1 [i]} // L'utilisateur de l'événement de la couleur envoie le code de contrôle des couleurs du barrage. Cas 2: prevselectIDEMID = Colororitemthrid Break; Cas 3: prevselectIteMID = ColorOtemFounfourth Break; = var eventTarget = e.target eventTarget.classname = selectColor var evetarid = eventTarget.SubString (9) Switch (evetarid) {case Frist: selectedColorinde x = 0 Break; ; Case quatrième: SelectColororIrIndex = 3 Break; }) // Progressive Strip modifie le code d'exécution video.AddeventListener (timeupdate, function () {var nowplaytime = video.currentTime var diftime = math.abs (nowPlayTime-s me) prevplaytime = nowplaytime if (difftime> 1) {Reinitcav ( )}}, False) // suspension vidéo du code d'exécution video.addeventListener (pause, function () {ClearInterval (Canvastimer) canvastimer = null}) ck, sendcaption) // entrée entre la surveillance incendiaire entréedele.addeventListener (keydown, function E) {var keyNum = 0 keyNum = window.event? / fonction b (aaaa) {// return aaaa () //} // b ()} // end})J'espère pouvoir aider les étudiants qui souhaitent faire un barrage, vous pouvez également vous rendre sur GitHub pour télécharger le code du projet complet: Adresse du projet Gitbub
Ce qui précède est tout le contenu de cet article.