Zorn

A custom video player tailored for MinPluto.

Installation

To install Zorn for your Astro project, run the following:

bun install @minpluto/zorn --registry https://npm.sudovanilla.org

Zorn uses icons from Iconoir using their Vue package, you'll need to integrate Astro's Vue package if you want to use the custom controls.

Learn how: https://docs.astro.build/en/guides/integrations-guide/vue/#manual-install

Examples

Basic Usage

Import Zorn from the package and add it to your page.

---
import {Zorn} from '@minpluto/zorn'
---

<Zorn
	Poster="https://md.sudovanilla.org/images/eay-p-v.jpg"
	Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"
	CustomControls
	Milieu
/>

With Separated Audio Source

Since Zorn is built for the MinPluto project, there are scenarios where the video source has no audio to get higher quality options, so Zorn has an opion to add a seprated audio source to include.

---
import {Zorn} from '@minpluto/zorn'
---

<Zorn
	Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
	Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
	Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"
	CustomControls
	VideoAttributes="muted"
	AudioAttributes=""
/>

Make sure to add muted to the VideoAttributes option, just in case.

References

Poster - Poster

Setting a thumbnail for the video player is done using the poster attribute. Just use a valid URL.

Poster="https://example.org/media/thumbnail.webp"

Video Source - Video

The main part of the video player, is of course the video. You can set any video source you want, local or remote.

Local:

Video="/media/video.webm"

Use the /public/ folder in your Astro project.

Remote:

Video="https://example.org/media/video.webm"

Audio Source - Audio

If you're in a scenario where the video source is missing audio, but you do have the audio itself, you can add that audio source to the video player. A separated <audio/> element is used, this will use a sync function in JavaScript to make sure the video and audio are synced. As before with the video source, it can be local or remote.

Local:

Audio="/media/audio.ogg"

Use the /public/ folder in your Astro project.

Remote:

Audio="https://example.org/media/audio.ogg"

Custom Controls - CustomControls

Use the custom controls for Zorn. If this is not applied, no controls will appears.

If you want to use the built-in player from the web browser, then use VideoAttributes="controls".

<Zorn CustomControls/>

Attributes - VideoAttributes / AudioAttributes

If you need to add an addition attribute to either the video and/or audio source, then you can with VideoAttributes and AudioAttributes.

<Zorn VideoAttributes="muted" AudioAttributes={'download="media.ogg"'}/>

Milieu - Milieu

The Milieu option is an attempt to copy YouTube's ambient player feature. Where it adds a blurry glow around the player. This uses two <canvas/>s behind the player to make a smooth transition when it changes.

<Zorn Milieu/>