No description
src | ||
LICENSE | ||
package.json | ||
README.md |
Plyx-Player
Currently in beta stages.
To Do List
- Add colors as root colors (Make changable by developer)
- Create layouts
- Create custom context-menu
- Create demo
- Create documentations
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
HTML5
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"></script>
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>
Express
Route the files required for Pylx Player to work in Express (Tested with PokeTube):
const PylxDirectory = "./node_modules/@sudovanilla/plyx-player"
module.exports = function (app, config, renderTemplate) {
app.get("/player/index.js", function (req, res) {res.sendFile("/src/index.js", { root: PylxDirectory })})
app.get("/player/index.css", function (req, res) {res.sendFile("/src/styles/app.css", { root: PylxDirectory })})
app.get("/player/functions/buttons.js", function (req, res) {res.sendFile("/src/functions/buttons.js", { root: PylxDirectory })})
app.get("/player/functions/length.js", function (req, res) {res.sendFile("/src/functions/length.js", { root: PylxDirectory })})
}
Add the stylesheet and script:
<link rel="stylesheet" href="/player/index.css">
<script src="/player/index.js" type="module"></script>
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>