gimme-pet-root/site/pages/index.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>