# 故事板

故事板是 视频转可玩 的**核心区域**，用于构建和管理单线或多线程互动视频的逻辑结构。通过故事板，您可以：

* 创建和管理多个场景(视频节点与结束页)；
* 添加互动元件如互动定格、互动循环或自动跳转，实现场景之间的跳转逻辑；
* 设计单分支或多分支的互动流程，满足复杂互动视频的制作需求

<figure><img src="/files/8fDeg0rldN8VLneGq5Fh" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">一、故事板使用说明</mark>

使用故事板搭建互动视频的框架，可主要分为三步：搭建脚本结构、添加视频与结束页、设置跳转逻辑

### 1.搭建脚本结构

#### 1）添加节点（视频与结束页）

* 打开互动视频编辑页，进入故事板区域
* 默认情况下，故事板会有一个初始视频节点。您可以直接开始编辑该节点，或者根据需要添加更多节点
* **添加新视频节点**：
  * 点击视频节点的“+”按钮，可在当前节点下新增下一级节点
  * 支持快捷键：Enter——增加同级别节点；Tab：增加下一级节点
  * 点击“+结束页”按钮，可在当前节点下新增一个Endcard

<figure><img src="/files/5p2yj7hs2BrSQtYFGu9a" alt=""><figcaption></figcaption></figure>

#### 2）编辑与管理节点（视频与结束页）

* 初始视频节点支持复制、粘贴，不支持删除；
* 新增的视频节点/结束页支持复制、粘贴、删除；
* <mark style="color:red;">需注意：若删除高层级的节点，与该节点相关的低层级节点会被一同删除</mark>
* 若互动流程为多分支，故事板将展示序号为"1""2"或更多数字的连线关系。点击任一节点，可查看当前节点所在的完整视频流程

<div align="left"><figure><img src="/files/yNyF6eyy7O71vDRfldIB" alt=""><figcaption></figcaption></figure></div>

### 2.添加视频与结束页

当脚本结构搭建完成，即可往对应节点内上传视频，并设置节点间的跳转逻辑

#### 1）上传视频

* 在故事板中，您可以通过以下方式上传视频：
  * 从本地上传
  * 从库里上传：从“我的资产库”选择以往视频
* 将视频上传到“项目视频”，然后添加视频到具体的节点内
* 视频上传要求：MP4，<3M

<div align="left"><figure><img src="/files/JqZHjIqcf0dEhM7VVyXQ" alt=""><figcaption></figcaption></figure></div>

#### 2）设置结束页

* 您可以在故事板中为某个视频节点添加Endcard，作为该场景的结束页
* 结束页作为视频的结尾仅支持连入，不支持连出，即不支持在结束页之后再添加视频节点
* 结束页默认包含产品Icon、产品名称、CTA按钮、背景遮罩这四个元素，可根据实际需要进行调整

<figure><img src="/files/Ot3sRshaE29ShnTKdgqR" alt=""><figcaption></figcaption></figure>

### 3.设置节点间的互动元件

在故事板中，您可以为视频节点之间添加互动元件，定义视频的播放顺序和跳转逻辑

* 节点间的跳转方式可分为“自动跳转”和“互动跳转”
  * **自动跳转**：播放完当前视频后，自动跳转到下一个视频
  * 互动跳转：播放完当前视频后，需要用户进行交互才能跳转到下一个视频

***

* 互动跳转方式支持“互动定格”或“互动循环”（节点间的互动不支持“长按播放”）
  * **互动定格**：添加在视频最后一帧，用户需进行交互（如按下或滑动）后继续播放
  * **互动循环**：默认添加在整段视频上，视频会在该元件时间段内循环播放，直到用户进行交互
* 选择后，还需在右侧参数区设置互动热区和手势(事件)，用户在不同热区的操作会决定跳转到不同的视频场景（参数设置的详细说明可跳转查阅【轨道区】👉 [/pages/62Aph04DhP3b6VZe0Oic#id-4.-tian-jia-he-bian-ji-hu-dong-yuan-jian](https://doc.playturbo.cn/ke-wan-gong-ju-shi-pin-zhuan-ke-wan/shi-pin-zhuan-ke-wan-shi-yong-zhi-nan/pages/62Aph04DhP3b6VZe0Oic#id-4.-tian-jia-he-bian-ji-hu-dong-yuan-jian "mention")）
* <mark style="color:red;">在故事板的互动元件下，右键展开可快速切换互动类型</mark>

<div><figure><img src="/files/AYrhTGuXKGKo0xf9AXSK" alt="" width="352"><figcaption></figcaption></figure> <figure><img src="/files/lXOboxa6EkOWefMv6Lsq" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">二、包体预估</mark>

关于【包体预估】功能的介绍，同自由编辑器，可直接跳转查阅👉 [包体预估](/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/bian-ji-ye-mian-fen-qu-jie-shao/zuo-pin-yu-lan-qu/bao-ti-yu-gu.md)

<div align="left"><figure><img src="/files/yWlBGTBCR8YSFq2T5L0c" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.playturbo.cn/ke-wan-gong-ju-shi-pin-zhuan-ke-wan/shi-pin-zhuan-ke-wan-shi-yong-zhi-nan/gu-shi-ban.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.