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

Add YouTube to demo page

Browse source
This commit is contained in:
Korbs 2024-11-29 17:45:36 -05:00
parent 48a44dade7
commit 57eb7f9246
2 changed files with 52 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,7 @@
<a href="/live">Live Stream</a> <a href="/live">Live Stream</a>
<a href="/milieu">Milieu Effect</a> <a href="/milieu">Milieu Effect</a>
<a href="/multi">Multiple Instances</a> <a href="/multi">Multiple Instances</a>
<a href="/youtube">YouTube</a>
</div> </div>
<style lang="scss"> <style lang="scss">

51
test/src/pages/youtube.astro Normal file
View file

@ -0,0 +1,51 @@
---
// Layout
import Default from 'src/layouts/Default.astro'
// Components
import {Zorn} from '@minpluto/zorn'
---
<Default Page="/" Title="WING IT! - Blender Open Movie" Description="Created by Blender Studio">
<!-- Please run your own Invidious instance in production, with rotating proxy added -->
<Zorn
PlayerName="youtube_player"
YouTube
WatchId="u9lj-c29dxI"
Invidious="invidious.nerdvpn.de"
Audio
>
</Zorn>
<slot slot="info">
<p>The video above is from directly from <a href="https://www.youtube.com/watch?v=u9lj-c29dxI">youtube.com/watch?v=u9lj-c29dxI</a>. Playing at 1080p.</p>
<p>Zorn uses the Invidious URL parameters to fetch the Youtube video and audio.</p>
<p>You must add the "Audio" option for Zorn for audio to work correctly for higher quality videos.</p>
<p>For the URL parameters, the "itag" parameter is mainly use to fetch the correct quality you want for the video player. It uses 1080p by default if one is not set. </p>
<a href="https://docs.invidious.io/url-parameters/">Invidious URL Parameters</a>
<p>It is recommended, during production, to run your own Invidious instance with rotating proxy. Rotating the proxy should avoid blockage from YouTube, as YouTube heavily trying to shut down the Invidious project.</p>
<a href="https://docs.invidious.io/installation/">Setting up Invidious</a>
<p></p>
<a href="https://docs.invidious.io/ipv6-rotator/">Rotating your IPv6</a>
<br/>
<br/>
</slot>
</Default>
<style is:inline>a[href="/youtube"] {background: white !important;color: black !important;}</style>
<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>