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

Detaillierte Erklärung der sieben Datentypen in JavaScript

Inhaltsverzeichnis Vorwort: Detaillierte Einführu...

Vue verwendet OSS zum Hochladen von Bildern oder Anhängen

Verwenden Sie OSS, um Bilder oder Anhänge in ein ...

Implementierung eines einfachen Timers in JavaScript

In diesem Artikelbeispiel wird der spezifische Ja...

10 Tipps für das User Interface Design mobiler Apps

Tipp 1: Konzentriert bleiben Die besten mobilen A...

Implementierung der Docker-Container-Verbindung und -Kommunikation

Die Portzuordnung ist nicht die einzige Möglichke...

JavaScript-Grundlagen: Funktion zur sofortigen Ausführung

Inhaltsverzeichnis Funktionsformat sofort ausführ...