Einfache Schritte zum Ändern des Video-Players

Entwickler
1

Der MP4-Player von Discourse ist hässlich, ich habe überlegt, wie ich ihn verbessern kann, und bin auf diesen hier gestoßen. Er sieht ziemlich minimalistisch aus und die Konfiguration ist recht einfach, man muss nur CSS und JS einbinden.

image
image1920×931 76.8 KB

image
image1860×1043 216 KB

image
image1097×1134 61 KB

image
image2118×748 49.8 KB

Fügen Sie JS und CSS in den Kopfzeilen des Themas ein


<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const player = new Plyr('video');
        });
    </script>

Projektvorstellung:

https://mp.weixin.qq.com/s?__biz=MzI2MzEwNTY3OQ==&mid=2648985399&idx=1&sn=4736244185148aa38aa931d10a320e6e&chksm=f25012d7c5279bc12aa26b0864d2600330ac8da243720695240d90b003685fcff4587fe9b331&scene=27

2

Englische Übersetzung: (mit freundlicher Genehmigung von discourse-ai :magic_wand:)

Der MP4-Player von Discourse ist äußerst unattraktiv. Bei meiner Überlegung und Erkundung, ihn zu verbessern, stieß ich auf diese Alternative. Sie strahlt einen gewissen minimalistischen Charme aus und ihre Einrichtungsmethode ist ziemlich einfach. Die Einbindung des jeweiligen CSS und JS erledigt die Aufgabe.

e989579adc21815a61ea1975b2e73f71918c0755_2_1035x501
e989579adc21815a61ea1975b2e73f71918c0755_2_1035x5011035×501 60.5 KB

b9bfaca59bcc39c1355c0165a5d5bdb421761b1f_2_1035x579
b9bfaca59bcc39c1355c0165a5d5bdb421761b1f_2_1035x5791035×579 100 KB

f3b8e972c50be9506768a9ef0a7f08fa4cc1e653_2_724x750
f3b8e972c50be9506768a9ef0a7f08fa4cc1e653_2_724x750724×750 49.3 KB

Integrieren Sie einfach das oben genannte JS und CSS in den Header Ihres Themes:

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const player = new Plyr('video');
        });
    </script>

Für eine umfassende Einführung in das Projekt besuchen Sie bitte:

https://mp.weixin.qq.com/s?__biz=MzI2MzEwNTY3OQ==&mid=2648985399&idx=1&sn=4736244185148aa38aa931d10a320e6e&chksm=f25012d7c5279bc12aa26b0864d2600330ac8da243720695240d90b003685fcff4587fe9b331&scene=27

3

Der Haupttext enthält Fehler, die zu Bugs führen. Beim Laden von der Homepage funktioniert der Player nicht. Hier ist, was ich jemanden für 50 US-Dollar habe machen lassen, den ich kostenlos mit denen teile, die ihn brauchen. Der Player funktioniert sehr gut und ist empfehlenswert!

Vorteile:
Die Farbtöne sind gut aufeinander abgestimmt
Der Player passt sich von Anfang an an den Bildschirm an, anstatt von klein nach groß zu werden
Viele Funktionen

Veröffentlichung, solange ein video-Tag vorhanden ist

<video controls>
        <source src="https://xxxx/test.mp4" type="video/mp4">
    </video>

Fügen Sie dies im Kopfbereich hinzu. CSS und JS sollten am besten in Ihr eigenes CDN heruntergeladen werden.

image
image1158×763 20.6 KB

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
<script src="https://cdn.openfa.net/css/plyr.js"></script>

Fügen Sie dies im Haupttext-Body hinzu

image
image1071×786 29.9 KB

<script type="text/javascript">

let curUrl = "";

setInterval(() => {
    let newUrl = location.href;
    if (curUrl !== newUrl) {
        curUrl = newUrl
        if (document.querySelector("video")) {
            new Plyr('video')
        }
    }
}, 10)

Endergebnis:

Sie können auch die Klarheit von Untertiteln usw. einstellen

image
image1920×934 96.6 KB

4

???

Ich muss ehrlich sein, das ist sehr schlechter Code, furchtbar.
Es wird alle 10 Millisekunden eine Funktion ausgeführt, die zu 99% der Zeit nicht funktioniert, was eine enorme Verschwendung von Leistung ist.
Sicher, ein Heimcomputer könnte die Kosten tragen … aber es ist einfach so ungeschickt.

IMHO this is very bad code, awful.
It will run a function every 10 milliseconds that will not work 99% of the time, which is a huge waste of performance.
Sure, a home computer could support the expense… but it’s just so inelegant

Du solltest die Discourse-API verwenden, um diese Aufgabe zu erledigen. Benutze dies:
You should use discourse’s API to do this. use this:

<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
        if (document.querySelector("video")) {
            new Plyr('video');
        }
});
</script>

Du hättest mich einfach fragen sollen (nur ein Scherz)

1 „Gefällt mir“
5

V wie viel? Ich werde dich nächstes Mal finden. Ich kann nichts machen. Ich habe es eine Weile versucht.

6

Kein Problem, das ist nur eine Kleinigkeit. Sprechen wir beim nächsten Mal über eine anspruchsvollere Aufgabe.

(Natürlich bedeutet das nicht, dass diese Aufgabe einfach ist … Sie müssen viel Zeit damit verbringen, genügend Discourse-Quellcode zu lesen, um schnell reagieren zu können, welche API Sie aufrufen müssen. Und wenn Sie kein Geld ausgeben, werden sich nur wenige Leute wirklich darum kümmern, was Sie erreichen wollen.)

7 
  <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
  <script type="text/discourse-plugin" version="1.8">
    api.decorateCookedElement(elem => elem.querySelectorAll('video').forEach((e) => {new Plyr(e)}));
  </script>
1 „Gefällt mir“
8

Dieser Player ist wirklich gut zu bedienen, sieht besser aus als der eingebaute, welche Aufgaben nimmt der Chef an?

9

:lächelndes_Gesicht_mit_Tränen: Bruder, warum bist du nicht früher aufgetaucht?

10

Ich habe gerade einen Vergleich getestet, dieser Code rendert ziemlich schnell

<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script type="text/discourse-plugin" version="1.8">
  api.decorateCookedElement(elem => elem.querySelectorAll('video').forEach((e) => {new Plyr(e)}));
</script>
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.