JS realisiert Video-Sperreffekt

importiere TimeManager aus „./TimeManager.js“;
 
Standardklasse Bullet exportieren{
    
    Element;
    X;
    GeschwindigkeitX=2;
    Breite;
 
    Konstruktor(txt){
        dies.elem = dies.createElem(txt);
    }
    Element erstellen(txt){
        wenn(dieses.elem) return
        let div = document.createElement("div");
        Objekt.zuweisen(div.style,{
            Position: „absolut“,
            whiteSpace: "nowrap",
            Schriftgröße: "16px",
            // Farbe:"#000",
            Farbe:"#e00",
        })
        div.textinhalt = txt;
        Rückgabewert div
    }
    anhängenAn(übergeordnet){
        wenn (Typ des übergeordneten Elements === "Zeichenfolge") übergeordnetes Element = document.querySelector (übergeordnetes Element);
        übergeordnetes Element.AnhängenKind(dieses.Element);
        let rect = parent.getBoundingClientRect();
        dies.elem.style.top = Math.random()*rect.height/4 + "px";
        diese.Breite = diese.Element.OffsetWidth;
        this.x = Rechteck.Breite;
        dies.elem.style.left = dies.x + "px";
        TimeManager.instance.add(dies);
    }
    aktualisieren(){
        wenn(!dieses.elem) zurückgeben;
        dies.x -= dies.GeschwindigkeitX;
        dies.elem.style.left = dies.x + "px";
        wenn(dies.x<-diese.breite){
            dieses.elem.entfernen();
            TimeManager.instance.remove(dies);
            dieses.elem = null;
        }
    }
}

exportiere Standardklasse TimeManager{
    
    statische _Instanz;
    Liste = neues Set();
    Ausweise;
 
    Konstruktor(){
 
    }
    statische Instanz abrufen () {
        TimeManager._Instanz = TimeManager._Instanz? TimeManager._Instanz : neuer TimeManager();
        TimeManager._Instanz zurückgeben;
    }
    hinzufügen(Element){
        wenn(!elem) return
        wenn(elem.update) diese.Liste.add(elem);
        wenn(!diese.ids) diese.ids = setInterval(()=>{
            dies.update();
        },16);
    }
    entfernen(Element){
        wenn(!elem) return
        diese.Liste.löschen(Element);
        wenn(diese.Liste.Größe===0 && diese.IDs){
            Intervall löschen(diese.ids);
            diese.ids=0;
        }
    }
    aktualisieren(){
        diese.Liste.fürJeden(item=>{
            Element.update();
        })
    }
}

importiere Bullet aus „./Bullet.js“;
 
