Go to file
Korbs 63037350d1
Setup optional title for default theme
2024-02-26 21:17:34 -05:00
dist update 2024-02-26 05:25:43 -05:00
src Setup optional title for default theme 2024-02-26 21:17:34 -05:00
test Setup optional title for default theme 2024-02-26 21:17:34 -05:00
.gitignore Init rewrite with bundler 2024-02-26 05:21:51 -05:00
bun.lockb Init rewrite with bundler 2024-02-26 05:21:51 -05:00
esbuild.config.mjs update 2024-02-26 05:25:43 -05:00
esbuild.watch.config.mjs Init rewrite with bundler 2024-02-26 05:21:51 -05:00
LICENSE Initial commit 2023-10-16 15:52:17 -04:00
package.json Use correct package name 2024-02-26 05:27:17 -05:00
README.md Fix typo 2024-02-26 05:22:59 -05:00

Zorn

Preview of Zorn with default theme set

Currently in beta stages.

What is Zorn?

A custom HTMl5 video player for the web using vanilla JavaScript.

Installation

Package Manager

With NPM:

npm install @sudovanilla/zorn

With Yarn:

yarn add @sudovanilla/zorn

With Bun:

bun add @sudovanilla/zorn

With PNPM:

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:

"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:

    ...
    </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.

<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:

<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.

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