Zorn

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>