Open Design Video Demo 技能指南

技能概述

Video Demo 技能生成產品演示視頻展示頁面，包含：自定義視頻播放器（帶播放/暫停/進度條/音量控制）、章節時間戳列表、功能要點側欄、自動高亮當前章節。單一 HTML 文件，無外部依賴。視頻源可以是本地文件、MP4 URL 或 YouTube/Vimeo 嵌入。

觸發關鍵字

• video demo、product demo、演示視頻、產品演示
• tutorial video、功能演示、walkthrough

什麼時候用

• 新產品功能演示
• 用戶教程 / onboarding 視頻
• 產品更新日誌視頻展示
• 技術分享錄像

使用方法

實際場景

場景一：SaaS 產品功能演示

你的團隊剛發布了一個新的 AI 分析功能。錄製了一段 3 分鐘的演示視頻，需要一個精美的展示頁面讓用戶了解新功能。視頻分為 4 個章節：功能入口 → 數據導入 → AI 分析 → 結果導出。用戶可以點擊時間戳跳轉到感興趣的部分。

場景二：新員工培訓視頻

HR 製作了 10 分鐘的系統操作培訓視頻，分為 5 個章節。員工可以按章節跳轉學習，每看完一章自動打勾標記進度。

核心實現

<div class="video-demo-page">
  <div class="video-container">
    <video id="demo-video" preload="metadata">
      <source src="demo.mp4" type="video/mp4">
    </video>
    <!-- 自定義控制欄 -->
    <div class="controls">
      <button id="play-btn">▶</button>
      <div class="progress" id="progress-bar">
        <div class="progress-fill" id="progress-fill"></div>
      </div>
      <span id="time">0:00 / 3:00</span>
    </div>
  </div>

  <div class="chapters">
    <h3>章節</h3>
    <ul>
      <li data-time="0" class="chapter active">0:00 功能入口介紹</li>
      <li data-time="30">0:30 數據導入步驟</li>
      <li data-time="90">1:30 AI 分析過程</li>
      <li data-time="150">2:30 結果導出與分享</li>
    </ul>
  </div>
</div>

<script>
const video = document.getElementById('demo-video');
const chapters = document.querySelectorAll('.chapter');

// 自動高亮當前章節
video.addEventListener('timeupdate', () => {
  chapters.forEach(ch => {
    const t = parseInt(ch.dataset.time);
    if (video.currentTime >= t) {
      chapters.forEach(c => c.classList.remove('active'));
      ch.classList.add('active');
    }
  });
});

// 點擊跳轉章節
chapters.forEach(ch => {
  ch.addEventListener('click', () => {
    video.currentTime = parseInt(ch.dataset.time);
    video.play();
  });
});
</script>

樣式要點

.video-container { position: relative; aspect-ratio: 16/9; }
.controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  padding: 1rem; display: flex; align-items: center; gap: 0.75rem;
}
.chapter.active { color: #3b82f6; font-weight: 600; }

推薦閱讀

• HTML5 Video API (MDN)
• Video.js — 開源視頻播放器框架
• 自定義視頻控制欄教程