通过AI技术将视频课程自动生成结构化大纲和摘要，支持PPT教学视频、企业内训等场景应用。核心功能包括：自动匹配视频知识点生成文本大纲、快速内容定位、降低课程制作成本。系统采用模块化架构，包含Vue2.7前端组件、JS逻辑库和演示项目，支持UMD格式快速集成。主要特点：1）提供完整的API接入方案；2）支持签名验证和缓存机制；3）包含错误回调等完善的事件处理。项目已在GitHub开源，适用于在线教育平台、知识付费等需要提升视频学习效率的场景。
- 应用场景： 在线教育平台课程教学、企业内训、知识付费平台。
- 实际应用： 将PPT教学视频、课程教学视频，通过AI工具自动生成大纲和摘要，学员快速浏览摘要内容也可以随时点击对应的内容，进行观看。AI可以自动匹配知识点对应的视频内容，生成对应的文本大纲。
- 功能应用价值： 降低课程制作门槛和成本，加速知识传播，使教育内容更加触手可及。
效果图上图：
AI智能大纲（注意右侧为自动生成的内容大纲）
AI智能大纲（注意右侧为自动生成的内容大纲）
Github项目地址：https://github.com/renoanzhou/polyv-web-vod-outline-demo
VOD AI Outline Monorepo
polyv 点播web端AI大纲功能demo，包含三个子项目：
项目结构
vod-ai-outline/
├── packages/
│ ├── vod-ai-outline-ui/ # Vue 2.7 + Vite UI组件
│ ├── vod-ai-outline-logic/ # 纯JS逻辑包
│ └── vod-ai-outline-demo/ # 演示项目
├── package.json
├── pnpm-workspace.yaml
└── README.md子项目
@polyv/vod-ai-outline-ui
- 基于 Vue 2.7 + Vite 的前端UI组件库
- 位置:
packages/vod-ai-outline-ui/
@polyv/vod-ai-outline-logic
- 纯JavaScript逻辑库，使用 Vite 构建和打包
- 位置:
packages/vod-ai-outline-logic/
vod-ai-outline-demo
- 演示项目，展示如何集成和使用智能大纲组件
- 位置:
packages/vod-ai-outline-demo/
开发指令
# 安装所有依赖
pnpm install
# 启动所有开发服务器
pnpm dev
# 构建所有项目
pnpm build
# 清理所有构建产物
pnpm clean
# 代码检查
pnpm lint
# 🚀 Release构建（推荐）
pnpm run release # 执行完整的release构建
pnpm run release:build # 仅构建项目
pnpm run release:copy # 仅复制构建产物工作流程
- 在根目录运行
pnpm install安装所有依赖 - 使用
pnpm dev启动开发环境 - 在各个子项目目录中进行开发
- 使用
pnpm build构建所有项目
要求
- Node.js >= 16.0.0
- pnpm >= 8.0.0
AI智能大纲（注意右侧为自动生成的内容大纲）
接入指南
VOD AI Outline 提供两种接入方式，您可以根据项目需求选择合适的方案：
方式一：通过构建产物接入（推荐）
快速开始
参考 vod-ai-outline-demo 项目，通过引入构建产物快速集成智能大纲功能。
1. 获取构建文件
首先构建UI组件库：
cd packages/vod-ai-outline-ui
pnpm run build:lib构建完成后，将在 dist/ 目录下生成以下文件：
index.umd.js- UMD格式的JavaScript文件style.css- 组件样式文件
2. 引入文件
在您的HTML页面中引入构建文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>VOD AI Outline</title>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="./dist/style.css">
</head>
<body>
<!-- 智能大纲容器 -->
<div id="vod-ai-outline-container"></div>
<!-- 引入JavaScript文件 -->
<script src="./dist/index.umd.js"></script>
<script>
// 您的初始化代码
</script>
</body>
</html>3. 初始化智能大纲
// 签名函数（生产环境必须通过接口获取）
async function createSignature(params) {
const response = await fetch('/api/getSign', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ params })
});
const result = await response.json();
return result.data.signature;
}
// 初始化配置
const config = {
containerId: "vod-ai-outline-container", // 容器ID
api: {
appId: "your-app-id", // 您的应用ID
getSignature: createSignature // 签名函数
},
options: {
defaultActiveTab: "outline", // 默认显示标签: outline | qa
showIntroduction: true // 是否显示视频介绍
},
callbacks: {
onError: (error) => {
console.error("组件错误:", error);
},
onTabChange: (tab) => {
console.log("切换到标签:", tab);
},
onTimeClick: (time) => {
console.log("点击时间:", time);
// 在此处实现视频跳转逻辑
// player.seekTo(timeStringToSeconds(time));
}
}
};
// 初始化智能大纲
async function initOutline() {
try {
const outlineInstance = await VodAiOutline.init(config);
// 加载视频数据
await outlineInstance.loadVideoData("your-video-id", {
useCache: false,
questionsSize: 5
});
console.log("智能大纲初始化成功");
} catch (error) {
console.error("初始化失败:", error);
}
}
// 页面加载完成后初始化
window.addEventListener('load', initOutline);4. 快捷API
组件还提供了一些快捷API方法：
// 通过ID选择器快速创建
VodAiOutline.createById("container-id", apiConfig, getSignature, options);
// 通过Class选择器快速创建
VodAiOutline.createByClass("container-class", apiConfig, getSignature, options);
// 销毁实例
VodAiOutline.destroy(instanceId);
// 销毁所有实例
VodAiOutline.destroyAll();5. 完整示例
参考 packages/vod-ai-outline-demo/ 目录下的完整示例：
# 启动demo
cd packages/vod-ai-outline-demo
npm start
# 访问 http://localhost:8083 查看效果