feat: add pause-by-duration control for SlidevVideo #2236
+317
−86
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,103 +1,40 @@ | ||
| # 🎬 SlidevVideo Playback Demo | ||
|
|
||
| A simple demo showcasing **multi-step controlled video playback** using `pause` prop. | ||
|
|
||
| 透過 `pause` 參數控制影片分段播放，支援數值與 `'end'`，可用於教學投影片互動控制。 | ||
|
|
||
| --- | ||
|
|
||
| ## 🚀 How to Run | ||
|
|
||
| ```bash | ||
| pnpm install | ||
| pnpm dev | ||
| ``` | ||
|
|
||
| Then open [http://localhost:3030](http://localhost:3030) | ||
|
|
||
| --- | ||
|
|
||
| ## 🌐 Slide Demos | 投影片展示 | ||
|
|
||
| - 👉 [Home Page](/dev.md) | ||
|
|
||
| --- | ||
|
|
||
| ## 💡 Example | ||
|
|
||
| ```vue | ||
| <SlidevVideo :pause="[3.5, 2.5, 3]" controls> | ||
| <source src="https://www.w3schools.com/html/mov_bbb.mp4" /> | ||
| </SlidevVideo> | ||
| ``` | ||
|
|
||
| Will play **3.5s**, then pause, then **2.5s**, then pause, then **3s**, then pause, then end. | ||
|
|
||
| --- | ||
|
|
||
| ## 🧩 Credit | ||
|
|
||
| Based on [`Slidev`](https://github.com/slidevjs/slidev), with custom `SlidevVideo` component. | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| # 🎬 SlidevVideo Demo | ||
|
|
||
| > A demo for multi-step controlled playback using `pause=[1, 2, 3, 'end']` | ||
| > 使用 `pause=[1, 2, 3, 'end']` 控制多段播放的展示 | ||
|
There was a problem hiding this comment. Could you update the docs instead? And use English, please. Thanks There was a problem hiding this comment. Got it, I’ll move the demo into the docs in English and update the PR soon. |
||
|
|
||
| <br> | ||
| <br> | ||
| <br> | ||
|
|
||
| ### 🌐 Choose Language | 選擇語言 | ||
|
|
||
| <Link to="2">English</Link> | ||
| <br> | ||
| <Link to="6">中文</Link> | ||
|
|
||
| --- | ||
|
|
||
| # SlidevVideo 1.0 Test: Pause with Decimal Durations | ||
|
|
||
| This slide demonstrates the new `pause` feature in `SlidevVideo`: | ||
|
|
||
| - ✅ Supports multiple controlled playback segments | ||
| - ✅ Accepts decimal values for pause durations (e.g., `3.5` seconds) | ||
| - ✅ `'end'` is optional — without it, the last segment will stop naturally | ||
|
|
||
| --- | ||
|
|
||
| ## Playback Test Example | ||
|
|
||
| <SlidevVideo :pause="[3.5, 2.5, 3]" controls> | ||
| <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> | ||
| </SlidevVideo> | ||
|
|
||
| --- | ||
|
|
||
| ### ⏱️ Expected Playback Flow | ||
|
|
||
| 1. First click: plays 3.5 seconds, then auto-pauses | ||
| 2. Second click: plays 2.5 seconds, then auto-pauses | ||
| 3. Third click: plays 3 seconds, then auto-pauses | ||
| 4. Fourth click: continues playing until the video ends | ||
|
|
||
| --- | ||
|
|
||
| ### Notes | ||
|
|
||
| - `'end'` is optional — if omitted, the last segment just ends playback naturally | ||
| - To force a final uninterrupted play-to-end segment, append `'end'` manually: | ||
| ```html | ||
| <SlidevVideo :pause="[3.5, 2.5, 3, 'end']"></SlidevVideo> | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| # 測試 SlidevVideo 1.0：Pause 支援小數點時間 | ||
|
|
||
| 這頁展示了 `SlidevVideo` 新增的 `pause` 支援： | ||
|
|
||
| - ✅ 多段播放控制：每點一次播放指定秒數 | ||
| - ✅ 支援小數點秒數（例如 `3.5` 秒） | ||
| - ✅ 可選擇是否加入 `'end'`，若未加則播放到最後自動停止 | ||
|
|
||
| --- | ||
|
|
||
| ## 播放測試範例 | ||
|
|
||
| <SlidevVideo :pause="[3.5, 2.5, 3]" controls> | ||
| <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> | ||
| </SlidevVideo> | ||
|
|
||
| --- | ||
|
|
||
| ### ⏱️ 播放節奏預期 | ||
|
|
||
| 1. 點第一下：播放 3.5 秒後自動暫停 | ||
| 2. 點第二下：播放 2.5 秒後自動暫停 | ||
| 3. 點第三下：播放 3 秒後自動暫停 | ||
| 4. 第四下：會繼續播放到結尾（或結束整段） | ||
|
|
||
| --- | ||
|
|
||
| ### 備註 | ||
|
|
||
| - 可以不必加 `'end'`，預設最後一段播放完就不會卡住 | ||
| - 若要強制到最後自動播放到結尾，可明確加 `'end'`： | ||
| ```html | ||
| <SlidevVideo :pause="[3.5, 2.5, 3, 'end']"></SlidevVideo> | ||
| ``` | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,111 @@ | ||
| <script setup lang="ts"> | ||
| import videojs from 'video.js' | ||
| import { computed, onBeforeUnmount, onMounted, ref } from 'vue' | ||
| import 'video.js/dist/video-js.css' | ||
|
|
||
| const props = defineProps<{ | ||
| pause?: (number | 'end')[] | ||
| poster?: string | ||
| controls?: boolean | ||
| }>() | ||
|
|
||
| const videoRef = ref() | ||
| const player = ref<ReturnType<typeof videojs> | null>(null) | ||
| const currentInterval = ref<any>(null) | ||
|
|
||
| const rawPause = props.pause ?? [] | ||
| const pauseTimestamps = computed(() => { | ||
| const out: (number | 'end')[] = [0] | ||
| for (const segment of rawPause) { | ||
| const last = out[out.length - 1] | ||
| if (segment === 'end') { | ||
| out.push('end') | ||
| } | ||
| else { | ||
| const lastNum = typeof last === 'number' ? last : 0 | ||
| out.push(lastNum + segment) | ||
| } | ||
| } | ||
| return out | ||
| }) | ||
|
|
||
| const pauseIndex = ref(1) | ||
| const isPlaying = ref(false) | ||
|
|
||
| function playNextSegment() { | ||
| const from = pauseTimestamps.value[pauseIndex.value - 1] | ||
| const to = pauseTimestamps.value[pauseIndex.value] | ||
|
|
||
| if (!player.value || from == null || to == null) | ||
| return | ||
|
|
||
| if (typeof from === 'number') { | ||
| player.value.currentTime(from) | ||
| } | ||
|
|
||
| try { | ||
| isPlaying.value = true | ||
| player.value.play() | ||
| } | ||
| catch { | ||
| isPlaying.value = false | ||
| return | ||
| } | ||
|
|
||
| if (to === 'end') { | ||
| pauseIndex.value++ | ||
| return | ||
| } | ||
|
|
||
| if (currentInterval.value) | ||
| clearInterval(currentInterval.value) | ||
|
|
||
| currentInterval.value = setInterval(() => { | ||
| if (!player.value) | ||
| return | ||
| if (player.value.currentTime() >= to) { | ||
| player.value.pause() | ||
| clearInterval(currentInterval.value) | ||
| isPlaying.value = false | ||
| pauseIndex.value++ | ||
| } | ||
| }, 100) | ||
| } | ||
|
|
||
| onMounted(() => { | ||
| player.value = videojs(videoRef.value, { | ||
| controls: props.controls !== false, | ||
| autoplay: false, | ||
| preload: 'auto', | ||
| poster: props.poster, | ||
| }) | ||
|
|
||
| player.value.ready(() => { | ||
| player.value.controls(true) | ||
| player.value.trigger('resize') | ||
| player.value.pause() | ||
| player.value.currentTime(0) | ||
|
|
||
| player.value.on('play', () => { | ||
| if (!isPlaying.value) { | ||
| playNextSegment() | ||
| } | ||
| else { | ||
| player.value?.pause() | ||
| } | ||
| }) | ||
| }) | ||
| }) | ||
|
|
||
| onBeforeUnmount(() => { | ||
| if (currentInterval.value) | ||
| clearInterval(currentInterval.value) | ||
| player.value?.dispose() | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <video ref="videoRef" class="video-js vjs-default-skin" playsinline> | ||
| <slot /> | ||
| </video> | ||
| </template> |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why this file has been changed?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi Anthony, thanks for the feedback!
I thought I was only editing my fork, so I put the demo into the README for quick testing.
Now I understand it should go into the docs and in English.
I’ll move the content into the docs and update the PR. Thanks for pointing it out!