1. Primeiro, mostre a imagem original do vídeo da barragem, os fatos falam por si.
2. Exibição de código
1> exibição de código HTML
<div class=barrage> <video id=myvideo autoplay loop width=100% height=300px> <source src=video/1.mp4> </video> <div class=screen> <div class=content> <!- -O conteúdo é exibido aqui--> </div> </div> <!--Caixa de diálogo de envio--> <div class=send> <input type=text class=s_text placeholder=Use Enter para enviar barragem rapidamente/> <input type=button class=s_btn value=Send/> <!--Fechar barrage function--> <span class=barrage_close>Fechar barrage</span> < !-- Mute function--> <span id=muted>Ativar mudo</span> </div> </div>
2> exibição de código css
*{ preenchimento: 0; margem: 0;}entrada{ contorno: nenhum;}.barrage { posição: largura relativa: 100%; :300px; */ topo: -50px esquerda: 0; índice z: -1;}.barrage .screen { posição: topo absoluto: 0px; direita: 0px; largura: 100%; altura: 300px;}.barrage .screen .content {posição: largura relativa: 100%; altura: 250px; =100); *//***Para navegadores ie8 ou superior ou anterior****/ cor de fundo: índice z: 1;}.barrage .screen .content div {posição: absoluto; tamanho da fonte: 20px; peso da fonte: negrito; altura da linha: 40px; { posição: absoluto; inferior: 0px; largura: 100%; altura da linha: 55px; 1; /*background: #000;*/ background: rgba(0,0,0,0.5); text-align: center; /*display: none;*/}.barrage:hover .send{ display: block; }.barrage .send .s_text { largura: 60%; altura: 35px; altura da linha:35px; família de fontes: Microsoft Yahei; opacidade da borda: 0,8;}.barrage .send .s_btn {largura: 105px; altura da linha: 35px; -raio: 10px; 0,8;}.barrage_close,#muted { largura: 80px; altura da linha: 30px; raio da borda: 10px; : 0,8;}#muted{ background:yellow;}.barrage_close1{ cor: #fff; background: #fff;}/* animação css*/.content div{ animação:Texto 15s infinito normal;}@keyframes Texto{ 0%{ esquerda:100% } 20%{ esquerda:75%; %{ esquerda:0% } 100%{ esquerda:-30% }}3> exibição de código js
$(function () { $(.barrage_close).click(function(){ $(.content div).remove(); }); init_barrage();});//Coloque o conteúdo da barragem em um array para armazenar it var arr=[];var h=arr.push();// Monitore o envio, pressione enter para enviar document.οnkeydοwn=function(event){ var e = event || window.event; if(e && e.keyCode==13){ // console.log(11111); ).click(function () { var text = $(.s_text).val(); if (text == ) { alert('Seu conteúdo está vazio, por favor preencha os comentários antes de enviar'); return false } var _lable = $(<div style='right:20px;top:0px;opacity:1;color: + getColor() + ;'class='content_text'> + texto + </div>); $(.content).append(_lable.show()); $(.s_text).val();});//Inicializar tecnologia de barragem function init_barrage() { var _top = 0; .barrage).width();//A largura máxima do navegador (também a altura do navegador), como o valor do posicionamento à esquerda console.log(_left); =$(.barrage).height();//Altura máxima da janela de vídeo console.log(_height); _top += 35; this ).css({ left: _left, top: _top, color: getColor() }); // Aparece texto regularmente // var time = 10000; // if ($(this).index() % 2 == 0) { // tempo = 15000; // } // $(this).animate({ left: - + _left + px }, tempo, função () { // $(this).remove(); // } });}//Obter uma cor aleatória 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);//Definir a velocidade de reprodução do vídeo//video.playbackRate = 0.5;//Vídeo mudo video.muted = false;mute.οnclick=function(){ if(video.muted){ video.muted = false; mute.innerText=''; // console.log(1111) }else{ video.muted = true; mute.innerText=''; console.log(2222) }}3. Demonstração do efeito do código
<a style="margem: 0px; preenchimento: 0px; contorno: nenhum; altura da linha: 25,2px; tamanho da fonte: 14px; largura: 660px; overflow: oculto; claro: ambos; família de fontes: 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 { posição: largura relativa; : 100%; altura:250px;}#meuvídeo{ posição: absoluto; /* largura: 100%; -50px; esquerda: 0; índice z: -1;}</style>ResumirO texto acima é a função de barragem de vídeo implementada em HTML5 introduzida pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!
Se você acha que este artigo é útil para você, fique à vontade para reimprimi-lo, indique a fonte, obrigado!