click to time

docs/.vitepress/theme/components/Video.vue

@@ -0,0 +1,50 @@
+<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: 750px;
+  overflow: visible;
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  z-index: 100;
+}
+</style>