97 lines
2.1 KiB
Vue
97 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
src: string;
|
|
ariaLabel: string;
|
|
poster?: string | null;
|
|
registerVideo: (el: Element | null) => void;
|
|
}>();
|
|
|
|
const videoEl = ref<HTMLVideoElement | null>(null);
|
|
const isMuted = ref(true);
|
|
|
|
function setVideoRef(el: Element | null) {
|
|
videoEl.value = el as HTMLVideoElement | null;
|
|
props.registerVideo(el);
|
|
}
|
|
|
|
function toggleMute() {
|
|
if (!videoEl.value) return;
|
|
videoEl.value.muted = !videoEl.value.muted;
|
|
isMuted.value = videoEl.value.muted;
|
|
}
|
|
|
|
function togglePlay() {
|
|
if (!videoEl.value) return;
|
|
if (videoEl.value.paused) {
|
|
videoEl.value.play().catch(() => {});
|
|
} else {
|
|
videoEl.value.pause();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="post-video">
|
|
<video
|
|
:ref="setVideoRef"
|
|
:src="src"
|
|
:aria-label="ariaLabel"
|
|
:poster="poster ?? undefined"
|
|
autoplay
|
|
muted
|
|
preload="metadata"
|
|
playsinline
|
|
class="post-video__el"
|
|
@click="togglePlay"
|
|
>
|
|
Your browser doesn't support video playback.
|
|
</video>
|
|
|
|
<button
|
|
type="button"
|
|
class="post-video__mute"
|
|
:aria-label="isMuted ? 'Unmute video' : 'Mute video'"
|
|
@click.stop="toggleMute"
|
|
>
|
|
<v-icon :icon="isMuted ? 'mdi-volume-off' : 'mdi-volume-high'" size="16" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.post-video {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.post-video__el {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 600px;
|
|
object-fit: contain;
|
|
background: #000;
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
.post-video__mute {
|
|
position: absolute;
|
|
bottom: 0.6rem;
|
|
right: 0.6rem;
|
|
width: 1.8rem;
|
|
height: 1.8rem;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
border: none;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
}
|
|
.post-video__mute:hover {
|
|
background: rgba(0, 0, 0, 0.75);
|
|
}
|
|
</style>
|