81 lines
1.9 KiB
Markdown
81 lines
1.9 KiB
Markdown
# Zorn
|
|
|
|
<div class="video-container">
|
|
<video class="zorn-player" src="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"></video>
|
|
</div>
|
|
|
|
## What is Zorn?
|
|
A custom HTMl5 video player for the web using vanilla JavaScript.
|
|
|
|
## Installation
|
|
### Package Manager
|
|
With NPM:
|
|
```bash
|
|
npm install @sudovanilla/zorn
|
|
```
|
|
|
|
With Yarn:
|
|
```bash
|
|
yarn add @sudovanilla/zorn
|
|
```
|
|
|
|
With Bun:
|
|
```bash
|
|
bun add @sudovanilla/zorn
|
|
```
|
|
|
|
With PNPM:
|
|
```bash
|
|
pnpm install @sudovanilla/zorn
|
|
```
|
|
|
|
### Yarn PnP
|
|
If you are using Yarn it's PnP feature enabled, please unplug Zorn Player, add the following to your package.json file:
|
|
```json
|
|
"dependenciesMeta": {
|
|
"@sudovanilla/zorn": {
|
|
"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 Zorn at the bottom of your HTML page:
|
|
```html
|
|
...
|
|
</body>
|
|
<script src="/zorn.js"></script>
|
|
</html>
|
|
```
|
|
|
|
Then, add a video to the page inside a div with the class name set to `video-container`. Inside this div, will be the video element with the class name set as `zorn-player`.
|
|
```html
|
|
<div class="video-container">
|
|
<video class="zorn-player" src="video.mp4"></video>
|
|
</div>
|
|
```
|
|
|
|
___
|
|
|
|
### Express
|
|
Route the files required for Zorn Player to work in Express (Tested with PokeTube):
|
|
```
|
|
const ZornDirectory = "./node_modules/@sudovanilla/zorn/"
|
|
module.exports = function (app, config, renderTemplate) {
|
|
app.get("/player/zorn.js", function (req, res) {res.sendFile("/dist/index.js", { root: ZornDirectory })})
|
|
}
|
|
```
|
|
|
|
Add the stylesheet and script:
|
|
```html
|
|
<script src="/player/index.js"></script>
|
|
```
|
|
|
|
Then, add a video to the page inside a div with the class name set to `video-container`. Inside this div, will be the video element with the class name set as `zorn-player`.
|
|
```html
|
|
<div class="video-container">
|
|
<video class="zorn-player" src="video.mp4"></video>
|
|
</div>
|
|
```
|