So verwenden Sie das Videowiedergabe-Plugin DPlayer.js

So verwenden Sie das Videowiedergabe-Plugin DPlayer.js

Das Videoplayer-Plugin DPlayer.js ist einfach zu bedienen

Hauptsächlich verwendet, um zu erreichen: Videowiedergabe, Überwachung von Start, Ende, Pause, Wiedergabezeit, Video wechseln

Offizielle Dokumentation: http://dplayer.js.org

Effektbild:

**

Hinweis: Ich habe lokal einen Dienst eingerichtet und zum Testen das LAN verwendet, um eine Verbindung zum Telefon herzustellen. Die Videosprungposition schlug auf Apple-Telefonen fehl, funktionierte jedoch auf Android-Telefonen. Es gibt noch keine Lösung ... Ich werde weiterhin Updates veröffentlichen, wenn ich Zeit habe.

**

Codeteil HTML:

<link rel="stylesheet" href="css/dplayer.min.css">
<script src="js/dplayer.min.js"></script>
    
 <div id="dplayer" style="Schriftgröße: 12px;"></div>

<button class="click1">Video wechseln</button>

javascript - Argumente:

$(function () { // Video initialisieren const dplayer = new DPlayer({
                Container: document.getElementById('dplayer'),
                Video:
                    URL: „video/001.mp4“, //Videopfad-Bild: „images/banner1.png“, //Video-Cover-Miniaturansichten: „images/banner2.png“, //Video-Miniaturansichtstyp: „auto“
                },
            });
            dplayer.seek('6.972618'); // Zur angegebenen Zeitposition springen // Klicken, um das Video umzuschalten $('.click1').click(function () {
                Videos wechseln();
            })

            // Auf dplayer.on('play', function () { warten
                console.log("abspielen");
                dplayer.seek('6.972618'); //zur angegebenen Zeitposition springen});
            dplayer.on('pause', Funktion () {
                console.log("pause");
                console.log(dplayer.video.currentTime); //Aktuelle Wiedergabezeit abrufen});
            dplayer.on('beendet', Funktion () {
                console.log("Wiedergabe beendet");
            });
            dplayer.on('Fehler', Funktion () {
                console.log("Wiedergabestörung");
            });
        })

        Funktion switchVideos() {
            // Ajax sendet eine Anfrage, um die angeklickten Videodaten abzurufen // ......
            dplayer.switchVideo({
                url: 'video/002.mp4', // Weisen Sie die Video-URL in den Daten zu
                pic: 'images/banner2.png', //Holen Sie sich das Titelbild-Thumbnail: 'images/banner2.png' //Video-Thumbnail})
}

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:
  • Detaillierte Erklärung zur Verwendung des Js-Videoplayer-Plugins Video.js
  • So verwenden Sie das FLV-Videoplayer-Plugin von js
  • Plug-In-Code für die FLV-Videowiedergabe auf Website-Basis, basierend auf JS und Flash

<<:  Einführung in die Verwendung und Deaktivierung von Transparent Huge Pages in Linux

>>:  Details zur geplanten Datenbanksicherung und Datenwiederherstellung bei Navicat für MySQL

Artikel empfehlen

HTML+CSS zum Erstellen einer Schaltfläche im Cyberpunk-Stil

Erster Blick auf die Wirkung: Vorwort: Auf diese ...

Beispielcode zur Implementierung einer QR-Code-Scanbox mit CSS

Normalerweise haben wir ein Scan-Feld, wenn wir d...

Grundlegendes Tutorial zur Verwendung der Explain-Anweisung in MySQL

Inhaltsverzeichnis 1. Übersicht 1. Aussagetest er...

So verwenden Sie Navicat zum Exportieren und Importieren einer MySQL-Datenbank

MySql ist eine Datenquelle, die wir häufig verwen...

Vue.js implementiert eine Bildwechselfunktion

In diesem Artikel wird der spezifische Code von V...

Regeln für die Verwendung gemeinsamer MySQL-Indizes

Ein gemeinsamer Index wird auch als zusammengeset...

Farbverlaufseffekt im HTML-Hintergrund durch CSS-Stil erreicht

Screenshots der Effekte: Implementierungscode: Cod...

Entwerfen Sie eine einfache HTML-Anmeldeoberfläche im CSS-Stil

login.html-Teil: <!DOCTYPE html> <html l...