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
Implementierungscode des Tools zum Entfernen von Wasserzeichen aus kurzen Videos (Douyin)
Inhaltsverzeichnis 1. Holen Sie sich zuerst den e...
Beispielcode zum Ändern des Stils anderer Tags durch Bewegen der Maus mithilfe von CSS
Vorwort: Soweit ich weiß, kann CSS derzeit nur de...
Zwei Möglichkeiten zum Zurücksetzen des Root-Passworts einer MySQL-Datenbank mit lnmp
Die erste Methode: Verwenden Sie Junges Ein-Klick...
Detaillierte Erklärung des Unterschieds zwischen Routing-Hooks in Vue2.x und Vue3.x
Inhaltsverzeichnis vue2.x Vorkonzept: Routing-Hoo...
Vuex kombiniert Sitzungsspeicherdaten, um das Problem des Datenverlusts beim Aktualisieren der Seite zu lösen
Inhaltsverzeichnis Vorwort 1. Gründe: 2. Lösungsi...
So beheben Sie das Eingabe-Jitter-Problem beim WeChat-Applet
Finden Sie das Problem Schauen wir uns zunächst d...
Datenbankabfrageoptimierung: Unterabfrageoptimierung
1. Fall Nehmen Sie alle Mitarbeiter, die nicht Fi...
Design-Referenz: Erfolgsbeispiel für die Erstellung einer WordPress-Website
Jede dieser 16 Sites ist eine sorgfältige Lektüre ...
Implementierung der MySQL-Benutzerrechteverwaltung
1. Einführung in MySQL-Berechtigungen Es gibt 4 T...
Der Unterschied zwischen MySQL count(1), count(*) und count(field)
Inhaltsverzeichnis 1. Erster Blick auf COUNT 2. D...
So erstellen Sie einen pptpd-Dienst in Alibaba Cloud Ubuntu 16.04
1. Um ein PPTP-VPN aufzubauen, müssen Sie Port 17...
So entfernen Sie „Enter“, „Senden“ und „Enter != Senden“ aus dem Formular
Um das Problem „Eingeben != Absenden“ zu implement...
Linux führt jeden Tag eine automatische und geplante Sicherung der MySQL-Datenbank durch
Überblick Backup ist die Grundlage der Notfallwie...
Detailliertes Installationstutorial für Zabbix 4.04 (basierend auf CentOS 7.6)
1. Vorbereitung vor der Installation: 1.1 JDK ins...
Erläuterung der Lösung zur mobilen H5-Bildgenerierung in JavaScript
Derzeit gibt es viele Betriebsaktivitäten für öff...