通過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 UI 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", // 容器IDapi: {appId: "your-app-id", // 您的應用IDgetSignature: createSignature // 簽名函數},options: {defaultActiveTab: "outline", // 默認顯示標簽: outline | qashowIntroduction: 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 查看效果
