MinPluto/Zorn
MinPluto/Zorn
1
Fork 0
Code Issues Pull requests Activity

Improve and update the demo

Browse source
This commit is contained in:
Korbs 2024-11-08 21:22:33 -05:00
parent 7bea355fd9
commit 72b292f860
9 changed files with 303 additions and 250 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
test/src/components/Header.astro Normal file
View file

@ -0,0 +1,40 @@
---
// Components
import Switcher from './Switcher.astro'
---
<header>
<div class="header-start">
<img src="https://md.sudovanilla.org/images/Zorn%20Player.png"/>
<a href="/about">About Demo</a>
</div>
<div class="header-end">
<Switcher/>
</div>
</header>
<style lang="scss">
header {
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
margin-top: -8px;
max-width: 1200px;
height: 64px;
.header-start {
display: flex;
align-items: center;
gap: 12px;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
img {
width: 32px;
}
}
}
</style>

4
test/src/components/Switcher.astro
View file

@ -9,7 +9,7 @@
<style lang="scss">
.switcher {
background: #232323;
border-radius: 6px;
border-radius: 3rem;
text-align: center;
margin: auto;
max-width: max-content;
@ -20,7 +20,7 @@
a {
color: white;
text-decoration: none;
border-radius: 6px;
border-radius: 3rem;
padding: 6px 12px;
font-size: 14px;
}

44
test/src/layouts/Default.astro Normal file
View file

@ -0,0 +1,44 @@
---
// Properites
const {
Title,
Description,
Page
} = Astro.props
// Components
import Header from '@components/Header.astro'
import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro'
---
<html>
<head>
<meta charset="utf-8">
<title>Zorn Demo</title>
</head>
<body>
<Header/>
<slot/>
<Info Title={Title} Description={Description}>
<slot name="info"></slot>
</Info>
</body>
</html>
<style is:global is:inline>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
margin: auto;
max-width: 1200px;
a {
color: white;
}
}
.video-container {
position: relative;
margin: auto;
max-width: 1200px;
}
</style>

30
test/src/pages/about.md Normal file
View file

