update docs

Vinlic · Nov 25, 2023 · a50e923 · a50e923
1 parent 8f29650
commit a50e923
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 2 deletions.
diff --git a/README.en-US.md b/README.en-US.md
@@ -659,6 +659,39 @@ const video = wvc.createSingleVideo({
 });
 ```
 
+## Using Action Sequences
+
+WVC allows you to set actions to be executed at specific time points within a video. This feature enables convenient manipulation of a page at arbitrary intervals within a video. The following code is used to perform scrolling at the 3rd, 6th, and 9th seconds of the video.
+
+```javascript
+const actionFn = async (page) => {
+    const _page = page.target;
+    await _page.evaluate(() => {
+        window.scrollTo({
+            top: window.scrollY + 1280,
+            behavior: "smooth"
+        });
+    });
+};
+const video = wvc.createSingleVideo({
+    width: 1080,
+    height: 1280,
+    fps: 60,
+    outputPath: "./t2.mp4",
+    showProgress: true,
+    url: "https://www.bilibili.com/v/popular/all/?spm_id_from=333.1007.0.0",
+    // Setting up the action sequence
+    timeActions: {
+        3000: actionFn,
+        6000: actionFn,
+        9000: actionFn
+    },
+    autostartRender: true,
+    consoleLog: true,
+    duration: 10000
+});
+```
+
 ## Page Console Output
 
 If you want to see the page's logs, you can enable `consoleLog` in the video options. If there are embedded videos, you can also enable `videoPreprocessLog` to output video preprocessing logs.

diff --git a/README.md b/README.md
@@ -643,6 +643,8 @@ const video = wvc.createSingleVideo({
 
 ## 启动渲染前操作页面
 
+WVC允许在渲染前您对页面进行处理，比如点击播放按钮。
+
 ```javascript
 const video = wvc.createSingleVideo({
     url: "http://localhost:8080/test.html",
@@ -658,6 +660,39 @@ const video = wvc.createSingleVideo({
 });
 ```
 
+## 使用动作序列
+
+WVC支持您设置某个时间点执行的动作，它可以方便的在视频的任意时间点对页面进行操作，以下代码用于在视频的第3、6、9秒处执行滚动。
+
+```javascript
+const actionFn = async (page) => {
+    const _page = page.target;
+    await _page.evaluate(() => {
+        window.scrollTo({
+            top: window.scrollY + 1280,
+            behavior: "smooth"
+        });
+    });
+};
+const video = wvc.createSingleVideo({
+    width: 1080,
+    height: 1280,
+    fps: 60,
+    outputPath: "./t2.mp4",
+    showProgress: true,
+    url: "https://www.bilibili.com/v/popular/all/?spm_id_from=333.1007.0.0",
+    // 设置动作序列
+    timeActions: {
+        3000: actionFn,
+        6000: actionFn,
+        9000: actionFn
+    },
+    autostartRender: true,
+    consoleLog: true,
+    duration: 10000
+});
+```
+
 ## 页面控制台输出
 
 如果想看到页面的日志，可在视频选项中开启consoleLog。开启videoPreprocessLog将输出内嵌视频预处理日志。

diff --git a/core/Page.js b/core/Page.js
@@ -564,11 +564,11 @@ export default class Page extends EventEmitter {
             .map(Number)
             .sort()
             .filter(time => currentTime >= time)
-            .shift()
+            .shift();
         const timeAction = this.timeActions[matchTimeNodes]
         timeAction && await timeAction(this)
             .catch(err => this.#emitError(err))
-            .finally(() => delete this.timeActions[matchTimeNodes])
+            .finally(() => delete this.timeActions[matchTimeNodes]);
     }
 
     /**

diff --git a/docs/api-reference-high-level.md b/docs/api-reference-high-level.md
@@ -738,6 +738,11 @@
             <td>Function</td>
             <td>页面预处理函数，可以在渲染之前对Page对象操作</td>
         </tr>
+        <tr>
+            <td>timeActions</td>
+            <td>Object{[key: Number]: Function}</td>
+            <td>事件序列，可以在渲染过程中对Page对象操作，key 为 Number 指定某个渲染时刻触发</td>
+        </tr>
         <tr>
             <td>showProgress</td>
             <td>boolean</td>