Quelques étapes simples pour modifier le lecteur vidéo

Dev
1

Le lecteur mp4 de discourse est laid, j’ai cherché comment l’améliorer et j’ai trouvé ceci, qui me semble assez simple, et la méthode de configuration est également assez simple, il suffit d’importer le css et le js.

image
image1920×931 76.8 KB

image
image1860×1043 216 KB

image
image1097×1134 61 KB

image
image2118×748 49.8 KB

Ajoutez le js et le css dans l’en-tête du thème

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

Présentation du projet :

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

2

Traduction anglaise :
(avec la permission de discourse-ai :magic_wand:)

Le lecteur MP4 de Discourse est d’une laideur flagrante. En réfléchissant et en explorant pour l’améliorer, je suis tombé sur cette alternative. Il dégage un certain charme minimaliste, et sa méthode d’installation est assez simple. L’inclusion du CSS et du JS respectifs fait l’affaire.

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

Intégrez simplement le JS et le CSS susmentionnés dans l’en-tête de votre thème :

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

Pour une introduction complète au projet, veuillez visiter :

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

3

Le contenu du corps du texte est erroné et provoquera des bugs. Lorsque vous chargez depuis la page d’accueil, le lecteur ne fonctionnera pas. Voici ce que j’ai payé 50 $ pour que quelqu’un m’aide à le modifier, je le partage gratuitement avec ceux qui en ont besoin. Le lecteur fonctionne très bien, il est recommandé !

Avantages :
Les couleurs sont bien assorties
Le lecteur s’adapte à l’écran dès le début, au lieu de passer de petit à grand
Plus de fonctionnalités

Publication, il suffit d’avoir une balise vidéo

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

Ajoutez dans l’en-tête, il est préférable de télécharger le css et le js dans votre propre 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>

Ajoutez dans le corps du texte

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)

Résultat final :

Vous pouvez également définir la clarté des sous-titres, etc.

image
image1920×934 96.6 KB

4

???

Pour être franc, c’est du très mauvais code, épouvantable.
Il exécutera une fonction toutes les 10 millisecondes qui ne fonctionnera pas 99 % du temps, ce qui est un énorme gaspillage de performances.
Bien sûr, un ordinateur personnel pourrait supporter la dépense… mais c’est tout simplement si peu élégant.

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

Vous devriez utiliser l’API de Discourse pour faire cela. Utilisez ceci :
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>

Vous auriez dû me demander (je plaisante)

1 « J'aime »
5

V combien La prochaine fois je te chercherai. Je n’ai pas le choix. J’ai passé des heures dessus.

6

Ce n’est rien, c’est juste un coup de main. On en reparlera la prochaine fois qu’il y aura un travail plus stimulant.

(Bien sûr, cela ne veut pas dire que ce travail est facile… Il faut passer beaucoup de temps à lire suffisamment de code source de discourse pour pouvoir réagir rapidement et savoir quelle API appeler. Et si vous ne dépensez pas d’argent, peu de gens prendront vraiment le temps de se soucier de ce que vous essayez d’accomplir.)

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 « J'aime »
8

Ce lecteur est vraiment facile à utiliser, il est plus joli que celui intégré. Quel genre de tâches le développeur accepte-t-il ?

9

:visage_qui-pleure: Frère, pourquoi n’es-tu pas apparu plus tôt

10

J’ai juste testé et comparé, ce code se rend plus rapidement

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