@ -0,0 +1,30 @@
---
layout: src/layouts/Default.astro
---
## Data Streams
All sources used in Zorn player, in this demo, are pulled directly from the SudoVanilla Ocean. The upload speed on SudoVanilla's internet connection is 10/Mpbs, which is slow for video and audio streaming. So while viewing the demo, expect buffering and some videos to lag a bit.
SudoVanilla has a strict policy about only pulling sources from it's own servers only, which is why the demo is setup like this.
## Credits
**Milieu**
The Milieu function, also known as ambient mode on other players, uses it's script directly from [Poke's source code](https://codeberg.org/ashley/poke/src/commit/a28f8e253663264abfcd284f8769b6e901ac1371/html/poketube.ejs#L2186-L2261).
**HLS**
HLS, HTTP Live Streaming, makes it possible for Zorn to support live streaming such as using .m3u8 sources. The script is minified in Zorn's source code. [You can view here](https://hlsjs.video-dev.org/dist/hls.js).
To apply HLS to Zorn, another script is used from the same developers. [You can view that here](https://github.com/video-dev/hls.js/blob/master/demo/basic-usage.html#L14-L36).
**Video and Audio Sync**
Zorn supports a function to have a separated video and audio source, this was built to allow for 1080p/4K/8K support in MinPluto as it was originally built as a YouTube frontend.
To pull this off, SudoVanilla went through a few scripts that were somewhat usable, but not the best. Eventfully, I landed on the script by Michancio on their Gist. You can [view their Gist here](https://gist.github.com/michancio/59b9f3dc54b3ff4f6a84). It is modified in Zorn's source code.
**Icons**
All icons used in Zorn are from [Iconoir](https://iconoir.com/support), a free icon library.

83
test/src/pages/index.astro
View file

@ -1,4 +1,7 @@
---
// Layout
import Default from 'src/layouts/Default.astro'
// Components
import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro'
@ -12,58 +15,42 @@ import {
NavArrowRight
} from '@iconoir/vue'
---
<meta charset="utf-8">
<Zorn
PlayerName="nameit_whatever_you_want"
Title="Ennie and Yoyki: Non-Girly Games"
Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"
CustomControlsWithMenu
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 <SwitchOff/></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>
<Default Page="/" Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
<Zorn
PlayerName="nameit_whatever_you_want"
Title="Ennie and Yoyki: Non-Girly Games"
Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"
CustomControlsWithMenu
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 <SwitchOff/></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>
<slot slot="info">
<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">YouTube</a></p>
<p>This demo pulls from <a href="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4">SudoVanilla Ocean</a>.</p>
</slot>
</Default>
<Switcher/>
<style is:inline>a[href="/"] {background: white !important;color: black !important;}</style>
<Info Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">YouTube</a></p>
<p>This demo pulls from <a href="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4">SudoVanilla Ocean</a>.</p>
</Info>
<style is:global>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
a {
color: white;
}
}
.video-container {
position: relative;
margin: 40px;
}
</style>
<script is:inline>
function PlayerMenu_HideAll() {
document.querySelector('.vc-menu#settings').style.display = 'none'

46
test/src/pages/live.astro
View file

@ -1,36 +1,22 @@
---
// Layout
import Default from 'src/layouts/Default.astro'
// Components
import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro'
import Switcher from '@components/Switcher.astro'
---
<Zorn
PlayerName="nameit_whatever_you_want"
Title="relaxbeats"
Video="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8"
Live
/>
<Default Title="Relax Beats" Description="Live on Twitch">
<Zorn
PlayerName="nameit_whatever_you_want"
Title="relaxbeats"
Video="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8"
Live
/>
<slot slot="info">
<p>Source: <a href="https://www.twitch.tv/relaxbeats">https://www.twitch.tv/relaxbeats</a></p>
<p>This demo pulls from: <a href="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8">https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8</a></p>
</slot>
</Default>
<style is:global is:inline>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
a {
color: white;
}
}
.video-container {
position: relative;
margin: 40px;
}
</style>
<Switcher/>
<style is:inline>a[href="/live"] {background: white !important;color: black !important;}</style>
<Info Title="Relax Beats" Description="Live on Twitch">
<p>Source: <a href="https://www.twitch.tv/relaxbeats">https://www.twitch.tv/relaxbeats</a></p>
<p>This demo pulls from: <a href="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8">https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8</a></p>
</Info>
<style is:inline>a[href="/live"] {background: white !important;color: black !important;}</style>

88
test/src/pages/milieu.astro
View file

@ -1,4 +1,7 @@
---
// Layout
import Default from 'src/layouts/Default.astro'
// Components
import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro'
@ -12,61 +15,44 @@ import {
NavArrowRight
} from '@iconoir/vue'
---
<meta charset="utf-8">
<Zorn
PlayerName="nameit_whatever_you_want"
Title="Islandia"
Poster="https://md.sudovanilla.org/images/Islandia%2000%3A00%3A21.png"
Video="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4"
CustomControlsWithMenu
SettingsMenu
Milieu
>
<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>
<Default Title="Islandia" Description="Created by Vadim Sherbakov">
<Zorn
PlayerName="nameit_whatever_you_want"
Title="Islandia"
Poster="https://md.sudovanilla.org/images/Islandia%2000%3A00%3A21.png"
Video="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4"
CustomControlsWithMenu
SettingsMenu
Milieu
>
<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>
<slot slot="info">
<p>Source: <a href="https://vimeo.com/354598551">https://vimeo.com/354598551</a></p>
<p>This demo pulls from: <a href="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4">https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4</a></p>
<p>Zorn Player uses the <a href="https://codeberg.org/ashley/poke/src/commit/a28f8e253663264abfcd284f8769b6e901ac1371/html/poketube.ejs#L2186-L2261">Ambient effect from Poke's source code</a>.</p>
</slot>
</Default>
<Switcher/>
<style is:inline>a[href="/milieu"] {background: white !important;color: black !important;}</style>
<Info Title="Islandia" Description="Created by Vadim Sherbakov">
<p>Source: <a href="https://vimeo.com/354598551">https://vimeo.com/354598551</a></p>
<p>This demo pulls from: <a href="https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4">https://ocean.sudovanilla.org/media/videos/Islandia/Islandia.mp4</a></p>
<p>Zorn Player uses the <a href="https://codeberg.org/ashley/poke/src/commit/a28f8e253663264abfcd284f8769b6e901ac1371/html/poketube.ejs#L2186-L2261">Ambient effect from Poke's source code</a>.</p>
</Info>
<style is:global>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
a {
color: white;
}
}
.video-container {
position: relative;
margin: 40px;
}
</style>
<script is:inline>
function PlayerMenu_HideAll() {
document.querySelector('.vc-menu#settings').style.display = 'none'

164
test/src/pages/multi.astro
View file

@ -1,94 +1,88 @@
---
// Layout
import Default from 'src/layouts/Default.astro'
// Components
import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro'
import Switcher from '@components/Switcher.astro'
// Icons
import {
ArrowUpRight,
NavArrowLeft,
SwitchOff,
NavArrowRight
} from '@iconoir/vue'
---
<meta charset="utf-8">
<div style="display: grid; grid-template-columns: 45% auto 45%; gap: 24px;">
<div>
<Zorn
Title="Ennie and Yoyki: Non-Girly Games"
Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"
PlayerName="EAYNGG"
/>
<Info Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">YouTube</a></p>
<p>This demo pulls from <a href="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4">SudoVanilla Ocean</a>.</p>
</Info>
<Default>
<div style="display: grid; grid-template-columns: 45% auto 45%; gap: 24px;">
<div>
<Zorn
Title="Ennie and Yoyki: Non-Girly Games"
Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4"
PlayerName="EAYNGG"
/>
<Info Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">YouTube</a></p>
<p>This demo pulls from <a href="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4">SudoVanilla Ocean</a>.</p>
</Info>
</div>
<span style="background: #232323;height: 600px;width: 6px;border-radius: 1rem;"></span>
<div>
<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=""
PlayerName="TMOTW"
/>
<Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
<p>This demo pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>
<p>This demo also pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4</a></p>
</Info>
</div>
</div>
<span style="background: #232323;height: 600px;width: 6px;border-radius: 1rem;"></span>
<div>
<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=""
PlayerName="TMOTW"
/>
<Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
<p>This demo pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>
<p>This demo also pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4</a></p>
</Info>
<div style="margin: auto; max-width: 600px;">
<p>
As of Zorn Player v0.4.6, it is now possible to have multiple instances of the player on one page. With the new <code>PlayerName</code> option, which is required from now on.
<br/>
<br/>
This update now identities each Zorn Player with the <code>PlayerName</code> option, as an ID such as <code>zorn-player-PLAYER_NAME_HERE</code> is now used.
<br/>
<br/>
The <code>PlayerName</code> option will be identited by the built-in scripts using Astro's <code>definer:vars</code> feature for the script tag.
</p>
<p>
Having multiple instances can still be buggy, depending on how you have it setup.
</p>
</div>
</div>
<Switcher/>
<style is:inline>a[href="/multi"] {background: white !important;color: black !important;}</style>
<div style="margin: auto; max-width: 600px;">
<p>
As of Zorn Player v0.4.6, it is now possible to have multiple instances of the player on one page. With the new <code>PlayerName</code> option, which is required from now on.
<br/>
<br/>
This update now identities each Zorn Player with the <code>PlayerName</code> option, as an ID such as <code>zorn-player-PLAYER_NAME_HERE</code> is now used.
<br/>
<br/>
The <code>PlayerName</code> option will be identited by the built-in scripts using Astro's <code>definer:vars</code> feature for the script tag.
</p>
<p>
Having multiple instances can still be buggy, depending on how you have it setup.
</p>
</div>
<style is:global>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
a {
color: white;
}
}
.video-container {
position: relative;
margin: 40px;
}
<style is:global>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
a {
color: white;
}
}
.video-container {
position: relative;
margin: 40px;
}
body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > center:nth-child(8),
body > div:nth-child(1) > div:nth-child(3) > div:nth-child(3) > center:nth-child(8),
body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > hr:nth-child(7),
body > div:nth-child(1) > div:nth-child(3) > div:nth-child(3) > hr:nth-child(7) {
display: none !important;
}
code {
background: #fff;
border-radius: 4px;
padding: 0px 4px;
color: black;
}
</style>
</Default>
body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > center:nth-child(8),
body > div:nth-child(1) > div:nth-child(3) > div:nth-child(3) > center:nth-child(8),
body > div:nth-child(1) > div:nth-child(1) > div:nth-child(3) > hr:nth-child(7),
body > div:nth-child(1) > div:nth-child(3) > div:nth-child(3) > hr:nth-child(7) {
display: none !important;
}
code {
background: #fff;
border-radius: 4px;
padding: 0px 4px;
color: black;
}
</style>
<style is:inline>a[href="/multi"] {background: white !important;color: black !important;}</style>

54
test/src/pages/with-separate-audio.astro
View file

@ -1,40 +1,26 @@
---
// Layout
import Default from 'src/layouts/Default.astro'
// Components
import {Zorn} from '@minpluto/zorn'
import Info from '@components/Info.astro'
import Switcher from '@components/Switcher.astro'
---
<Zorn
PlayerName="nameit_whatever_you_want"
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=""
/>
<Default Title="The Mark On The Wall" Description="Created by Anderson Wright">
<Zorn
PlayerName="nameit_whatever_you_want"
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=""
/>
<slot slot="info">
<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
<p>This demo is using the video source from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>
<p>This demo is using the audio source from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4</a></p>
</slot>
</Default>
<Switcher/>
<style is:inline>a[href="/with-separate-audio"] {background: white !important;color: black !important;}</style>
<Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
<p>This demo is using the video source from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>
<p>This demo is using the audio source from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4</a></p>
</Info>
<style is:global>
body {
background: #010101;
color: white;
font-family: Arial, Helvetica, sans-serif;
a {
color: white;
}
}
.video-container {
position: relative;
margin: 40px;
}
</style>
<style is:inline>a[href="/with-separate-audio"] {background: white !important;color: black !important;}</style>