exportiere Standardklasse Player erweitert EventTarget{
 
    statische BREITE=638;
    statische HÖHE=493;
    Element;
    Eingang;
 
    Konstruktor(Pfad){
        super();
        dieses.elem = dieses.createElem(Pfad);
        document.addEventListener("keyup",e=>this.keyHandler(e));
    }
    SchlüsselHandler(e){
        wenn(e.Schlüsselcode !== 13) return;
        wenn(dieser.Eingabewert.trim().Länge===0) zurückgeben;
        sei b = neues Bullet(dieser.Eingabe.Wert);
        b.appendTo(dieses.elem);
        dieser.Eingabewert = "";
    }
    anhängenAn(übergeordnet){
        wenn (Typ des übergeordneten Elements == = "Zeichenfolge") übergeordnetes Element = Dokument.Abfrageselektor (übergeordnetes Element);
        übergeordnetes Element.AnhängenKind(dieses.Element);
    }
    createElem(Pfad){
        // Der äußerste Container des Players let player = document.createElement("div");
        player.className = "Spieler";
        Objekt.zuweisen(Spieler.Stil,{
            Breite:Player.WIDTH+"px",
            Höhe:Player.HEIGHT+"px",
            Benutzerauswahl: „keine“,
            Überlauf: "versteckt",
            Position: „relativ“,
            verticalAlign:"Grundlinie",
        })
        // Videowiedergabeteil des Players: sollte die obere Autor- und Feedbackleiste, die Videostatusschaltfläche und den Videoanzeigeteil enthalten. . . .
        let videoWrap = document.createElement("div");
        Objekt.zuweisen(videoWrap.style,{
            Breite: "100%",
            Höhe: "447px",
            Hintergrundfarbe: "#000",
            Position: „relativ“,
            oben: 0,
            Anzeige: „flex“,
            flexDirection:"Spalte",
        })
        // Obere Ebene des Players erstellen: mit Titel, Autor, Feedback und Bericht etc. . . .
        let videoTop = document.createElement("div");
        Objekt.zuweisen(videoTop.style,{
            Breite: "100%",
            Höhe: "42px",
            Position: „relativ“,
            oben: "0px",
            links:"0px",
            Deckkraft: „0“,
            Farbe: "#fff",
            Zeigerereignisse: „keine“,
            // Übergang: "alle .2s ease-in-out",
            Übergang: „alle .2s“,
        })
        // Schalter für den Status der Videowiedergabe // let videoState = document.createElement("div");
        // Teil der Videowiedergabe let videoContent = document.createElement("div");
        Objekt.zuweisen(videoContent.style,{
            Breite: "100%",
            // Höhe: "100%",
            Höhe: "361px",
            Position: „relativ“,
            Benutzerauswahl: „keine“,
        })
        let video = document.createElement("video");
        video.src = Pfad;
        video.controls = "Steuerungen";
        video.preload = "auto";
        Objekt.zuweisen(video.style,{
            // Videozentrierung: Der Fortschrittsbalken wird verlängert, das Video selbst wird jedoch nicht verlängert, sondern direkt zentriert:
            Höhe: „100 %“,
            Breite: "100%",
        })
        videoContent.appendChild(video);
 
        // Videowiedergabe und Bullet-Screen-Scrolling-Steuerleiste: Klarheit/Geschwindigkeit/Schleife/Spiegelung/Breitbild/Vollbild-Webseite/Fortschrittsbalken usw.
        let videoControlWrap = document.createElement("div");
        Objekt.zuweisen(videoControlWrap.style,{
            Breite: "100%",
            Höhe: "44px",
            Deckkraft: „0“,
            Position: „relativ“,
            unten:"0",
        })
 
        // Bullet-Screen unten senden und Stil zum Senden des Bullet-Screens festlegen: z. B. Farbe des Bullet-Screens/Schriftgröße/Scrollen/Hovern/Geschwindigkeit/Schriftart/Schild usw. . .
        let bottomArea = document.createElement("div");
        Objekt.zuweisen(bottomArea.style,{
            Breite: "100%",
            Höhe: "46px",
        })
        dies.input = document.createElement("Eingabe");
        Objekt.zuweisen(diesen.Eingabestil,{
            Breite: "130px",
            Höhe: "30px",
            Farbe:"#212121",
            // Rahmen: "0px",
            Zeilenhöhe: "30px",
            boxSizing: "Rahmenbox",
            min. Breite: "115px",
            Polsterung: "0 5px",
            Schriftgröße: "12px",
            Rahmen: „1px durchgezogen #e7e7e7“, //Rahmenstil:
            Hintergrundfarbe: "#f4f4f4",
        })
        bottomArea.appendChild(diese.Eingabe);
 
        videoWrap.appendChild(videoTop);
        videoWrap.appendChild(videoinhalt);
        videoWrap.appendChild(videoControlWrap);
 
        player.appendChild(videoWrap);
        Spieler.appendChild(bottomArea);
        Rückkehrspieler;
    }
}

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
    </Stil>
</Kopf>
<Text>
    <Skripttyp="Modul">
        Player aus „./js/Player.js“ importieren;
        importiere TimeManager aus „./js/TimeManager.js“;
        importiere Bullet aus „./js/Bullet.js“;
 
        //Player-Verwendung let player = new Player("./test3.mp4");
        Spieler.appendTo("body");
 
    </Skript>
</body>
</html>