Archived

This repository has been archived on 2024-09-29. You can view files and clone it, but cannot push or open issues or pull requests.

Korbs 7230dbb084

Init rewrite with bundler

2024-02-26 05:21:51 -05:00

1.9 KiB

Raw Blame History

Zorn

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

With Yarn:

yarn add @sudovanilla/bun

With Bun:

bun add @sudovanilla/bun

With PNPM:

pnpm install @sudovanilla/bun

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>