Recentemente, comecei a desenvolver sites de vídeo de barragem e consegui a função da barragem através da tela no HTML5.
Então não fale sobre fofocas, vamos falar sobre pensar primeiro.
Ideia: a partir do layout da página, ele cobre uma tela na janela de vídeo gerada pela tag de vídeo e pode ser alcançada com o posicionamento absoluto. O mais importante é a exibição da barragem na tela de controle JS. e a barragem é a barragem. O objeto de barragem possui métodos incluem: Defina as coordenadas verticais horizontais da barragem, o movimento da barragem. O princípio da implementação é o evento em que o vídeo de audição começa a ser reproduzido e um cronômetro é gerado quando o vídeo é iniciado. Código da barragem, o timer também possui o código para atualizar a matriz da bala.
A imagem abaixo é uma captura de tela do efeito da barragem
Em seguida, inicie o código diretamente:
(Function () {window.onload = function () {var video = document.getElementsByTagName (video) [0] var cav = document.getElementsByTagName (Canvas) [0] // Defina a altura e a largura da tela constante var de cavwidththth = 800 var cavHeight = 420 cav.width = cavwidth cav.Height = cavHeight var ctx = cav.getContext (2d) // a matriz de barragem de armazenamento var capobjs = [] var lastitemTime var oito = 20 var inputele = documentElementsByClassName (Legenda -Input-text) [0] var sevele = document.getElementsByclassName (legenda-sendbutton) [0] var colorm = document.getElementsByclassName (colorItems) [0] ar ismoveInputEle = document.getElementsByclassName (input-inpusove) [ 0] // a cor de barragem var colors = [#fff,#ffcccc,#ccffcc,#ccccff,#ffffcc,#ccffff] var selectColorIndex = 0 var prevplaytime = 0 // dados de teste. // A matriz de versáteis no Canadá na tela variTobjs = [{em branco: true, valor: 20, índice: 0}, {em branco: true, valor: 50, índice: 1}, {em branco: true, valor: 80, índice: 2}, {em branco: true, valor: 110, índice: 3}, {em branco: true, valor: 140, índice: 4}, {em branco: true, valor: 170, índice: 5}, {{ Blank: True, Valor: 200, Índice: 6}, {em branco: true, valor: 230, índice: 7}, {em branco: true, valor: 260, índice: 8}, {em branco: true, valor: 290, Índice: 9}, {em branco: true, valor: 320, índice: 10}, {em branco: true, valor: 350, índice: 11}, {em branco: true, valor: 380, índice: 12}, {{{{ Em branco: true, valor: 410, índice: 13}] // Dados de teste Dados de teste var var TestArray = [{Content: abcdefghijklmnopqrstuvwxyz, tempo: 1, ismove: false, colorindex: 0}, {conne, tenda: 233333333333333, tempo: 2, ISMOVE: Verdadeiro, ColorIndex: 0}, {content: seco, hahaha ~~~~~~, tempo: 2, ismove: true, colorindex: 5}, {content: seco, hahaha ~~~~ Time: 2, ISMOVE: Verdadeiro, ColorIndex: 4}, {Conteúdo: Troada seca, hahaha ~~~~~~, tempo: 2, Ismove: True, ColorIndex: 4}, {Conteúdo: Torrada seca, hahaha ~~~ ~~ ~~ ~, Tempo: 2, ismove: true, colorindex: 0}, {content: torrada seca, hahaha ~~~~~, tempo: 2, ismove: true, colorindex: 0}, {content: 233333333333333, tempo: 3, ISMOVE: Verdadeiro, ColorIndex: 0}, {Conteúdo: 233333333333333, Tempo: 3, ISMOVE: True, ColorIndex: 0}, {Conteúdo: 233333333333333, tempo: 3, ISMove: T: T RUE, ColorIndex: 0}, {} Conteúdo : 23333333333333333, Tempo: 3, ISMOVE: True, ColorIndex: 0}, {Conteúdo: 2333333333, Tempo: 3, Ismove: True, ColorIndex: 0}, {Conteúdo: 23333333333333333333333333333333333333333333333333333333333333. 0 }, {Content: 2333333333333333, Time: 4, ISMOVE: False, ColorIndex: 0}, {CO NTENT: 23333333333333, Time: 5, ISMOVE: TRUEX: 4}, {conference: {conference: 2333333333333333, Time: 6, ISMOVE: TRUE , ColorInDex: 2}, {Content: 233333333333333, Time: 7, Ismove: True, ColorIndex: 2}, {Content: 23333333333333, Time: 7, ISMOVE: TRUE, COLORIRINDEX: 2 }, {Content: 233333333333333, Tempo: 7, ISMOVE: Verdadeiro, ColorIndex: 2}, {Conteúdo: 2333333333333333, Tempo: 7, Ismov E: True, ColorIndex: 2}, {Conteúdo: 233333333333333, Hora: 7, ISMove: True: True, ColorIndex: 2 }, {Content: 2333333333333333, Tempo: 7, Ismove: True, ColorIndex: 2}, {Content: 2333333333333333, tempo: 8, ISMOVE: True, ColorIndex: 0}, {content: 2333333333333333333333333333333333333, ISMOVE: Time: Time: Time: 0 {933333333333333333333333333333333333333, ISMOVE: Time: Verdadeiro, ColorIndex: 0}, {Conteúdo: 2333333333333333, Tempo: 10, Ismove: True, ColorIndex: 0}, {Conteúdo: O professor disse muito bem, quero estudar duro "," ", é: 12, ISMOVE: Verdadeiro, ColorIndex: 0}, {content: 老师说的非常好 ， 我要好好学习了》》》》, tempo: 13, ismove: true, colorindex: 0}, {content: 老师说的非常好 ， 我要好好学习了》》》》, tempo: 14, Ismove: Verdadeiro, ColorIndex: 2}, {Conteúdo: O professor disse muito bem, eu quero estudar duro "" "" "", é: 15, ismove: false, ColorIndex: 0}, {Conteúdo: Professor: Professor disse muito bem, eu quero estudar duro "" "" "" ", 16, Ismove: True, ColorIndex: 2}, {Conteúdo: o professor disse muito bem, eu quero Para estudar "" "" ", Ismove: True, ColorIndex: 3}, {Conteúdo: o professor disse muito bem, eu quero estudar duro" "" ", tempo: 18, ismove: verdadeiro, colorindex: 2}, {Conteúdo: o professor disse muito bem, eu quero estudar duro "" "", tempo: 19, ismove: verdadeiro, colorindex: 0}, {content: o professor disse muito bem, quero estudar bem "" "" "", 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: verdadeiro : True: Verdadeiro, ColorIndex: 3}, {Conteúdo: O professor disse muito bem, eu quero estudar duro "" "" "" ", tempo: 21, ismove: verdadeiro, colorindex: 0}, {conferência: o professor disse Muito bem, eu quero ser bom, eu quero ser bom. Rocket pequeno é escovado =========, Tempo: 23, ISMOVE: Verdadeiro, ColorIndex: 0}, {Conteúdo: Antigo ferro, os pequenos presentes levaram uma onda, os pequenos foguetes são escovados ======= ===============: Verdadeiro, ColorIndex: 0}, {Conteúdo: Ferro velho, pequenos presentes levaram uma onda, foguetes de carros pequenos se escondem =======, hora: 25, ISMOVE: Verdadeiro, ColorIndex: 3: 3}, {Conteúdo: Antigo ferro, os pequenos presentes levaram uma onda, os pequenos foguetes são escovados =========, Horário: 26, Ismove: True, ColorIndex: 0}, {Conteúdo: Old: Iron antigo, pequenos presentes levaram uma onda, os pequenos foguetes do carro são escovados ==========, Horário: 27, Ismove: Verdadeiro, ColorIndex: 5} , {Conteúdo: Iron velho, pequenos presentes vão, é uma onda, o pequeno carro -foguete escova ================================================== =================================================== =================================================== ===============, ISMOVE: FALSO: 5}, {Conteúdo: Iron antigo, os pequenos presentes levaram uma onda, o carro é o carro, o carro é o carro, o carro é o carro, o carro é o carro, o carro é o carro pequeno para escovar ================================= =================================================== =================================================== =======================================, ISMOVE: Rocketing antigo de Trutex ========== =, tempo: 30, ismove: true, colorindex: 5}, {content: imediatamente após a classe, Varo Lan está subindo ~~~, tempo: 31, ismove: true, colorindex: 5}, {content: eu sou Indo para a aula imediatamente, o Varo Blue Continent está se levantando ~~~, tempo: 32, ISMOVE: True, ColorIndex: 2}, {Conteúdo: imediatamente após a classe, o Varo Blue Continent sobe e se levanta. Tempo: 33, ISMOVE: Verdadeiro, ColorIndex: 2}, {Conteúdo: imediatamente após a classe, Varo Blue Continental se levanta ~~~, tempo: 33, ismove: true, colorindex: 5}, {content: está fora da classe corretamente fora, e Varo Lan se foi. ISMOVE: Verdadeiro, ColorIndex: 2}, {Conteúdo: imediatamente: imediatamente após a classe, o vara Lan continente surgiu ~~~, hora: 37, ISMOVE: True, ColorIndex: 2}] // Volte os dados do teste (TestArray , Testaycopy) /*Objetos, parâmetros, parâmetros, parâmetros, 1.ismo: se a barragem é a barragem móvel, 2.Se: a velocidade de movimento da barragem, 3.Col: a cor da barragem, 4 .Text: O texto da barragem* / /*Método da cadeia de protótipos SetpopValue define as coordenadas verticais, o SetleftValue define a coordenada horizontal, a mudança completa a mudança de coordenada, o setid conclui a configuração do valor da identificação* / Função (ISMOVE, SPE, SPE, Col, texto) {this.ismove = ismove isso. .topindex = 0 this.occupyPos = true this.top = 300 this.left = 0 this .SetValue () this.setTopValue ()} Cation.prototype.setTopValue = function () {for (var i = 0, len = topobjs .Length; .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.leftf = NowItemleft}} Legenda. topIndex] .blank = true}} time += 1 if (this.latesttime> 450) {topoBJs [this.topindex] .blank = true}}} Cappion.prototype.setId = function () {this.id = capobjid capobjid ++} var cap1 = novo capitão (F. Alse, 1, 0, pequenos presentes levam uma onda, clique duplo 6666. Essência Essência Essência ) Capobjs.push (cap1) cap1.setId () // circunda a matriz e desenhe a função drawallText () {ctx.clearrect (0, 0, CavHex, CavHeight) de acordo com os atributos do objeto (para (para (para var i = 0, len = capobjs. comprimento; i <len; i ++) {ctx.fillstyle = capobjs [i] .color ctx.font = negrito 20px courier 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) / /se esclarecer esta declaração, falha, porque o item na matriz é nulo // Solução é: Escreva uma nova função para atualizar a matriz //}} // Atualizar a matriz, o objeto já é super super super excluir isso de uma matriz quando sai da função de objeto refreshobjs (objs) {for (var i = objs.length -1; i> = 0; i-) {if (ibjs [i] .Let < -Cavwidth ||. [i] .Time) if (NowItemTime == agora) {// A primeira altura de controle do controle não foi suficiente e, em seguida, o caminho do espaço no setepvalue // var nowitemleft = getLeftValue (testArray [i]) // var DIFFTIME = MATH.ABS (NowItemTime -LastItemTime) // If (Difftime <6) {// CapHeight += 30 // CapH oito = CapHeight> 400? colorindex] Varge temcap = nova legenda (testArray [i] .smove, temcolor, testArray [i] .Content)) CapobJS [capobjs.length- 1] .setId () temcap = nulo testArray.splice (i, 1)}}}}}}} // Quando o usuário clica na função de retorno de chamada de send sendcaption (argumentos) {var inputEleTeTxt = inputEle.Value var w = parseint (video .CurrentTime) var inputismOvalue = ismoveInpatele.Checked var temobj = {content: inputEletxt, hora: agora, ismove : InputismOvalue, colororIndex: s elegeteccolorindex} testArray.push (temobj) inputle.value =} // function getLeftValue (obj) {// if (obj.ismove) {// retorna 0 //} // {// contactLength = obj.content.length // var no NoteMleft = 420 -contentLength * 9 // return Nowited //} //} ///} // reinicie a tela para alterar a função reinitcav (argumento) {// testArray copyArray (testaycopy , TestArray) CapHeight = 0 0 0 ClearInterval (CanvastImer) CanvastImer = null initCcanvas ()} var CanvastImer = null // inicialize a tela, ao começar a jogar, a função iniciou initCanvas () {if (canvastImer == null) {CanVASTIMER = = SetInterval (argumento) {drawAlText () updateRrr ay () refreshobjs (capobjs)}, 10)}} // Função final initCanvas // copie a função Array copyArray (Ar1, Ar2) {para (var i = 0, len = ARR1 .Leng, i <len; Caso 2: PrevSelectImid = Break de Cororitemthrid; = var eventTarget = E.Target EventTarget.className = SelectColor Var Evetarid = EventTarget.substring (9) Switch (EvetarId) {Case Frist: SelectedColorInde X = 0 Break; Caso; }) // A tira progressiva altera o código de execução video.addeventListener (timeUpdate, function () {var nowplayTime = video.CurrentTime var diftime = math.abs (nowplaytime-s) prevplaytime = nowplaytime if (difftime> 1) {reinitcav ( )}}, False) // suspensão em vídeo do código de execução video.addeventListener (pausa, function () {clearInterval (canvastimer) canvastImer = null}) ck, sendcaption) // entrada inserir monitoramento inputdele.addeventlistener (keydown, função (função (função (função (função) E) {var keynum = 0 keynum = window.event? /função b (aaaa) {// retorna aaaa () //} // b ()} // end})Espero poder ajudar os alunos que desejam fazer uma barragem, você também pode ir ao Github para baixar o código completo do projeto: endereço do projeto GitBub
O acima é todo o conteúdo deste artigo.