??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??

說在前面的話

OpenHarmony標準系統已更新到了3.2 beta5的版本，近期社區應該也會推出3.2 release版本，甚是期待。富設備上不僅可以拍照、錄制視頻，娛樂功能必不可少，追劇看電影、打游戲，當前環境下還沒有相關的應用可以支持，接下去我就和大家一起從北向角度來實現一個視頻播放器，我們暫且叫它—愛電影（別笑話，名字比較俗，但通俗易懂）。

在不同的平臺上都存在不同類型的視頻播放器，主要的功能就是播放視頻資源，根據平臺不同其附加的功能也不同，比如在移動設備上，市場上的視頻播放器除播放視頻外，還給用戶提供了選擇視頻資源高強度、截屏、AI識別、背景音樂搜索、人物搜索等等高質量的體驗。本次的目的除了實現視頻播放的核心功能外，最主要還是以學習如何在OpenHarmony平臺上開發應用為主，所以附加功能待后期增加，下面我將給大家介紹下，愛電影視頻播放器的規劃。

效果展示

??在線視頻??

項目開發

項目規劃

項目開始先來看下整體規劃圖，如下：

從上面的設計初稿可以看出，我們的愛電影視頻播放器有4個頁面：閃屏頁、電影列表頁、播放電影頁（包含電影簡介）、全屏播放頁，接下去我們會對每個頁面的具體開發內容和涉及到是知識點進行詳細的說明，因為內容較多，會進行多篇的進行講解，我們開始吧~。

這邊插一句，視頻播放器的整體規劃圖中有同學可能會問是使用什么設計工具做的草圖，對于個人開發者而言，其實選擇性很多，而且基礎功能都是免費的，我個人使用的是Pixso設計工具，不說它有什么與眾不同，只是個人習慣，用得順手而已，我比較喜歡Pixso中提供的插件，比如圖標插件，支持iconfont直接導入資源，方便導出，開發中需要使用到的圖標基本都能找到。

下面簡單的介紹下，各頁面直接的關系。

• 閃屏頁：應用的入口頁面，可以用于初始化一些耗時的操作，默認等待時間3s，3s后自動跳轉到首頁；
• 首頁：由banner+電影列表組成，banner橫向自動輪詢播放，電影列表展示熱門電影，點擊相關的資源跳轉到視頻播放頁。
• 視頻播放頁：支持在線視頻和本地視頻加載與播放功能，同時支持視頻的暫停、繼續播放、拖拽進度、全屏播放、查看視頻簡介等功能，點擊全屏播放跳轉至全屏播放頁，當然可以通過頁面上的返回鍵回到上級頁面—首頁。
• 全屏播放頁：橫屏播放視頻，支持視頻基礎操作，播放、暫停、拖拽進度、切換播放倍數、退出全屏播放等功能，點擊頁面上的返回鍵或退出全屏播放鍵即可返回到上級界面—視頻播放頁，當然返回后橫屏切換成豎屏顯示。

大概了解了頁面的基礎功能和頁面之間的相互關系，接下來我們就從閃屏頁開始詳細的介紹下開發此功能所涉及的知識點。

首先我們看下閃屏頁面設計圖，如下：

如上圖所示，閃屏頁面的開發內容主要包含以下幾點：
1、主頁上加載一張電影海報，包括愛電影logo。
2、右上角顯示3s倒計時，倒計時結束自動跳轉到主頁。
3、閃屏頁面跳轉到主頁時，需要實現一個翻頁效果，要求：閃屏頁視圖跳轉時整體視圖呈現淡出且漸漸放大的效果。

開發環境

硬件平臺：DAYU2000 RK3568
系統版本：OpenHarmony 3.2 beta5
SDK：9（3.2.10.6）
IDE：DevEco Studio 3.1 Beta1 Build Version: 3.1.0.200, built on February 13, 2023

開發

創建工程

說明：通過DevEco Studio創建項目，項目相關配置如下圖：

程序代碼

Splash.ets

/**
 * 閃屏頁面
 */
import router from '@ohos.router';
const TAG: string = 'Splash'
@Entry
@Component
struct Splash {
  private timeID: number
  @State curTime: number = 3
  @State opacity1: number = 1
  @State scale1: number = 1
  aboutToAppear() {
    console.info(`${TAG} aboutToAppear`)
    this.timeID = setInterval(() => {
      this.curTime -= 1
      if (this.curTime === 0) {
        this.stopTime()
        this.goMainPage()
      }
    }, 1000)
  }
  stopTime() {
    clearInterval(this.timeID)
  }
  goMainPage() {
    console.info(`${TAG} goMainPage`)
    router.pushUrl({
      url: 'pages/Index'
    })
  }
  aboutToDisappear() {
    this.stopTime()
  }
  build() {
    Stack({
      alignContent: Alignment.TopEnd
    }) {
      Image($r('app.media.splash'))
        .width('100%')
        .height('100%')
        .objectFit(ImageFit.Fill)
      Text(this.curTime + 's')
        .fontColor(Color.White)
        .fontSize(12)
        .backgroundColor('#993b394a')
        .padding(10)
        .margin({
          top: 40,
          right: 40
        })
        .border({
          radius: 20
        })
    }
    .width('100%')
    .height('100%')
    .opacity(this.opacity1)
    .scale({
      x: this.scale1,
      y: this.scale1
    })
  }
  pageTransition() {
    PageTransitionExit({ duration: 1200, curve: Curve.Linear,
      type: RouteType.Push })
      .onExit((type: RouteType, progress: number) => {
        console.info(`${TAG} PageTransitionExit onExit type:${type} progress:${progress}`)
        this.opacity1 = 1 - progress
        this.scale1 = 1 + progress
      })
  }
}

開發說明

1、整個頁面根組件為Stack，通過堆疊的方式增加Image和Text組件實現界面視圖，Image用于加載愛電影宣傳圖，Text用于顯示倒計時的數字。
2、通過setInterval()每間隔1秒執行一次計算，并更改倒計時數值，顯示在右上角。
3、3s倒計時結束后，執行goMainPage()跳轉到主頁。
4、通過pageTransition的PageTransitionExit()實現頁面之間的轉場動畫，頁面路由router執行pushUrl時頁面會立即跳轉到目標頁面，而閃屏頁是初始頁面，為了實現界面淡出和放大的效果，我們除了在閃屏頁Splash.ets中實現頁面退出動效，還需要在目標頁面，也就是首頁Index.ets中實現pageTransition的PageTransitionEnter()，此頁面實現淡入，執行時長大于Splash.ets的PageTransitionExit()，即可以看出轉場效果。

Index.ets

pageTransition() {
  PageTransitionEnter({ duration: 1500,
    type: RouteType.Push,
    curve: Curve.Linear })
    .opacity(this.opacity1)
    .onEnter((type: RouteType, progress: number) => {
      console.info(`${TAG} PageTransitionEnter onEnter type:${type} progress:${progress}`)
      this.opacity1 = progress
    })
}

閃屏頁比較簡單，就介紹到這，下一篇介紹下視頻播放器的主頁，將閃屏頁與主頁關聯。

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??