feat(SlidevVideo): add pause segments control

docs/builtin/components.md

@@ -335,6 +335,10 @@ Props:
   - The starting time of the video in seconds.
 - `printTimestamp` (`string | number | 'last' | undefined`, default: `undefined`):
   - The override for `timestamp` when printing.
+- `pause` (`(number | 'end')[] | undefined`, default: `undefined`):
+  - Control video playback in segments. Each number is the duration in seconds for that segment.
+  - Use `'end'` to play until the end. Click the video to play the next segment.
+  - Example: `:pause="[3, 5, 2, 'end']"` plays 3s → pause → 5s → pause → 2s → pause → end.
 
 ::: warning
 When exporting, the video may fail to load because Chromium does not support some video formats. In this case, you can specify the executable path of the browser. See [Chromium executable path](/guide/exporting.html#executable-path) for more information.

packages/client/builtin/SlidevVideo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { and } from '@vueuse/math'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useNav } from '../composables/useNav'
 import { useSlideContext } from '../context'
 import { resolvedClickMap } from '../modules/v-click'
@@ -13,6 +13,7 @@ const props = defineProps<{
   timestamp?: string | number
   printTimestamp?: string | number | 'last'
   controls?: boolean
+  pause?: (number | 'end')[]
 }>()
 
 const printPoster = computed(() => props.printPoster ?? props.poster)
@@ -26,6 +27,77 @@ const noPlay = computed(() => isPrintMode.value || !['slide', 'presenter'].inclu
 const video = ref<HTMLMediaElement>()
 const played = ref(false)
 
+const currentInterval = ref<any>(null)
+const pauseTimestamps = computed(() => {
+  if (!props.pause || props.pause.length === 0)
+    return null
+
+  const segments: (number | 'end')[] = [0]
+  for (const segment of props.pause) {
+    const last = segments[segments.length - 1]
+    if (segment === 'end') {
+      segments.push('end')
+    }
+    else {
+      const lastNum = typeof last === 'number' ? last : 0
+      segments.push(lastNum + segment)
+    }
+  }
+  return segments
+})
+
+const pauseIndex = ref(1)
+const userTriggeredPlay = ref(false)
+
+function playNextSegment() {
+  if (!pauseTimestamps.value || !video.value) {
+    video.value?.play()
+    return
+  }
+
+  const from = pauseTimestamps.value[pauseIndex.value - 1]
+  const to = pauseTimestamps.value[pauseIndex.value]
+
+  if (from == null || to == null)
+    return
+
+  if (typeof from === 'number')
+    video.value.currentTime = from
+
+  userTriggeredPlay.value = false
+  video.value.play()
+
+  if (to === 'end') {
+    pauseIndex.value++
+    return
+  }
+
+  if (currentInterval.value)
+    clearInterval(currentInterval.value)
+
+  currentInterval.value = setInterval(() => {
+    if (!video.value)
+      return
+    if (video.value.currentTime >= to) {
+      video.value.pause()
+      clearInterval(currentInterval.value)
+      pauseIndex.value++
+    }
+  }, 100)
+}
+
+function onPlay() {
+  played.value = true
+
+  if (pauseTimestamps.value && userTriggeredPlay.value && video.value) {
+    userTriggeredPlay.value = false
+    video.value.pause()
+    setTimeout(() => {
+      playNextSegment()
+    }, 0)
+  }
+}
+
 onMounted(() => {
   if (noPlay.value)
     return
@@ -39,17 +111,34 @@ onMounted(() => {
 
   watch(matchRouteAndClick, () => {
     if (matchRouteAndClick.value) {
-      if (props.autoplay === true || (props.autoplay === 'once' && !played.value))
-        video.value!.play()
+      if (props.autoplay === true || (props.autoplay === 'once' && !played.value)) {
+        if (pauseTimestamps.value) {
+          userTriggeredPlay.value = false
+          playNextSegment()
+        }
+        else {
+          video.value!.play()
+        }
+      }
     }
     else {
       video.value!.pause()
-      if (props.autoreset === 'click' || (props.autoreset === 'slide' && !matchRoute.value))
+      if (currentInterval.value)
+        clearInterval(currentInterval.value)
+      if (props.autoreset === 'click' || (props.autoreset === 'slide' && !matchRoute.value)) {
         video.value!.currentTime = timestamp
+        pauseIndex.value = 1
+        userTriggeredPlay.value = false
+      }
     }
   }, { immediate: true })
 })
 
+onBeforeUnmount(() => {
+  if (currentInterval.value)
+    clearInterval(currentInterval.value)
+})
+
 function onLoadedMetadata(ev: Event) {
   // The video may be loaded before component mounted
   const element = ev.target as HTMLMediaElement
@@ -66,8 +155,9 @@ function onLoadedMetadata(ev: Event) {
     ref="video"
     :poster="noPlay ? printPoster : props.poster"
     :controls="!noPlay && props.controls"
-    @play="played = true"
+    @play="onPlay"
     @loadedmetadata="onLoadedMetadata"
+    @click="pauseTimestamps ? userTriggeredPlay = true : null"
   >
     <slot />
   </video>