update
This commit is contained in:
parent
59e871a96f
commit
e21a58e430
2 changed files with 145 additions and 1 deletions
117
README.md
117
README.md
|
@ -1,3 +1,120 @@
|
|||
# Zorn
|
||||
|
||||
![Zorn using Milieu Mode](https://md.sudovanilla.org/images/Screenshot%20from%202024-08-16%2016-16-48.png)
|
||||
|
||||
A custom video player tailored for MinPluto.
|
||||
|
||||
## Installation
|
||||
To install Zorn for your Astro project, run the following:
|
||||
|
||||
```bash
|
||||
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.
|
||||
|
||||
```jsx
|
||||
---
|
||||
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.
|
||||
|
||||
```jsx
|
||||
---
|
||||
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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#poster) attribute. Just use a valid URL.
|
||||
|
||||
```jsx
|
||||
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:
|
||||
```jsx
|
||||
Video="/media/video.webm"
|
||||
```
|
||||
> Use the `/public/` folder in your Astro project.
|
||||
|
||||
Remote:
|
||||
```jsx
|
||||
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:
|
||||
```jsx
|
||||
Audio="/media/audio.ogg"
|
||||
```
|
||||
> Use the `/public/` folder in your Astro project.
|
||||
|
||||
Remote:
|
||||
```jsx
|
||||
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"`.
|
||||
|
||||
```jsx
|
||||
<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`.
|
||||
|
||||
```jsx
|
||||
<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.
|
||||
|
||||
```jsx
|
||||
<Zorn Milieu/>
|
||||
```
|
27
test/src/pages/with-separate-audio.astro
Normal file
27
test/src/pages/with-separate-audio.astro
Normal file
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
// Components
|
||||
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=""
|
||||
/>
|
||||
|
||||
<h2>The Mark On The Wall</h2>
|
||||
<p>Created by Anderson Wright</p>
|
||||
<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
|
||||
<br/>
|
||||
<a href="/">Go back</a>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #010101;
|
||||
color: white;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
</style>
|
Loading…
Reference in a new issue