Merge pull request 'Allow for Multi-Instances of the Player on one page' (#1) from multi-instance into main
Reviewed-on: #1
This commit is contained in:
commit
26d0589306
13 changed files with 188 additions and 80 deletions
|
|
@ -42,6 +42,7 @@ import {Zorn} from '@minpluto/zorn'
|
|||
---
|
||||
|
||||
<Zorn
|
||||
PlayerName="nameit_whatever_you_want"
|
||||
Poster="https://md.sudovanilla.org/images/eay-p-v.jpg"
|
||||
Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"
|
||||
CustomControls
|
||||
|
|
@ -49,6 +50,9 @@ import {Zorn} from '@minpluto/zorn'
|
|||
/>
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> The option `PlayerName` is now required as of v0.4.6.
|
||||
|
||||
**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 option to add a seprated audio source to include.
|
||||
|
|
@ -59,6 +63,7 @@ import {Zorn} from '@minpluto/zorn'
|
|||
---
|
||||
|
||||
<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"
|
||||
|
|
|
|||
4
TODO.md
4
TODO.md
|
|
@ -3,11 +3,11 @@
|
|||
- [ ] Multi-Video Tracks ([`videoTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/videoTracks))
|
||||
- [ ] Multi-Audio Tracks ([`audioTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks))
|
||||
- [ ] Playback Rate ([`playbackRate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate))
|
||||
- [ ] Add Picture-in-Picture button
|
||||
- [x] Add Picture-in-Picture button
|
||||
- [x] Volume Controller
|
||||
- [ ] Mobile Gestures
|
||||
- [ ] Cast Support
|
||||
- [ ] Allow for multiple players on one page
|
||||
- [x] Allow for multiple players on one page
|
||||
- [ ] 360 Video Support
|
||||
- [ ] Milieu Settings
|
||||
- [ ] Mode (Default | Fullscreen)
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
"live-streaming"
|
||||
],
|
||||
"type": "module",
|
||||
"version": "0.4.54",
|
||||
"version": "0.4.6",
|
||||
"exports": {
|
||||
".": "./index.ts"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
<script is:inline>
|
||||
---
|
||||
const {
|
||||
PlayerName
|
||||
} = Astro.props
|
||||
---
|
||||
|
||||
<script define:vars={{PlayerName}}>
|
||||
/**
|
||||
* @licstart The following is the entire license notice for the
|
||||
* JavaScript code in this page.
|
||||
|
|
@ -24,9 +30,9 @@
|
|||
* for the JavaScript code in this page.
|
||||
*
|
||||
*/
|
||||
var VideoContainer = document.querySelector('.video-container')
|
||||
var VideoControls = document.querySelector('.video-controls')
|
||||
var Player = document.querySelector('video')
|
||||
var VideoContainer = document.querySelector('#zorn-player-' + PlayerName)
|
||||
var VideoControls = document.querySelector('#zorn-player-' + PlayerName + ' .video-controls')
|
||||
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
|
||||
|
||||
// Icons
|
||||
var play_solid_default = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
|
||||
|
|
@ -41,35 +47,35 @@ var ExitFullscreenIcon = exit_fullscreen_solid_default
|
|||
|
||||
// Fullscreen
|
||||
function Fullscreen() {
|
||||
const Button_Fullscreen = document.getElementById("vc-fullscreen");
|
||||
const Button_Fullscreen = document.querySelector("#zorn-player-" + PlayerName + " #vc-fullscreen");
|
||||
function Toggle_Fullscreen() {
|
||||
if (document.fullscreenElement) {
|
||||
document.querySelector('.vc-top').style.opacity = '0'
|
||||
document.querySelector('.video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)'
|
||||
document.querySelector('.video-container .video-controls, .video-container video').style.borderRadius = '12px'
|
||||
document.querySelector('.video-container .video-controls').style.bottom = '4px'
|
||||
document.querySelector('.video-container .video-controls').style.height = 'calc(100% - 28px)'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '0'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls, .video-container video').style.borderRadius = '12px'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.bottom = '4px'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.height = 'calc(100% - 28px)'
|
||||
document.exitFullscreen();
|
||||
} else if (document.webkitFullscreenElement) {
|
||||
document.querySelector('.vc-top').style.opacity = '0'
|
||||
document.querySelector('.video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)'
|
||||
document.querySelector('.video-container .video-controls, .video-container video').style.borderRadius = '12px'
|
||||
document.querySelector('.video-container .video-controls').style.bottom = '4px'
|
||||
document.querySelector('.video-container .video-controls').style.height = 'calc(100% - 28px)'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '0'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0,0,0,0.7523460067620799) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 94%, rgba(0,0,0,0) 100%)'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls, .video-container video').style.borderRadius = '12px'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.bottom = '4px'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.height = 'calc(100% - 28px)'
|
||||
document.webkitExitFullscreen();
|
||||
} else if (VideoContainer.webkitRequestFullscreen) {
|
||||
document.querySelector('.vc-top').style.opacity = '1'
|
||||
document.querySelector('.video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)'
|
||||
document.querySelector('.video-container .video-controls, .video-container video').style.borderRadius = '0'
|
||||
document.querySelector('.video-container .video-controls').style.bottom = '0px'
|
||||
document.querySelector('.video-container .video-controls').style.height = '100%'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '1'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls, .video-container video').style.borderRadius = '0'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.bottom = '0px'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.height = '100%'
|
||||
VideoContainer.webkitRequestFullscreen();
|
||||
} else {
|
||||
document.querySelector('.vc-top').style.opacity = '1'
|
||||
document.querySelector('.video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)'
|
||||
document.querySelector('.video-container .video-controls, .video-container video').style.borderRadius = '0'
|
||||
document.querySelector('.video-container .video-controls').style.bottom = '0px'
|
||||
document.querySelector('.video-container .video-controls').style.height = '100%'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .vc-top').style.opacity = '1'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-controls').style.background = 'linear-gradient(0deg, rgba(0, 0, 0, 0.753) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, 1) 100%)'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls, .video-container video').style.borderRadius = '0'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.bottom = '0px'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .video-container .video-controls').style.height = '100%'
|
||||
VideoContainer.requestFullscreen();
|
||||
}
|
||||
Update_FullscreenButton()
|
||||
|
|
@ -90,20 +96,9 @@ function Fullscreen() {
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
function Update_PlayPauseButton() {
|
||||
if (Player.paused) {
|
||||
Button_PlayPause.setAttribute("data-title", "Play (K)");
|
||||
Button_PlayPause.innerHTML = `${PlayIcon}`;
|
||||
} else {
|
||||
Button_PlayPause.setAttribute("data-title", "Pause (K)");
|
||||
Button_PlayPause.innerHTML = `${PauseIcon}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Play/Pause
|
||||
function PlayPause() {
|
||||
const Button_PlayPause = document.querySelector(".video-controls #vc-playpause");
|
||||
const Button_PlayPause = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-playpause");
|
||||
Button_PlayPause.addEventListener("click", Toggle_PlayPause);
|
||||
Player.addEventListener("click", Toggle_PlayPause);
|
||||
Player.addEventListener("play", Update_PlayPauseButton);
|
||||
|
|
@ -128,8 +123,8 @@ function PlayPause() {
|
|||
|
||||
// Skip Around
|
||||
function SkipAround() {
|
||||
const Button_SkipBack = document.querySelector(".video-controls #vc-backwards");
|
||||
const Button_SkipForth = document.querySelector(".video-controls #vc-forwards");
|
||||
const Button_SkipBack = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-backwards");
|
||||
const Button_SkipForth = document.querySelector("#zorn-player-" + PlayerName + " .video-controls #vc-forwards");
|
||||
Button_SkipBack.addEventListener("click", Toggle_SkipBack);
|
||||
Button_SkipForth.addEventListener("click", Toggle_SkipForth);
|
||||
function Toggle_SkipBack() {
|
||||
|
|
@ -149,11 +144,11 @@ function AutoToggleControls() {
|
|||
if (Player.paused) {
|
||||
return;
|
||||
} else {
|
||||
document.querySelector(".video-controls").classList.add("hide");
|
||||
document.querySelector("#zorn-player-" + PlayerName + " .video-controls").classList.add("hide");
|
||||
}
|
||||
}
|
||||
function Show_Controls2() {
|
||||
document.querySelector(".video-controls").classList.remove("hide");
|
||||
document.querySelector("#zorn-player-" + PlayerName + " .video-controls").classList.remove("hide");
|
||||
}
|
||||
VideoControls.addEventListener("mouseenter", Show_Controls2);
|
||||
VideoControls.addEventListener("mouseleave", Hide_Controls2);
|
||||
|
|
@ -249,21 +244,21 @@ function KeyboardShortcuts(events) {
|
|||
// If Media Ends, fade main controls and show a "Replay" button
|
||||
function PlayAgain() {
|
||||
Player.onended = (event) => {
|
||||
document.querySelector('.vc-start').style.opacity = '0'
|
||||
document.querySelector('.vc-start').style.pointerEvents = 'none'
|
||||
document.querySelector('.vc-center').style.opacity = '0'
|
||||
document.querySelector('.vc-center').style.pointerEvents = 'none'
|
||||
document.querySelector('#vc-playagain').style.display = 'inherit'
|
||||
document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.opacity = '0'
|
||||
document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.pointerEvents = 'none'
|
||||
document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.opacity = '0'
|
||||
document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.pointerEvents = 'none'
|
||||
document.querySelector("#zorn-player-" + PlayerName + " #vc-playagain").style.display = 'inherit'
|
||||
}
|
||||
document.querySelector('#vc-playagain').onclick = PlayItAgain
|
||||
}
|
||||
|
||||
function PlayItAgain() {
|
||||
document.querySelector('.vc-start').style.opacity = '1'
|
||||
document.querySelector('.vc-start').style.pointerEvents = 'all'
|
||||
document.querySelector('.vc-center').style.opacity = '1'
|
||||
document.querySelector('.vc-center').style.pointerEvents = 'all'
|
||||
document.querySelector('#vc-playagain').style.display = 'none'
|
||||
document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.opacity = '1'
|
||||
document.querySelector("#zorn-player-" + PlayerName + " .vc-start").style.pointerEvents = 'all'
|
||||
document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.opacity = '1'
|
||||
document.querySelector("#zorn-player-" + PlayerName + " .vc-center").style.pointerEvents = 'all'
|
||||
document.querySelector("#zorn-player-" + PlayerName + " #vc-playagain").style.display = 'none'
|
||||
|
||||
Player.pause();
|
||||
Player.currentTime = '0';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
<script is:inline>
|
||||
---
|
||||
const {
|
||||
PlayerName
|
||||
} = Astro.props
|
||||
---
|
||||
|
||||
<script define:vars={{PlayerName}}>
|
||||
/**
|
||||
* @licstart The following is the entire license notice for the
|
||||
* JavaScript code in this page.
|
||||
|
|
@ -25,9 +31,9 @@
|
|||
*
|
||||
*/
|
||||
function Seek() {
|
||||
var Player = document.querySelector('video')
|
||||
const timeElapsed = document.getElementById("current")
|
||||
const duration = document.getElementById("duration")
|
||||
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
|
||||
const timeElapsed = document.querySelector('#zorn-player-' + PlayerName + ' #current')
|
||||
const duration = document.querySelector('#zorn-player-' + PlayerName + ' #duration')
|
||||
function formatTime(timeInSeconds) {
|
||||
const result = new Date(timeInSeconds * 1e3)
|
||||
.toISOString()
|
||||
|
|
@ -56,8 +62,8 @@ function Seek() {
|
|||
)
|
||||
}
|
||||
Player.addEventListener("timeupdate", updateTimeElapsed)
|
||||
const progressBar = document.querySelector(".vc-progress-bar")
|
||||
const seek = document.getElementById("seek")
|
||||
const progressBar = document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar')
|
||||
const seek = document.querySelector('#zorn-player-' + PlayerName + ' #seek')
|
||||
function initializeVideo() {
|
||||
const videoDuration = Math.round(Player.duration)
|
||||
seek.setAttribute("max", videoDuration)
|
||||
|
|
@ -71,10 +77,10 @@ function Seek() {
|
|||
}
|
||||
function updateProgress() {
|
||||
seek.value = Math.floor(Player.currentTime)
|
||||
document.querySelector('.vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
|
||||
}
|
||||
Player.addEventListener("timeupdate", updateProgress)
|
||||
const seekTooltip = document.getElementById("seek-tooltip")
|
||||
const seekTooltip = document.querySelector('#zorn-player-' + PlayerName + ' #seek-tooltip')
|
||||
function updateSeekTooltip(event) {
|
||||
const skipTo = Math.round(
|
||||
(event.offsetX / event.target.clientWidth) *
|
||||
|
|
@ -86,7 +92,7 @@ function Seek() {
|
|||
const rect = Player.getBoundingClientRect()
|
||||
seekTooltip.style.left = `${event.pageX - rect.left}px`
|
||||
seekTooltip.style.opacity = '1'
|
||||
document.querySelector('.vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
|
||||
document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%'
|
||||
seek.addEventListener('mouseleave', () => {
|
||||
seekTooltip.style.opacity = '0'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
<script is:inline>
|
||||
---
|
||||
const {
|
||||
PlayerName
|
||||
} = Astro.props
|
||||
---
|
||||
|
||||
<script define:vars={{PlayerName}}>
|
||||
/**
|
||||
* @licstart The following is the entire license notice for the
|
||||
* JavaScript code in this page.
|
||||
|
|
@ -27,8 +33,8 @@
|
|||
*/
|
||||
// https://gist.github.com/michancio/59b9f3dc54b3ff4f6a84
|
||||
// Find elements
|
||||
var SyncVideo = document.querySelector(".main-video")
|
||||
var SyncAudio = document.querySelector(".main-audio")
|
||||
var SyncVideo = document.querySelector("#zorn-player-" + PlayerName + " .main-video")
|
||||
var SyncAudio = document.querySelector("#zorn-player-" + PlayerName + " .main-audio")
|
||||
|
||||
// Object for synchronization of multiple media/sources
|
||||
if (typeof window.MediaController === "function") {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
// Properties
|
||||
const {
|
||||
PlayerName,
|
||||
Poster,
|
||||
Video,
|
||||
Audio,
|
||||
|
|
@ -23,35 +24,34 @@ import './Index.scss'
|
|||
import { Settings } from '@iconoir/vue'
|
||||
---
|
||||
|
||||
<div class="video-container">
|
||||
<div class="video-container" id={"zorn-player-" + PlayerName}>
|
||||
<video class="main-video" {VideoAttributes} disableremoteplayback src={Video} poster={Poster} preload="auto"></video>
|
||||
{Audio ? <audio class="main-audio"><source {AudioAttributes} src={Audio} type="audio/mp3"/></audio> : null }
|
||||
{Audio ? <Sync/> : null }
|
||||
{Audio ? <Sync PlayerName={PlayerName}/> : null }
|
||||
{Milieu ? <MilieuEffect/> : null }
|
||||
{SettingsMenu ?
|
||||
<Controls Live={Live}>
|
||||
<Controls PlayerName={PlayerName} Live={Live}>
|
||||
<button id="open-zorn-settings-button" onclick="OpenZornMenu()"><Settings/></button>
|
||||
<slot/>
|
||||
</Controls>
|
||||
:
|
||||
<Controls Live={Live}/>
|
||||
<Controls PlayerName={PlayerName} Live={Live}/>
|
||||
}
|
||||
<Controller/>
|
||||
<Seek/>
|
||||
<Controller PlayerName={PlayerName}/>
|
||||
<Seek PlayerName={PlayerName}/>
|
||||
</div>
|
||||
|
||||
<!-- Needs control the correct source -->
|
||||
{Audio ?
|
||||
<script is:inline>
|
||||
var ZornAudioSource = document.querySelector('.video-container audio')
|
||||
var VolumeRange = document.querySelector('.vc-volume-controller-input input')
|
||||
<script define:vars={{PlayerName}}>
|
||||
var ZornAudioSource = document.querySelector('#zorn-player-' + PlayerName + ' audio')
|
||||
var VolumeRange = document.querySelector('#zorn-player-' + PlayerName + ' .vc-volume-controller-input input')
|
||||
VolumeRange.addEventListener("input", (event) => {ZornAudioSource.volume = event.target.value})
|
||||
</script>
|
||||
:
|
||||
<script is:inline>
|
||||
var Player = document.querySelector('.video-container video')
|
||||
var VolumeRange = document.querySelector('.vc-volume-controller-input input')
|
||||
<script define:vars={{PlayerName}}>
|
||||
var Player = document.querySelector('#zorn-player-' + PlayerName + ' video')
|
||||
var VolumeRange = document.querySelector('#zorn-player-' + PlayerName + ' .vc-volume-controller-input input')
|
||||
VolumeRange.addEventListener("input", (event) => {Player.volume = event.target.value})
|
||||
</script>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<a href="/with-separate-audio">Separated Audio</a>
|
||||
<a href="/live">Live Stream</a>
|
||||
<a href="/milieu">Milieu Effect</a>
|
||||
<a href="/multi">Multiple Instances</a>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import {
|
|||
<meta charset="utf-8">
|
||||
|
||||
<Zorn
|
||||
PlayerName="nameit_whatever_you_want"
|
||||
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"
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ 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
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import {
|
|||
<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"
|
||||
|
|
|
|||
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>
|
||||
|
|
@ -6,6 +6,7 @@ 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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue