1. Zeigen Sie zunächst das Originalbild des Sperrvideos, die Fakten sprechen für sich.
2.Code-Anzeige
1>HTML-Code-Anzeige
<div class=barrage> <video id=myvideo autoplay loop width=100% height=300px> <source src=video/1.mp4> </video> <div class=screen> <div class=content> <!- -Inhalt wird hier angezeigt--> </div> </div> <!--Dialogfeld senden--> <div class=send> <input type=text class=s_text placeholder=Verwenden Sie die Eingabetaste, um Barrage schnell zu senden/> <input type=button class=s_btn value=Send/> <!--Close barrage function--> <span class=barrage_close>Close barrage</span> < !-- Mute Funktion--> <span id=muted>Stummschaltung einschalten</span> </div> </div>
2>CSS-Code-Anzeige
*{ padding: 0; margin: 0;}input{ context: none;}.barrage { position: relative; height: 250px;}#myvideo{ position: absolute; /* height :300px; */ top: -50px; left: 0; z-index: -1;}.barrage .screen { position: absolute; rechts: 0px; Breite: 300px;}.barrage .content { position: relative; width: 250px; opacity: 0.5; =100); *//***Für Browser ie8 oder höher oder früher****/ Hintergrundfarbe: transparent; 1;}.barrage .screen div { Position: absolute; Schriftgröße: Fettdruck: 40;}.barrage .send { Position: absolut; Breite: 100 Pixel; Z-Index: 1; /*background: #000;*/ background: rgba(0,0,0,0.5); /*display: none;*/}.barrage:hover .send{ display: block; }.barrage .send .s_text { width: 60%; height: 35px; Schriftfamilie: Microsoft Yahei; Deckkraft: 0,8;}.barrage .s_btn { width: 105px; line-height: 35px; color: #fff; -Radius: 10px; Deckkraft: 0,8;}.barrage_close,#muted { width: 80px; line-height: 10px; : 0,8;}#muted{ Hintergrund:Gelb;}.barrage_close1{ Farbe: #fff; Hintergrund: #fff;}/* CSS-Animation*/.content div{ Animation:Text 15s unendlich normal;}@keyframes Text{ 0%{ left:100%; } 80 %{ left:0%; } 100%{ left:-30% }}3>JS-Code-Anzeige
$(function () { $(.barrage_close).click(function(){ $(.content div).remove(); }); init_barrage();});//Legen Sie den Sperrinhalt zum Speichern in ein Array it var arr=[];var h=arr.push();// Überwachen Sie das Senden, drücken Sie die Eingabetaste, um document.οnkeydοwn=function(event){ var e = event || zu senden window.event; if(e && e.keyCode==13){ // console.log(11111); $(.send .s_btn);//Kommentar senden $(.send .s_btn); ).click(function () { var text = $(.s_text).val(); if (text == ) { warning('Ihr Inhalt ist leer, bitte geben Sie vor dem Senden die Kommentare ein'); return false; } var _lable = $(<div style='right:20px;top:0px;opacity:1;color: + getColor() + ;'class='content_text'> + text + </div>); $(.content).append(_lable.show()); $(.s_text).val();});//Barrage-Technologiefunktion initialisieren init_barrage() { var _top = 0; $(.content div).show().each(function () { var _left =$ ( .barrage).width();//Die maximale Breite des Browsers (auch die Höhe des Browsers), als Wert der linken Positionierung console.log(_left); =$(.barrage).height();//Maximale Höhe des Videofensters console.log(_height); _top += 35; if (_top >= (_height - 150)) { _top = 0; this ).css({ left: _left, top: _top, color: getColor() }); // Popup-Text regelmäßig // var time = 10000; // if ($(this).index() % 2 == 0) { // time = 15000; // } // $(this).animate({ left: - + _left + px }, time, function () { // $(this).remove(); // });}//Eine zufällige Farbe abrufen 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);//Stellen Sie die Geschwindigkeit der Videowiedergabe ein//video.playbackRate = 0.5;//Video mute video.muted = false;mute.οnclick=function(){ if(video.muted){ video.muted = false; mute.innerText = 'Mute einschalten'; // console.log(1111) }else{ video.muted = true; mute.innerText = 'Stummschaltung ausschalten'; console.log(2222) }}3. Demonstration des Codeeffekts
<a style="Rand: 0px; Abstand: 0px; Umriss: keine; Zeilenhöhe: 25,2px; Schriftgröße: 14px; Breite: 660px; Überlauf: versteckt; klar: beide; Schriftfamilie: 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 width : 100 %; height:250px;}#myvideo{ position: absolute; /* width: 100%; -50px; links: 0; z-index: -1;</style>ZusammenfassenDas Obige ist die vom Herausgeber eingeführte Video-Sperrfunktion. Ich hoffe, sie wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!
Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!