Allow for Multi-Instances of the Player on one page #1
2 changed files with 92 additions and 0 deletions
|
|
@ -3,6 +3,7 @@
|
||||||
<a href="/with-separate-audio">Separated Audio</a>
|
<a href="/with-separate-audio">Separated Audio</a>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
||||||
91
test/src/pages/multi.astro
Normal file
91
test/src/pages/multi.astro
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
---
|
||||||
|
// 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://md.sudovanilla.org/images/eay-p-v.jpg"
|
||||||
|
Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"
|
||||||
|
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">https://www.youtube.com/watch?v=MuyJtxzyU3o</a></p>
|
||||||
|
<p>This demo pulls from: <a href="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm">https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm</a></p>
|
||||||
|
<p>Subtitles shown are part of the video itself, not the player.</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>
|
||||||
|
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
Loading…
Reference in a new issue