Skip to content

Commit e61afc0

Browse files
booxing1999booxing1999
committed
docs: add SlidevVideo controlled playback demo
1 parent 20e45cf commit e61afc0

File tree

6 files changed

+318
-153
lines changed

6 files changed

+318
-153
lines changed

‎README.md‎

Lines changed: 90 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,103 @@
1-
# 🎬 SlidevVideo Playback Demo
2-
3-
A simple demo showcasing **multi-step controlled video playback** using `pause` prop.
4-
5-
透過 `pause` 參數控制影片分段播放，支援數值與 `'end'`，可用於教學投影片互動控制。
6-
7-
---
8-
9-
## 🚀 How to Run
1+
<br>
2+
<p align="center">
3+
<a href="https://sli.dev" target="_blank">
4+
<img src="https://sli.dev/logo-title.png" alt="Slidev" height="250" width="250"/>
5+
</a>
6+
</p>
7+
8+
<p align="center">
9+
Presentation <b>slide</b>s for <b>dev</b>elopers 🧑‍💻👩‍💻👨‍💻
10+
</p>
11+
12+
<p align="center">
13+
<a href="https://www.npmjs.com/package/@slidev/cli" target="__blank"><img src="https://img.shields.io/npm/v/@slidev/cli?color=2B90B6&label=" alt="NPM version"></a>
14+
<a href="https://www.npmjs.com/package/@slidev/cli" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@slidev/cli?color=349dbe&label="></a>
15+
<a href="https://sli.dev/" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=45b8cd" alt="Docs & Demos"></a>
16+
<a href="https://sli.dev/resources/theme-gallery" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=themes&color=4ec5d4" alt="Themes"></a>
17+
<br>
18+
<a href="https://github.com/slidevjs/slidev" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/slidevjs/slidev?style=social"></a>
19+
</p>
20+
21+
<p align="center">
22+
<a href="https://twitter.com/antfu7/status/1389604687502995457">Video Preview</a> | <a href="https://sli.dev">Documentation</a>
23+
</p>
24+
25+
<div align="center">
26+
<table>
27+
<tbody>
28+
<td align="center">
29+
<img width="2000" height="0" alt="" aria-hidden><br>
30+
<sub>Made possible by my <a href="https://github.com/sponsors/antfu">Sponsor Program 💖</a></sub><br>
31+
<img width="2000" height="0" alt="" aria-hidden>
32+
</td>
33+
</tbody>
34+
</table>
35+
</div>
36+
37+
## Features
38+
39+
- 📝 [**Markdown-based**](https://sli.dev/guide/syntax) - focus on content and use your favorite editor
40+
- 🧑‍💻 [**Developer Friendly**](https://sli.dev/guide/syntax#code-blocks) - built-in code highlighting, live coding, etc.
41+
- 🎨 [**Themable**](https://sli.dev/resources/theme-gallery) - theme can be shared and used with npm packages
42+
- 🌈 [**Stylish**](https://sli.dev/guide/syntax#embedded-styles) - on-demand utilities via [UnoCSS](https://github.com/unocss/unocss).
43+
- 🤹 [**Interactive**](https://sli.dev/custom/directory-structure#components) - embedding Vue components seamlessly
44+
- 🎙 [**Presenter Mode**](https://sli.dev/guide/ui#presenter-mode) - use another window, or even your phone to control your slides
45+
- 🎨 [**Drawing**](https://sli.dev/features/drawing) - draw and annotate on your slides
46+
- 🧮 [**LaTeX**](https://sli.dev/features/latex) - built-in LaTeX math equations support
47+
- 📰 [**Diagrams**](https://sli.dev/guide/syntax#diagrams) - creates diagrams using textual descriptions with [Mermaid](https://mermaid.js.org/)
48+
- 🌟 [**Icons**](https://sli.dev/features/icons) - access to icons from any icon set directly
49+
- 💻 [**Editor**](https://sli.dev/guide/index#editor) - integrated editor, or the [VSCode extension](https://sli.dev/features/vscode-extension)
50+
- 🎥 [**Recording**](https://sli.dev/features/recording) - built-in recording and camera view
51+
- 📤 [**Portable**](https://sli.dev/guide/exporting) - export into PDF, PNGs, or PPTX
52+
- ⚡️ [**Fast**](https://vitejs.dev) - instant reloading powered by [Vite](https://vitejs.dev)
53+
- 🛠 [**Hackable**](https://sli.dev/custom/) - using Vite plugins, Vue components, or any npm packages
54+
55+
## Getting Started
56+
57+
### Try it Online ⚡️
58+
59+
[sli.dev/new](https://sli.dev/new)
60+
61+
[![](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://sli.dev/new)
62+
63+
### Init Project Locally
64+
65+
Install [Node.js >=18](https://nodejs.org/) and run the following command:
1066

1167
```bash
12-
pnpm install
13-
pnpm dev
68+
npm init slidev
1469
```
1570

16-
Then open [http://localhost:3030](http://localhost:3030)
17-
18-
---
71+
Documentation:
72+
**[English](https://sli.dev)** | [中文文档](https://cn.sli.dev) | [Français](https://fr.sli.dev) | [Español](https://es.sli.dev) | [Русский](https://ru.sli.dev) | [Português-BR](https://br.sli.dev)
1973

20-
## 🌐 Slide Demos | 投影片展示
74+
Discord: [chat.sli.dev](https://chat.sli.dev)
2175

22-
- 👉 [Home Page](/dev.md)
76+
For a full example, you can check the [demo](https://github.com/slidevjs/slidev/blob/main/demo) folder, which is also the source file for [my previous talk](https://antfu.me/posts/composable-vue-vueday-2021).
2377

24-
---
78+
## Tech Stack
2579

26-
## 💡 Example
80+
- [Vite](https://vitejs.dev) - An extremely fast frontend tooling
81+
- [Vue 3](https://v3.vuejs.org/) powered [Markdown](https://daringfireball.net/projects/markdown/syntax) - Focus on the content while having the power of HTML and Vue components whenever needed
82+
- [UnoCSS](https://github.com/unocss/unocss) - On-demand utility-first CSS engine, style your slides at ease
83+
- [Shiki](https://github.com/shikijs/shiki), [Monaco Editor](https://github.com/Microsoft/monaco-editor) - First-class code snippets support with live coding capability
84+
- [RecordRTC](https://recordrtc.org) - Built-in recording and camera view
85+
- [VueUse](https://vueuse.org) family - [`@vueuse/core`](https://github.com/vueuse/vueuse), [`@vueuse/motion`](https://github.com/vueuse/motion), etc.
86+
- [Iconify](https://iconify.design/) - Icon sets collection.
87+
- [Drauu](https://github.com/antfu/drauu) - Drawing and annotations support
88+
- [KaTeX](https://katex.org/) - LaTeX math rendering.
89+
- [Mermaid](https://mermaid-js.github.io/mermaid) - Textual Diagrams.
2790

28-
```vue
29-
<SlidevVideo :pause="[3.5, 2.5, 3]" controls>
30-
<source src="https://www.w3schools.com/html/mov_bbb.mp4" />
31-
</SlidevVideo>
32-
```
33-
34-
Will play **3.5s**, then pause, then **2.5s**, then pause, then **3s**, then pause, then end.
91+
## Sponsors
3592

36-
---
93+
This project is made possible by all the sponsors supporting my work:
3794

38-
## 🧩 Credit
95+
<p align="center">
96+
<a href="https://github.com/sponsors/antfu">
97+
<img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg' alt="Logos from Sponsors" />
98+
</a>
99+
</p>
39100

40-
Based on [`Slidev`](https://github.com/slidevjs/slidev), with custom `SlidevVideo` component.
101+
## License
41102

42-
```
43-
44-
```
103+
MIT License © 2021 [Anthony Fu](https://github.com/antfu)

‎dev.md‎

Lines changed: 0 additions & 88 deletions
This file was deleted.

‎docs/guide/video-playback.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# SlidevVideo Controlled Playback
2+
3+
This demo shows how to use the `pause` prop on `<SlidevVideo>` to control playback in steps.
4+
5+
## Example
6+
7+
```vue
8+
<SlidevVideo src="/videos/demo.mp4" :pause="[1, 2, 3, 'end']" />
9+
```
10+
11+
The video will:
12+
13+
1. Pause at **1s**
14+
2. Pause at **2s**
15+
3. Pause at **3s**
16+
4. Pause at the **end**
17+
18+
## Usage
19+
20+
Use `pause` to sync video playback with your slide steps or narration.
21+
22+
```vue
23+
<SlidevVideo src="/videos/pipeline.mp4" :pause="[3, 6, 10, 'end']" />
24+
```

‎packages/client/setup/main.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,28 @@ import type { App } from 'vue'
33
import setups from '#slidev/setups/main'
44
import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
55
import { createHead } from '@unhead/vue/client'
6-
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
6+
import {
7+
createRouter,
8+
createWebHashHistory,
9+
createWebHistory,
10+
} from 'vue-router'
711
import { createVClickDirectives } from '../modules/v-click'
812
import { createVDragDirective } from '../modules/v-drag'
913
import { createVMarkDirective } from '../modules/v-mark'
1014
import { createVMotionDirectives } from '../modules/v-motion'
1115
import setupRoutes from '../setup/routes'
16+
import 'video.js/dist/video-js.css'
1217

1318
import '#slidev/styles'
1419

1520
export default async function setupMain(app: App) {
1621
function setMaxHeight() {
1722
// disable the mobile navbar scroll
1823
// see https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
19-
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
24+
document.documentElement.style.setProperty(
25+
'--vh',
26+
`${window.innerHeight * 0.01}px`,
27+
)
2028
}
2129
setMaxHeight()
2230
window.addEventListener('resize', setMaxHeight)
@@ -41,6 +49,5 @@ export default async function setupMain(app: App) {
4149
router,
4250
}
4351

44-
for (const setup of setups)
45-
await setup(context)
52+
for (const setup of setups) await setup(context)
4653
}

‎playground/slides.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# 測試 SlidevVideo
2+
3+
<SlidevVideo :pause="[1,2,3,'end']" controls>
4+
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
5+
</SlidevVideo>

0 commit comments

Comments
 (0)