1. Tout d’abord, montrez l’image originale de la vidéo de barrage, les faits parlent d’eux-mêmes.
2. Affichage du code
1>affichage du code 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> <!- -Le contenu est affiché ici--> </div> </div> <!--Boîte de dialogue Envoyer--> <div class=send> <input type=text class=s_text placeholder=Utilisez Entrée pour envoyer rapidement le barrage/> <input type=button class=s_btn value=Send/> <!--Fermer la fonction de barrage--> <span class=barrage_close>Fermer le barrage</span> < !-- Muet function--> <span id=muted>Activer le mode muet</span> </div> </div>
2>affichage du code CSS
*{ remplissage : 0 ; marge : 0 ;}entrée{ contour : aucun ;}.barrage { position : relative ; hauteur : 250 px ;}#ma vidéo{ position : absolue /* hauteur : 100 % ; :300px; */ top: -50px; gauche: 0; z-index: -1;}.barrage .screen { position: top: 0px; droite : 0px ; largeur : 100 % ; hauteur : 300 px ;}.barrage .screen .content { position : relative ; hauteur : 250 px ; arrière-plan : #000 ; =100); *//***Pour les navigateurs ie8 ou supérieurs ou antérieurs****/ background-color : transparent z-index ; 1;}.barrage .screen .content div { position : absolue ; taille de police : 20px ; espace blanc : nowrap ; z-index : 40 ;}.barrage .send ; { position : absolue ; bas : 0px ; largeur : 100 % ; hauteur : 55px ; 1; /*arrière-plan : #000;*/ arrière-plan : rgba(0,0,0,0.5); texte-align : centre ; /*affichage : aucun;*/}.barrage:hover .send{ affichage : bloc ; }.barrage .send .s_text { largeur : 60 % ; hauteur : 35 px ; famille de polices : Microsoft Yahei ; rayon de bordure : 20 px ; opacité : 0,8 ;}.barrage .send .s_btn { largeur : 105 px ; hauteur de ligne : 35px ; fond : #22B14C ; -rayon : 10px ; opacité : 0.8;}.barrage_close,#muted { width: 80px; height: 30px; border-radius: 10px; text-align: #22B14C; : 0.8;}#muted{ background:jaune;}.barrage_close1{ couleur : #fff; arrière-plan : #fff;}/* css animation*/.content div{ animation:Text 15s infinite normal;}@keyframes Text{ 0%{ gauche:100% } 20%{ gauche:75% } 80; %{ gauche :0% } 100 %{ gauche :-30% }}3>affichage du code js
$(function () { $(.barrage_close).click(function(){ $(.content div).remove(); }); init_barrage();});//Placez le contenu du barrage dans un tableau pour le stocker it var arr=[];var h=arr.push();// Surveiller l'envoi, appuyez sur Entrée pour envoyer le document.οnkeydοwn=function(event){ var e = event || window.event; if(e && e.keyCode==13){ // console.log(11111); $(.send .s_btn).click();//Soumettre le commentaire $(.send .s_btn .click(function () { var texte = $(.s_text).val(); if (text == ) { alert('Votre contenu est vide, veuillez remplir les commentaires avant de l'envoyer'); return false; $(<div style='right:20px;top:0px;opacity:1;color: + getColor() + ;'class='content_text'> + text + </div>); $(.content).append(_lable.show()); $(.s_text).val();});//Initialiser la fonction technologique de barrage init_barrage() { var _top = 0; $(.content div).show().each(function () { var _left =$ ( .barrage).width();//La largeur maximale du navigateur (également la hauteur du navigateur), comme valeur de positionnement à gauche console.log(_left); =$(.barrage).height();//Hauteur maximale de la fenêtre vidéo console.log(_height); _top += 35; if (_top >= (_height - 150)) { _top = 0; this ).css({ left: _left, top: _top, color: getColor() }); // Texte contextuel régulièrement // var time = 10000; // if ($(this).index() % 2 == 0) { // time = 15000; // } // $(this).animate({ left: - + _left + px }, time, function () { // $(this).remove(); // }); });}//Obtenir une fonction de couleur aléatoire 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( muet);console.log(muted);//Définir la vitesse de lecture vidéo//video.playbackRate = 0.5;//Vidéo muet 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 = 'Désactiver le mode muet'; console.log(2222) }}3. Démonstration des effets de code
<a style="margin: 0px; padding: 0px; contour: aucun; hauteur de ligne: 25,2px; taille de police: 14px; largeur: 660px; débordement: caché; clair: les deux; famille de polices: 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 { position : relative largeur ; : 100%; hauteur:250px;}#mavidéo{ position: absolue; /* largeur: 100%; -50px ; gauche : 0 ; indice z : -1 ;</style>RésumerCe qui précède est la fonction de barrage vidéo implémentée en HTML5 introduite par l'éditeur. J'espère qu'elle vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !
Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !