HTML5 implementa la función de bombardeo de video

1. Primero, muestra la imagen original del vídeo del bombardeo, los hechos hablan por sí solos.

2. Visualización de código

1> visualización de código html

 <div class=barrage> <id de video=ancho del bucle de reproducción automática de mi video=100% altura=300px> <fuente src=video/1.mp4> </video> <div class=pantalla> <div class=content> <!- -El contenido se muestra aquí--> </div> </div> <!--Enviar cuadro de diálogo--> <div class=send> <input type=text class=s_text placeholder=Utilice Enter para enviar rápidamente bombardeo/> <input type=button class=s_btn value=Enviar/> <!--Cerrar función de bombardeo--> <span class=barrage_close>Cerrar bombardeo</span> <!-- Silenciar función--> <span id=muted>Activar silencio</span> </div> </div>

2> visualización del código CSS

 *{ relleno: 0; margen: 0;}entrada{ contorno: ninguno;}.barrage { posición: relativo; ancho: 100%; altura: 250px;}#myvideo{ posición: absoluta /* ancho: 100%; :300px; */ arriba: -50px; izquierda: 0; índice z: -1;}.barrage .screen { posición: absoluta; derecha: 0px; ancho: 100%; alto: 300px;}.barrage .screen .content { posición: relativo; ancho: 100%; alto: 250px; fondo: #000; =100); *//***Para navegadores ie8 o superiores o anteriores****/ color de fondo: transparente z-index: 1;}.barrage .screen .content div { posición: absoluta; tamaño de fuente: 20px; peso de fuente: negrita; espacio en blanco: altura de línea: 40px; { posición: absoluta; abajo: 0px; ancho: 100%; alto: 55px; alto de línea: 55px; 1; /*fondo: #000;*/ fondo: rgba(0,0,0,0.5); text-align: center; /*display: none;*/}.barrage:hover .send{ display: block; }.barrage .send .s_text { ancho: 60%; alto: 35px; alto de línea: 35px; familia de fuentes: Microsoft Yahei; radio del borde: 20 px; opacidad: 0,8; }.barrage .send .s_btn { ancho: 105 px; alto: 35 px; -radio: 10px; opacidad: 0.8;}.barrage_close,#muted {ancho: 80px; alto: 30px; alto de línea: 30px; cursor: opacidad; : 0.8;}#silenciado{ fondo:amarillo;}.barrage_close1{ color: #fff; fondo: #fff;}/* animación css*/.content div{ animación:Texto 15s infinito normal;}@keyframes Texto{ 0%{ izquierda:100% } 20%{ izquierda:75%; %{ izquierda:0% } 100%{ izquierda:-30% }}

3> visualización del código js

 $(function () { $(.barrage_close).click(function(){ $(.content div).remove(); }); init_barrage();});//Coloque el contenido del bombardeo en una matriz para almacenar it var arr=[];var h=arr.push();// Monitorear el envío, presione enter para enviar el documento.οnkeydοwn=function(event){ var e = event || window.event; if(e && e.keyCode==13){ // console.log(11111); $(.send .s_btn).click() } };//Enviar comentario $(.send .s_btn); ).click(función () { var texto = $(.s_text).val(); si (texto == ) { alert('Su contenido está vacío, complete los comentarios 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 la función de tecnología de bombardeo init_barrage() { var _top = 0; $(.content div).show().each(function () { var _left =$ ( .barrage).width();//El ancho máximo del navegador (también la altura del navegador), como valor de posicionamiento izquierdo console.log(_left); =$(.barrage).height();//Altura máxima de la ventana de video console.log(_height); _top += 35; if (_top >= (_height - 150)) { _top = 0; this ).css({ left: _left, top: _top, color: getColor() }); // Aparece texto emergente regularmente // var time = 10000; // if ($(this).index() % 2 == 0) { // tiempo = 15000 // } // $(this).animate({ izquierda: - + _left + px }, hora, función () { // $(this).remove(); // });}//Obtener una función de color aleatoria getColor() { return '#' + (function (h) { return new Array(7) - h.length).join(0) + h }) ((Math.random() * 0x1000000 << 0).toString(16))}var video=document.getElementById(mivideo);var mute=document.getElementById( muted);console.log(muted);//Establecer la velocidad de reproducción del video//video.playbackRate = 0.5;//Video silenciado video.muted = false;mute.οnclick=function(){ if(video.muted){ video.muted = false; mute.innerText=''; // console.log(1111) }else{ video.muted = true; mute.innerText=''; mute.innerText = 'Desactivar silencio'; consola.log(2222) }}

3. Demostración del efecto del código

 <a estilo="margen: 0px; relleno: 0px; contorno: ninguno; altura de línea: 25,2px; tamaño de fuente: 14px; ancho: 660px; desbordamiento: oculto; claro: ambos; familia de fuentes: tahoma, arial, Microsoft YaHei;"> 
 <div class=barrage> <id de video=ancho del bucle de reproducción automática de mi video=100% altura=300px> <fuente src=video/1.mp4> </video></div><style> .barrage { posición: ancho relativo; : 100%; altura:250px;}#myvideo{ posición: absoluta;* ancho: 100%; altura:300px; -50px; izquierda: 0; índice z: -1;}</estilo>
 Resumir
 Lo anterior es la función de bombardeo de videos implementada en HTML5 introducida por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!
 Si cree que este artículo le resulta útil, puede reimprimirlo. Indique la fuente, ¡gracias!