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:
|
<<: Einführung in die Verwendung und Deaktivierung von Transparent Huge Pages in Linux
>>: Details zur geplanten Datenbanksicherung und Datenwiederherstellung bei Navicat für MySQL
Gemeinsamer Index Die Definition des gemeinsamen ...
Inhaltsverzeichnis 1. Erstellen Sie eine gespeich...
Sie wissen vielleicht bereits, dass die Länge 1 v...
Legen Sie den Stil der Tabelle fest: „table-layout...
1. Grundlegende Implementierung des Limits Im All...
Der Grund für das Schreiben dieses Artikels ist, ...
Problembeschreibung (was ist Keep-Alive) Keep-Ali...
Ich möchte Ihnen von einem aktuellen Fall erzähle...
Das Team ersetzte den neuen Rahmen. Alle neuen Un...
In diesem Artikel wird der spezifische Code von j...
MySQL-Sicherung Kaltes Backup:停止服務進行備份,即停止數據庫的寫入H...
Die gebräuchlichste Methode besteht darin, einen ...
Vorwort Ich bin kürzlich bei der Arbeit auf ein P...
Zwei Methoden zur Implementierung der Mysql-Remot...
veranschaulichen DML (Data Manipulation Language)...