plyx-player v2023.12.14

Plyx-Player

Currently in beta stages.

To Do List

• Add colors as root colors (Make changable by developer)
• Add mobile support
• Create options
• Create layouts
• Create custom context-menu
• Create demo
• Create documentations
• Ignore keyboard shortcuts if an input is active

Installing

NPM

Install from NPM:

npm install plyx-player

Yarn PnP

If you are using Yarn it's PnP feature enabled, please unplug Plyx Player, add the following to your package.json file:

"dependenciesMeta": {
    "plyx-player": {
      "unplugged": true
    }
}

Also make sure you are setting the correct path to the script and css file when adding them to your website or app.

Usage

HTML5

Add the stylesheet and script:

<link rel="stylesheet" href="/node_modules/plyx-player/src/styles/app.css">
<script src="/node_modules/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>

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/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 Kit that is included with Plyx:

<script src="/node_modules/plyx-player/src/icons/fa-kit/js/all.js" crossorigin="anonymous"></script>

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>