Alguns passos simples para modificar o player de vídeo

[zengyunsi (运思 曾)]

O player de mp4 do discourse é feio, pensei em como melhorá-lo, encontrei isso, parece bem minimalista e a configuração é simples, basta adicionar css e js.

Adicione js e css no cabeçalho do 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>

Introdução ao projeto:

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

[JammyDodger]

Tradução para o inglês: (cortesia de discourse-ai )

O player MP4 do Discourse é terrivelmente desagradável. Em minha contemplação e exploração para melhorá-lo, deparei-me com esta alternativa. Ela exala um certo charme minimalista, e sua metodologia de configuração é bastante simples. A inclusão do CSS e JS respectivos faz o truque.

Basta integrar o JS e CSS mencionados anteriormente no cabeçalho do seu 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>

Para uma introdução abrangente ao projeto, visite:

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

[zengyunsi (运思 曾)]

O conteúdo no corpo principal está incorreto e causará um bug. Ao carregar da página inicial, o player não funcionará. Abaixo está uma modificação que paguei para alguém fazer por $50, compartilhada gratuitamente para quem precisar. O player funciona muito bem e vale a pena recomendar!

Vantagens:
A tonalidade da cor é mais harmoniosa
O player se adapta à tela desde o início, em vez de crescer de pequeno para grande
Muitas funcionalidades

Publicação, basta ter a tag video

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

Adicione no cabeçalho. É melhor baixar CSS e JS para sua própria CDN.

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

Adicione no corpo principal

let curUrl = "";

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

Efeito final:

Também é possível definir a clareza das legendas, etc.

[Lhc_fl (Linca)]

@zengyunsi

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

???

Com todo o respeito, este é um código muito ruim, horrível.
Ele executará uma função a cada 10 milissegundos que não funcionará 99% das vezes, o que é um enorme desperdício de desempenho.
Claro, um computador doméstico poderia suportar o custo… mas é simplesmente muito 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

Você deveria usar a API do Discourse para fazer isso. use isto:
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>

@zengyunsi

Abaixo está o que gastei US$ 50 para alguém me ajudar a modificar

Você deveria simplesmente ter me procurado (brincadeira)

[zengyunsi (运思 曾)]

@Lhc_fl

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

V多少 Da próxima vez eu te procuro, não tem jeito. Passei um tempão tentando.

[Lhc_fl (Linca)]

Sem problemas, isso é só um favor. Falaremos sobre um trabalho mais desafiador da próxima vez.

(Claro, isso não significa que este trabalho seja fácil… você terá que gastar muito tempo lendo código-fonte suficiente do discourse para reagir rapidamente e saber qual API chamar. E se você não gastar dinheiro, poucas pessoas realmente dedicarão tempo para se importar com o que você quer implementar.)

[hawm]

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

[zengyunsi (运思 曾)]

Este player é realmente fácil de usar, é mais bonito que o padrão, que tipo de tarefas você aceita?

[zengyunsi (运思 曾)]

:rosto_chorando_de_rir: Irmão, por que você não apareceu mais cedo

[zengyunsi (运思 曾)]

Acabei de testar e comparar, este código renderiza mais rápido

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