JavaScript CSS3 zur Implementierung einer einfachen Video-Sperrfunktion
|
In diesem Artikel wird versucht, eine Demo zur Simulation der einfachsten Video-Sperrfunktion zu schreiben. Ideen:Legen Sie ein <div> fest, das dieselbe Größe wie das wiedergegebene Video hat, und platzieren Sie dieses Div-Tag über dem Video, um die Aufzählungskommentare einzufügen. Fügen Sie auf der rechten Seite des Videos eine <ul>-Liste ein, um die Aufzählungsliste der Kommentare anzuzeigen. Die Aufzählungskommentare auf dem Bildschirm platzieren den Inhalt im <span>-Tag. Im Allgemeinen fliegt eine Textzeile von links nach rechts. Der Einfachheit halber wird für diese Bewegung das Übergangsattribut von CSS3 verwendet . Position ist auf absolut eingestellt, Wenn Sie auf „Senden“ klicken, erhalten Sie den Inhalt der Eingabe, das aktuelle Datum und den Fortschritt der Videowiedergabe (video.currentTime) und speichern diesen Inhalt als Objekt in einem Array. Fügen Sie der Div-Maske das Span-Tag zum Platzieren des Aufzählungskommentars hinzu, legen Sie dessen linke Seite fest, und der Übergang erfolgt von der aktuellen linken Seite zur nächsten linken Seite, wodurch eine Bewegung erreicht wird. Nach dem Übergang ist das Span-Tag nutzlos. Verwenden Sie removeChild, um es aus dem übergeordneten Element zu entfernen. Fügen Sie gleichzeitig das generierte <li>-Tag zu ul hinzu. Code:
<!--Erstellt von CC am 11.10.2017-->
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
</Kopf>
<style type="text/css">
.mainBody{
Rand: 10px automatisch;
Textausrichtung: zentriert;
Schriftfamilie: Arial;
Position: relativ;
}
.schicken{
Breite: 700px;
Rand: 0px automatisch;
Textausrichtung: links;
}
.meine-msg{
Breite: 85 %;
Höhe: 35px;
}
.mein-btn{
Hintergrundfarbe: #ccd0d7;
Rahmenradius: 8px;
Breite: 50px;
Höhe: 35px;
Rand links: 30px;
Rand: 1px durchgezogen #00a1d6;
}
.meine-Liste{
Anzeige: Inline-Block;
vertikale Ausrichtung: oben;
Rand: 1px durchgezogen #ccd0d7;
Breite: 200px;
Höhe: 450px;
Überlauf: automatisch;
}
.mein-tm{
Position: absolut;
oben: 0px;
Höhe: 366px;
Breite: 710px;
Überlauf: versteckt;
}
.rtol{
Position: absolut;
Anzeige: Inline-Block;
Höhe: 28px;
Überlauf: versteckt;
Schriftgröße: 24px;
Farbe: #fff;
links: 720px;
-moz-Übergang: links 4 s linear;
-webkit-transition:links 4s linear;
-o-Übergang: links 4 s linear;
}
ul{
Textausrichtung: links;
Listenstiltyp: keiner;
Rand oben: 0px;
Polsterung links: 8px;
}
li Spanne {
Textausrichtung: links;
Farbe: #99a2aa;
}
</Stil>
<Text>
<div>
<div Klasse="Hauptteil">
<div Stil="Anzeige:Inline-Block">
<video src="/big_buck_bunny.mp4" height="400" Steuerung></video>
<div Klasse="senden">
<input type="text" class="my-msg" id="msgcc" placeholder="Sperrfeuer senden~">
<input type="button" class="my-btn" id="sendcc" value="Senden">
</div>
</div><div class="meine-Liste">
<span style="color: #00a1d6">~Bullet-Bildschirm~</span>
<hr style="border-top:2px solid #185598"/>
<ul id="Nachricht">
</ul>
</div>
<div Klasse="mein-tm" id="tmbox">
</div>
</div>
</div>
<Skript>
var tm = document.getElementById('tmbox');
var btn = document.getElementById('sendcc');
var video = document.getElementsByTagName('video')[0];
var Liste = document.getElementById('msg');
var msg = document.getElementById('msgcc');
var infor = [];
window.onload=Funktion()
{
//Position festlegen tm.style.left=(document.body.offsetWidth-911)/2+'px';
}
Fenster.onresize = Funktion(){
tm.style.left=(document.body.offsetWidth-911)/2+'px';
}
//Das aktuelle Datum abrufen Funktion getNowFormatDate() {
var date = neues Datum();
var Trennzeichen1 = "-";
var Trennzeichen2 = ":";
var Monat = Datum.getMonth() + 1;
var strDate = date.getDate();
wenn (Monat >= 1 und Monat <= 9) {
Monat = "0" + Monat;
}
wenn (strDate >= 0 und strDate <= 9) {
strDate = "0" + strDate;
}
var aktuellesDatum = Monat + Trennzeichen1 + strDate
+ " " + date.getHours() + seperator2 + date.getMinutes();
aktuelles Datum zurückgeben;
}
//Drücken Sie die Senden-Taste btn.onclick=function(){
var Wert=Nachricht.Wert;
wenn(Wert&&Wert!='')
{
var itemInfor={};
itemInfor.value=Wert;
itemInfor.showTime=video.currentTime; //ZeititemInfor.sendTime=getNowFormatDate(); //Sendezeit//Sperrlistevar li=document.createElement('li');
li.className='mein-li';
li.innerHTML="<span> > "+Wert+"</span>";
Liste.AnhängenKind(li);
//Aktueller Aufzählungsbildschirm var text=document.createElement('span');
text.klassenName='rtol';
text.style.top=Math.floor( Math.random()*12 )*30+'px';
text.innerHTML=Wert;
tm.appendChild(text);
//Linke Position setTimeout(function(){
text.stil.links=-Wert.Länge*25+'px';
},200);
//Lösche dann den Span, der nicht angezeigt wird setTimeout(function(){
tm.removeChild(Text)
//Um zu verhindern, dass die vorhandenen Aufzählungskommentare mit der aktuell gesendeten Anzeige in Konflikt geraten, fügen Sie sie hier dem Array hinzu infor.push(itemInfor);
},5000
)
}
}
//Vorhandenen Bullet-Screen anzeigen setInterval(function(){
wenn(video.paused==false)
{
infor.forEach(Funktion(Element){
var aktuelleZeit=video.aktuelleZeit;
wenn(item.showTime<video.currentTime&&item.showTime>=(video.currentTime-0.5))
{
var text = document.createElement('span');
text.klassenName='rtol';
text.style.top=Math.floor( Math.random()*12 )*30+'px';
text.innerHTML=Element.Wert;
tm.appendChild(text);
//Linke Position setTimeout(function(){
text.stil.links=-(item.value.length*25)+'px';
},200);
//Lösche dann den Span, der nicht angezeigt wird setTimeout(function(){
tm.removeChild(text);
},5000
)
}
});
}
},500)
</Skript>
</body>
</html>Wirkung:
Obwohl dies einfach zu schreiben ist, besteht ein großes Problem darin, dass das Übergangsattribut links nicht angehalten werden kann . Daher kann die Übergangsanimation natürlich nur warten, bis sie abgeschlossen ist. Mit anderen Worten wird die Bewegung jedes <span>-Tags mithilfe eines Intervall-Timers abgeschlossen. Es auf diese Weise zu schreiben ist jedoch etwas komplizierter. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Zusammenfassung der Methoden zum Löschen des Cache im Linux-System
>>: Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17
Artikel empfehlen
Detailliertes Beispiel für die Blockierung von Flash durch HTML-Elemente
Code kopieren Der Code lautet wie folgt: wmode-Pa...
Detaillierte Erklärung, wie NGINX PV, UV und unabhängige IP der Website zählt
Nginx: PV, UV, unabhängige IP Jeder, der Websites...
Nginx-Weiterleitung basierend auf URL-Parametern
Anwendungsszenarien: Der Sprungpfad muss entsprec...
Tutorial zur Installation von phpMyAdmin unter Linux centos7
yum install httpd php mariadb-server –y Notieren ...
react+antd.3x implementiert IP-Eingabefeld
In diesem Artikel wird der spezifische Code von r...
Detaillierte Erklärung zur Verwendung relativer Pfade in HTML, um Dateien auf allen Verzeichnisebenen abzurufen
Das Konzept des relativen Pfades Verwenden Sie de...
Tutorial zur Implementierung der Zwei-Wege-Authentifizierung durch OpenSSL (mit Server- und Client-Code)
1. Hintergrund 1.1 Probleme In einem aktuellen Pr...
Lösung für Nginx-Installationsfehler
1. Entpacken Sie nginx-1.8.1.tar.gz 2. Entpacken ...
Der Prozess der Installation von Docker im Linux-System
In diesem Blog führe ich Sie in einfachen Schritt...
Lösung zur Schnittstellenverformung beim Einstellen der Frameset-Höhe
Derzeit habe ich ein Projekt erstellt, die Schnitt...
Ein Artikel, der Ihnen HTML beibringt
Wenn Sie nicht unbedingt Künstler werden möchten,...
Ein Artikel, der Ihnen hilft, die Vererbung und Prototypenkette von JS zu verstehen
Inhaltsverzeichnis Vererbung und Prototypenkette ...
Natives JS zum Erstellen einer Drag-Fotowand
Dieser Artikel zeigt Ihnen eine verschiebbare Fot...
Detailliertes Beispiel für MySQL-Joint-Tabellen-Update-Daten
1.MySQL UPDATE JOIN-Syntax In MySQL können Sie di...
Vue-Anweisungen für benutzerdefinierte V-HAS, Schritte zur Beurteilung der Schaltflächenberechtigung
Inhaltsverzeichnis Anwendungsszenario Einfach aus...