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 asynchrone Aufgaben in modernem JavaScript

Vorwort In diesem Artikel untersuchen wir die Ent...

Eine kurze Diskussion über JavaScript-Drosselung und Anti-Shake

Inhaltsverzeichnis Drosselung und Anti-Shake Konz...

Detaillierte Erklärung des CSS-Pseudoelements::marker

Dieser Artikel stellt ein interessantes Pseudoele...

Bringen Sie Ihnen bei, wie Sie coole Barcode-Effekte erstellen

Stellungnahme : In diesem Artikel erfahren Sie, w...

Detailliertes Tutorial zur Installation eines PXC-Clusters mit Docker

Inhaltsverzeichnis Vorwort Vorbereitende Vorberei...

Detaillierte Erklärung der XML-Syntax

1. Dokumentationsregeln 1. Groß-/Kleinschreibung b...

So implementieren Sie Seitensprünge in einem Vue-Projekt

Inhaltsverzeichnis 1. Erstellen Sie ein Vue-CLI-S...

Beispielanalyse zum Beheben von Problemen in historischen Linux-Images

Fix für Probleme mit historischen Linux-Images De...

Einstellen der Engine MyISAM/InnoDB beim Erstellen einer Datentabelle in MySQL

Als ich MySQL konfiguriert habe, habe ich die Sta...

Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion

WeChat-Applet: Einfacher Rechner. Zu Ihrer Inform...