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

So schreiben Sie eine Node.JS-Version eines Spiels

Inhaltsverzeichnis Überblick Build-Prozess Verwan...

So richten Sie Referer in Nginx ein, um Bilddiebstahl zu verhindern

Wenn die Bilder des Servers von anderen Websites ...

Ändern Sie die MySQL-Datenbank-Engine in InnoDB

PS: Ich verwende hier PHPStudy2016 1. Stoppen Sie...

MySQL implementiert eine Beispielmethode zum Anmelden ohne Kennwort

Spezifische Methode: Schritt 1: Stoppen Sie den M...

Einführung in semantische XHTML-Tags

Der erste Punkt ist, dass Menschen die Semantik vo...

27 Linux-Befehle zum Bearbeiten von Dokumenten, die es wert sind, gesammelt zu werden

Linux-Befehl „col“ Der Linux-Befehl col wird zum ...

Kompatibilität mit der Inline-Block-Eigenschaft

<br />Vor einem Jahr gab es im Internet kein...

Entwicklungsdetails von Vue3-Komponenten

Inhaltsverzeichnis 1. Einleitung 2. Komponentenen...

VUE implementiert eine Timeline-Wiedergabekomponente

In diesem Artikelbeispiel wird der spezifische Co...