Alguns passos simples para modificar o player de vídeo

Dev
3

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.

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>

Adicione no corpo principal

image
image1071×786 29.9 KB

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.

image
image1920×934 96.6 KB