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
In diesem Artikel werden hauptsächlich mehrere Pl...
Erster Blick auf die Wirkung: Vorwort: Auf diese ...
Normalerweise haben wir ein Scan-Feld, wenn wir d...
Viele Organisationen müssen Dateiserver sichern u...
Inhaltsverzeichnis 1. Übersicht 1. Aussagetest er...
Der folgende Code führt MySQL ein, um einige Feld...
1. Quelle des Problems Ein Freund von @水米田 hat mi...
MySql ist eine Datenquelle, die wir häufig verwen...
Inhaltsverzeichnis Holen Sie sich die Zeit in der...
In diesem Artikel wird der spezifische Code von V...
Es gibt zwei Arten von HTML-Tags: Inline-Elemente...
Ein gemeinsamer Index wird auch als zusammengeset...
Screenshots der Effekte: Implementierungscode: Cod...
Kürzlich habe ich MySQL verwendet, um Tabellendat...
login.html-Teil: <!DOCTYPE html> <html l...