Modifica il video player: pochi passi.

Sviluppatore
1

Il lettore mp4 di discourse è brutto da morire, stavo pensando a come migliorarlo, ho trovato questo, sembra abbastanza minimalista e la configurazione è abbastanza semplice, basta includere css e js.

image
image1920×931 76.8 KB

image
image1860×1043 216 KB

image
image1097×1134 61 KB

image
image2118×748 49.8 KB

Aggiungi js e css all’intestazione del tema

<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>

Introduzione al progetto:

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

2

Traduzione in inglese: (cortesia di discourse-ai :magic_wand:)

Il lettore MP4 di Discourse è estremamente sgradevole. Nella mia contemplazione ed esplorazione per migliorarlo, mi sono imbattuto in questa alternativa. Emana un certo fascino minimalista e la sua metodologia di configurazione è abbastanza semplice. L’inclusione del CSS e del JS rispettivi fa il trucco.

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

Basta integrare il JS e il CSS sopra menzionati nell’intestazione del tuo tema:

<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>

Per un’introduzione completa al progetto, visita gentilmente:

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

3

Il contenuto nel corpo principale è errato e causerà bug. Quando si carica dalla home page, il lettore non funzionerà. Ecco cosa ho fatto modificare da qualcuno per $50, lo condivido gratuitamente con chi ne ha bisogno, l’effetto del lettore è molto buono, vale la pena raccomandarlo!

Vantaggi:
Le tonalità sono più abbinate
Il lettore è adattato allo schermo fin dall’inizio, non da piccolo a grande
Molte funzioni

Pubblicazione, basta avere un tag video

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

Aggiungere nell’intestazione, css e js è meglio scaricarli nella propria cdn.

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>

Aggiungere nel corpo principale

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)

</script>

Effetto finale:

È anche possibile impostare la chiarezza dei sottotitoli, ecc.

image
image1920×934 96.6 KB

4

???

Con tutto il rispetto, questo è un codice pessimo, terribile.
Eseguirà una funzione ogni 10 millisecondi che non funzionerà nel 99% dei casi, il che è un enorme spreco di prestazioni.
Certo, un computer domestico potrebbe sostenere la spesa… ma è semplicemente così inelegante.

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

Dovresti usare l’API di Discourse per fare questo. usa questo:
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>

Dovresti semplicemente chiedermi (sto scherzando)

1 Mi Piace
5

V quanto. La prossima volta ti cercherò. Non c’è niente da fare. Ci ho messo un sacco di tempo.

6

Non preoccuparti, è stato solo un gesto di buona volontà. Parleremo di lavori più impegnativi la prossima volta.

(Naturalmente, questo non significa che questo lavoro sia facile… devi dedicare molto tempo a leggere abbastanza codice sorgente di discourse per poter reagire rapidamente e sapere quale API chiamare. E se non spendi soldi, poche persone si preoccuperanno davvero di ciò che vuoi realizzare.)

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 Mi Piace
8

Questo lettore è davvero facile da usare, è più bello di quello integrato, che tipo di lavoro accetta il boss?

9

:faccina_con_lacrime: Fratello, perché non ti sei presentato prima

10

Ho appena testato e confrontato, questo codice viene renderizzato abbastanza velocemente

<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.