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

Implementierung eines MySQL-Gemeinschaftsindex (zusammengesetzter Index)

Gemeinsamer Index Die Definition des gemeinsamen ...

Detaillierte Einführung in die gespeicherten MySQL-Funktionen

Inhaltsverzeichnis 1. Erstellen Sie eine gespeich...

Was bedeutet das n nach int(n) in MySQL?

Sie wissen vielleicht bereits, dass die Länge 1 v...

MySQL verwendet ein Limit, um die Beispielmethode für Paging zu implementieren

1. Grundlegende Implementierung des Limits Im All...

MySQL-Schnellwiederherstellungslösung basierend auf dem Zeitpunkt

Der Grund für das Schreiben dieses Artikels ist, ...

Beispiel für die Verwendung einer Keep-Alive-Komponente in Vue

Problembeschreibung (was ist Keep-Alive) Keep-Ali...

Beispiel für die Migration einer MySQL-Online-Protokollbibliothek

Ich möchte Ihnen von einem aktuellen Fall erzähle...

Sequenzimplementierungsmethode basierend auf MySQL

Das Team ersetzte den neuen Rahmen. Alle neuen Un...

jQuery simuliert einen Picker, um einen gleitenden Auswahleffekt zu erzielen

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

Implementierung der MySQL5.7 mysqldump-Sicherung und -Wiederherstellung

MySQL-Sicherung Kaltes Backup:停止服務進行備份,即停止數據庫的寫入H...

4 Möglichkeiten, doppeltes Einfügen von Daten in Mysql zu vermeiden

Die gebräuchlichste Methode besteht darin, einen ...

Zwei Methoden zur Implementierung der Mysql-Remoteverbindungskonfiguration

Zwei Methoden zur Implementierung der Mysql-Remot...

MySQL-Datenoperation – Verwendung von DML-Anweisungen

veranschaulichen DML (Data Manipulation Language)...