欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

概述

视频教程模块是福报养成计应用中的一个多媒体学习功能，它为用户提供了丰富的视频教程资源。用户可以在模块中浏览各种福报相关的视频教程，选择感兴趣的视频进行观看。这个模块的设计目的是为用户提供更加直观和生动的学习方式，通过视频的形式更好地理解福报的概念和实践方法。

视频教程模块支持完整的视频管理和播放功能。系统可以展示所有可用的视频教程，包括视频标题、描述、时长、讲师等信息。用户可以在线观看视频，系统会记录用户的观看进度，支持断点续播。用户可以对视频进行收藏、分享等操作。

完整流程

第一部分：视频展示与选择

系统从数据库中查询所有视频教程，按照分类、热度等进行组织展示。用户可以浏览视频列表，查看视频的详细信息，如视频描述、讲师、时长等。用户点击视频卡片选择要观看的视频。

第二部分：视频播放与进度跟踪

用户进入视频播放页面后，可以观看视频内容。系统会记录用户的观看进度，包括当前播放位置、观看时长等。系统支持暂停、快进、快退等播放控制功能。用户可以随时离开，系统会保存观看进度，下次进入时可以从上次的位置继续观看。

第三部分：收藏与推荐

用户可以收藏喜欢的视频，系统会记录用户的收藏。系统可以根据用户的观看历史和收藏推荐相关的视频，提高用户的学习效率。用户可以分享视频给其他用户。

Web 代码实现

<div class="videos-container">
  <h1>视频教程</h1>
  <div class="videos-grid" id="videosGrid"></div>
</div>

HTML 结构包含视频网格容器，用于展示所有视频教程。

JavaScript 逻辑

class VideosModule {
  loadVideos() {
    cordova.exec(
      (result) => {
        this.renderVideos(result.videos);
      },
      (error) => console.error('加载视频失败:', error),
      'VideosPlugin',
      'getVideos',
      []
    );
  }

  renderVideos(videos) {
    const grid = document.getElementById('videosGrid');
    grid.innerHTML = '';
    videos.forEach(video => {
      const div = document.createElement('div');
      div.className = 'video-card';
      div.innerHTML = `
        <div class="video-thumbnail">▶️</div>
        <h3>${video.title}</h3>
        <p>${video.duration}分钟</p>
        <button onclick="watchVideo(${video.id})">观看</button>
      `;
      grid.appendChild(div);
    });
  }
}

const videosModule = new VideosModule();
videosModule.loadVideos();

JavaScript 代码通过 Cordova 的 exec 方法调用原生插件获取视频列表。loadVideos 方法获取所有视频，renderVideos 方法将视频渲染成卡片形式展示，每个卡片显示视频缩略图、标题、时长和观看按钮。

原生代码

export class VideosPlugin {
  getVideos(callback: (data: any) => void): void {
    try {
      const db = this.getDatabase();
      const videos = db.query(`
        SELECT * FROM videos ORDER BY created_at DESC
      `);
      callback({ videos });
    } catch (error) {
      callback({ videos: [] });
    }
  }

  private getDatabase(): any { return null; }
}

原生代码使用 ArkTS 实现视频列表的查询。getVideos 方法从数据库中查询所有视频教程，按照发布时间倒序排列，最新的视频优先显示。

📝 总结

视频教程模块提供了多媒体学习资源，增强学习体验。关键技术包括：视频展示、播放进度跟踪、收藏管理等。通过 Cordova 与 OpenHarmony 的结合，实现了完整的视频教程功能。