50 lines
1002 B
Vue
50 lines
1002 B
Vue
<template>
|
|
<Teleport to="body">
|
|
<video v-if="videoURL" controls :src="videoURL" ref="video">
|
|
Hello
|
|
</video>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useData } from 'vitepress'
|
|
import { computed, useTemplateRef, watch } from 'vue'
|
|
|
|
const { frontmatter } = useData<{ video?: string }>()
|
|
const videoURL = computed(() => frontmatter.value?.video)
|
|
const videoEl = useTemplateRef("video");
|
|
|
|
function setImgClick(){
|
|
const v = videoEl.value;
|
|
if (!v) {
|
|
return;
|
|
}
|
|
|
|
document.querySelectorAll('img').forEach((img) => {
|
|
const [, min, sec] = /^(\d+)\:(\d+)$/.exec(img.alt) || []
|
|
const t = min && sec ? parseInt(min) * 60 + parseInt(sec) : null
|
|
if (!t) return;
|
|
|
|
img.onclick = () => {
|
|
v.currentTime = t
|
|
}
|
|
})
|
|
}
|
|
|
|
watch(videoURL, () => {
|
|
setImgClick()
|
|
})
|
|
|
|
setTimeout(() => setImgClick(), 500)
|
|
</script>
|
|
|
|
<style scoped>
|
|
video {
|
|
width: 400px;
|
|
overflow: visible;
|
|
position: fixed;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
z-index: 100;
|
|
}
|
|
</style> |