74 lines
1.5 KiB
Vue
74 lines
1.5 KiB
Vue
<template>
|
|
<div class="stage">
|
|
<video
|
|
ref="videoEl"
|
|
class="video"
|
|
src="/caramelldansen.webm"
|
|
autoplay
|
|
loop
|
|
playsinline
|
|
preload="auto"
|
|
muted
|
|
/>
|
|
|
|
<div class="controls">
|
|
<button
|
|
class="audio-toggle"
|
|
:aria-label="muted ? 'Unmute video' : 'Mute video'"
|
|
@click="toggleMute"
|
|
>
|
|
{{ muted || volume === 0 ? '🔇' : '🔊' }}
|
|
</button>
|
|
|
|
<input
|
|
v-model.number="volume"
|
|
class="volume"
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
aria-label="Volume"
|
|
/>
|
|
</div>
|
|
|
|
<div class="brand">gimme.pet</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch, onMounted } from 'vue'
|
|
|
|
const videoEl = ref<HTMLVideoElement | null>(null)
|
|
const muted = ref(true)
|
|
const volume = ref(0.8)
|
|
|
|
// Browsers only allow autoplay while muted, so we start muted and let the
|
|
// first user gesture turn the sound on.
|
|
function toggleMute() {
|
|
muted.value = !muted.value
|
|
|
|
if (!muted.value) {
|
|
if (volume.value === 0) volume.value = 0.8
|
|
videoEl.value?.play().catch(() => {})
|
|
}
|
|
}
|
|
|
|
watch([muted, volume], ([isMuted, vol]) => {
|
|
if (!videoEl.value) return
|
|
videoEl.value.muted = isMuted
|
|
videoEl.value.volume = vol
|
|
})
|
|
|
|
watch(volume, (vol, prev) => {
|
|
if (vol > 0 && prev === 0) muted.value = false
|
|
if (vol === 0) muted.value = true
|
|
})
|
|
|
|
onMounted(() => {
|
|
if (!videoEl.value) return
|
|
videoEl.value.muted = muted.value
|
|
videoEl.value.volume = volume.value
|
|
videoEl.value.play().catch(() => {})
|
|
})
|
|
</script>
|