87 lines
No EOL
2.7 KiB
Markdown
87 lines
No EOL
2.7 KiB
Markdown
# 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:
|
|
```bash
|
|
npm set registry https://packages.sudovanilla.com/
|
|
```
|
|
(This registry is also a proxy for NPM)
|
|
|
|
Then, for your project, install Plyx:
|
|
```bash
|
|
npm install @sudovanilla/plyx-player
|
|
```
|
|
|
|
## Usage
|
|
### HTML5
|
|
Add the stylesheet and script:
|
|
```html
|
|
<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:
|
|
```html
|
|
<script src="https://kit.fontawesome.com/ecedfeb6bc.js" crossorigin="anonymous"></script>
|
|
```
|
|
|
|
<details>
|
|
<summary>About this Font Awesome Pro Kit</summary>
|
|
This kit is a Pro kit provided by SudoVanilla, it has only a limited amount icons that can be used since subsetting is used.
|
|
</details>
|
|
|
|
|
|
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`:
|
|
```html
|
|
<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:
|
|
```html
|
|
<link rel="stylesheet" href="/player/index.css">
|
|
<script src="/player/index.js" type="module"></script>
|
|
```
|
|
|
|
Also add the Font Awesome that the Pylx uses:
|
|
```html
|
|
<script src="https://kit.fontawesome.com/ecedfeb6bc.js" crossorigin="anonymous"></script>
|
|
```
|
|
|
|
<details>
|
|
<summary>About this Font Awesome Pro Kit</summary>
|
|
This kit is a Pro kit provided by SudoVanilla, it has only a limited amount icons that can be used since subsetting is used.
|
|
</details>
|
|
|
|
|
|
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`:
|
|
```html
|
|
<div class="video-container">
|
|
<video class="plyx-player" src="video.mp4"></video>
|
|
</div> |