??想了解更多關(guān)于開源的內(nèi)容，請訪問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

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

說在前面的話

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

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

效果展示

??在線視頻??

項目開發(fā)

項目規(guī)劃

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

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

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

下面簡單的介紹下，各頁面直接的關(guān)系。

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

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

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

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

開發(fā)環(huán)境

硬件平臺：DAYU2000 RK3568
系統(tǒng)版本：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

開發(fā)

創(chuàng)建工程

說明：通過DevEco Studio創(chuàng)建項目，項目相關(guān)配置如下圖：

程序代碼

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
      })
  }
}

開發(fā)說明

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

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
    })
}

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

??想了解更多關(guān)于開源的內(nèi)容，請訪問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

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