Update the README
This commit is contained in:
parent
ebe50dab6a
commit
adcc6dcbb6
133
README.md
133
README.md
|
|
@ -8,7 +8,7 @@ A custom video player tailored for MinPluto.
|
||||||
To install Zorn for your Astro project, run the following:
|
To install Zorn for your Astro project, run the following:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
bun install @minpluto/zorn --registry https://npm.sudovanilla.org
|
npm 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.
|
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.
|
||||||
|
|
@ -55,12 +55,20 @@ import {Zorn} from '@minpluto/zorn'
|
||||||
Make sure to add `muted` to the `VideoAttributes` option, just in case.
|
Make sure to add `muted` to the `VideoAttributes` option, just in case.
|
||||||
|
|
||||||
## References
|
## References
|
||||||
|
**Title** - `Title`
|
||||||
|
|
||||||
|
When the video enters fullscreen, the title of the video will appear in the upper left corner of the screen.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
<Zorn Title="Ennie and Yoyki: Non-Girly Games"/>
|
||||||
|
```
|
||||||
|
|
||||||
**Poster** - `Poster`
|
**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.
|
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
|
```jsx
|
||||||
Poster="https://example.org/media/thumbnail.webp"
|
<Zorn Poster="https://example.org/media/thumbnail.webp"/>
|
||||||
```
|
```
|
||||||
|
|
||||||
**Video Source** - `Video`
|
**Video Source** - `Video`
|
||||||
|
|
@ -69,13 +77,13 @@ The main part of the video player, is of course the video. You can set any video
|
||||||
|
|
||||||
Local:
|
Local:
|
||||||
```jsx
|
```jsx
|
||||||
Video="/media/video.webm"
|
<Zorn Video="/media/video.webm"/>
|
||||||
```
|
```
|
||||||
> Use the `/public/` folder in your Astro project.
|
> Use the `/public/` folder in your Astro project.
|
||||||
|
|
||||||
Remote:
|
Remote:
|
||||||
```jsx
|
```jsx
|
||||||
Video="https://example.org/media/video.webm"
|
<Zorn Video="https://example.org/media/video.webm"/>
|
||||||
```
|
```
|
||||||
|
|
||||||
**Audio Source** - `Audio`
|
**Audio Source** - `Audio`
|
||||||
|
|
@ -84,23 +92,82 @@ If you're in a scenario where the video source is missing audio, but you do have
|
||||||
|
|
||||||
Local:
|
Local:
|
||||||
```jsx
|
```jsx
|
||||||
Audio="/media/audio.ogg"
|
<Zorn Audio="/media/audio.ogg"/>
|
||||||
```
|
```
|
||||||
> Use the `/public/` folder in your Astro project.
|
> Use the `/public/` folder in your Astro project.
|
||||||
|
|
||||||
Remote:
|
Remote:
|
||||||
```jsx
|
```jsx
|
||||||
Audio="https://example.org/media/audio.ogg"
|
<Zorn Audio="https://example.org/media/audio.ogg"/>
|
||||||
```
|
```
|
||||||
|
|
||||||
**Custom Controls** - `CustomControls`
|
**Settings Menu** - `SettingsMenu`
|
||||||
|
|
||||||
Use the custom controls for Zorn. If this is not applied, no controls will appears.
|
<video title="Settings Menu in action on MinPluto" controls autoplay muted loop src="https://md.sudovanilla.org/videos/webm/Screencast%20from%202024-07-31%2000-44-01.webm"></video>
|
||||||
|
|
||||||
If you want to use the built-in player from the web browser, then use `VideoAttributes="controls"`.
|
If you want to add additional settings to the player, you can enable the Settings button and add your own menu and sub-menus.
|
||||||
|
|
||||||
|
To enable the menu, add the `SettingsMenu` option:
|
||||||
```jsx
|
```jsx
|
||||||
<Zorn CustomControls/>
|
<Zorn SettingsMenu/>
|
||||||
|
```
|
||||||
|
|
||||||
|
Then, as a slot, add your menu like so:
|
||||||
|
```jsx
|
||||||
|
<Zorn SettingsMenu>
|
||||||
|
<div id="settings" class="vc-menu">
|
||||||
|
<button>Stats for Geeks</button>
|
||||||
|
<hr/>
|
||||||
|
<button>Open Video URL <ArrowUpRight/></button>
|
||||||
|
<button>Download <ArrowUpRight/></button>
|
||||||
|
<button>Embed <ArrowUpRight/></button>
|
||||||
|
<hr/>
|
||||||
|
<button id="has-switch">Milieu <SwitchOn/></button>
|
||||||
|
<button>Close Captions <NavArrowRight/></button>
|
||||||
|
</div>
|
||||||
|
</Zorn>
|
||||||
|
```
|
||||||
|
|
||||||
|
> Use `OpenZornMenu()` as the open menu function. You can use the scripts provided in `/test/` of this package.
|
||||||
|
|
||||||
|
You can also add sub-menus with additional scripts you'll need to add:
|
||||||
|
```jsx
|
||||||
|
<Zorn SettingsMenu>
|
||||||
|
<div id="settings" class="vc-menu">
|
||||||
|
<button>Stats for Geeks</button>
|
||||||
|
<hr/>
|
||||||
|
<button>Open Video URL <ArrowUpRight/></button>
|
||||||
|
<button>Download <ArrowUpRight/></button>
|
||||||
|
<button>Embed <ArrowUpRight/></button>
|
||||||
|
<hr/>
|
||||||
|
<button id="has-switch">Milieu <SwitchOn/></button>
|
||||||
|
<button>Close Captions <NavArrowRight/></button>
|
||||||
|
<button onclick="PlayerMenu_Quality()">Quality <NavArrowRight/></button>
|
||||||
|
</div>
|
||||||
|
<div id="quality-changer" class="vc-menu">
|
||||||
|
<button onclick="OpenZornMenu()"><span style="display: flex; align-items: center;"><NavArrowLeft/> Back</span></button>
|
||||||
|
<button>1080p</button>
|
||||||
|
<button>720p</button>
|
||||||
|
<button>360p</button>
|
||||||
|
</div>
|
||||||
|
</Zorn>
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
|
function PlayerMenu_HideAll() {
|
||||||
|
document.querySelector('.vc-menu#settings').style.display = 'none'
|
||||||
|
document.querySelector('.vc-menu#quality-changer').style.display = 'none'
|
||||||
|
document.querySelector('#open-zorn-settings-button').setAttribute('onclick', 'OpenZornMenu()')
|
||||||
|
}
|
||||||
|
function OpenZornMenu() {
|
||||||
|
PlayerMenu_HideAll()
|
||||||
|
document.querySelector('.vc-menu#settings').style.display = 'flex'
|
||||||
|
document.querySelector('#open-zorn-settings-button').setAttribute('onclick', 'PlayerMenu_HideAll()')
|
||||||
|
}
|
||||||
|
function PlayerMenu_Quality() {
|
||||||
|
PlayerMenu_HideAll()
|
||||||
|
document.querySelector('.vc-menu#quality-changer').style.display = 'flex'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
**Attributes** - `VideoAttributes` / `AudioAttributes`
|
**Attributes** - `VideoAttributes` / `AudioAttributes`
|
||||||
|
|
@ -117,4 +184,48 @@ The Milieu option is an attempt to copy YouTube's ambient player feature. Where
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<Zorn Milieu/>
|
<Zorn Milieu/>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Compatibility
|
||||||
|
### Web Browsers
|
||||||
|
| Browser | Live Streams |Player | CSS | JavaScript |
|
||||||
|
|--------------------|--------------|-------|-----|------------|
|
||||||
|
| **Other Browsers**|
|
||||||
|
| FOSS Browser | 🔘 | 🔘 | 🔘 | 🔘 |
|
||||||
|
| Ladybird | 🔘 | 🔘 | 🔘 | 🔘 |
|
||||||
|
| **WebKit Browsers**|
|
||||||
|
| Safari | 🔘 | 🔘 | 🔘 | 🔘 |
|
||||||
|
| GNOME Web | 🔘 | ✅ | ✅*N| ✅ |
|
||||||
|
| DuckDuckGo | 🔘 | 🔘 | 🔘 | 🔘 |
|
||||||
|
| **Electron Browsers**|
|
||||||
|
| Min | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| **Chromium Browsers**|
|
||||||
|
| Brave | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| Chromium | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| Google Chrome | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| Microsoft Edge | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| Opera | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| Vivaldi | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| Yandex | 🔘 | ❌ | ✅ | ❌ |
|
||||||
|
| **Firefox Browsers**|
|
||||||
|
| Falkon | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| Firefox | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| Floorp | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| GNU/IceCat | 🔘 | ✅ | ✅ | ✅*IC |
|
||||||
|
| Librewolf | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| Mull | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| Mullvad | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| Tor | 🔘 | 🔘 | 🔘 | 🔘 |
|
||||||
|
| Waterfox | 🔘 | ✅ | ✅ | ✅ |
|
||||||
|
| **Outdated Browsers**|
|
||||||
|
| Internet Explorer | 🔘 | 🔘 | 🔘 | 🔘 |
|
||||||
|
|
||||||
|
> All browsers are tested as-is out of box. Some functions with ❌ can probably work if you tweak the settings or interact with a built-in extension.
|
||||||
|
|
||||||
|
> IC: By default, GNU/IceCat has the LibreJS extension installed, it will block all JS by default if it does not provide a valid license. Examples for settings menu do not provide one nor one is shown in the test version.
|
||||||
|
|
||||||
|
> N: The backdrop blur does not work. This should not affect the function of the video player.
|
||||||
|
|
||||||
|
## To Do
|
||||||
|
- Support HLS (HTTP Live Streaming)
|
||||||
|
- Touch gestures for mobile
|
||||||
Loading…
Reference in a new issue