Plyx-Player

Currently in beta stages.

Installing

The Plyx Player is available to download from SudoVanilla's registry, run:

npm set registry https://packages.sudovanilla.com/

(This registry is also a proxy for NPM)

Then, for your project, install Plyx:

npm install @sudovanilla/plyx-player

Usage

Add the stylesheet and script:

...
<link rel="stylesheet" href="/node_modules/@sudovanilla/plyx-player/src/styles/app.css">
<script src="/node_modules/@sudovanilla/plyx-player/src/index.js" type="module">
...

Also add the Font Awesome that the Pylx uses:

<script src="https://kit.fontawesome.com/ecedfeb6bc.js" crossorigin="anonymous"></script>

About this Font Awesome Pro Kit

This kit is a Pro kit provided by SudoVanilla, it has only a limited amount icons that can be used since subsetting is used.

Then, add the class name plyx-player to the <video> element and make sure it's wrapped around a div contained with the class name video-container:

<div class="video-container">
    <video class="plyx-player" src="video.mp4"></video>
</div>

That's it, if you've linked the stylesheet and script correctly, it should work.